Skip to main content

​
Heap Visualizer

Explore the heap data structure with an interactive visualizer that demonstrates heap properties, insertion with bubble-up, and removal with bubble-down operations.

Try the Live Visualizer

Interact with the heap visualizer to see how elements maintain the heap property through insertion and removal

​
What is a Heap?

A heap is a specialized binary tree data structure that satisfies the heap property:
In a max heap, every parent node has a value greater than or equal to its children. The root node always contains the maximum value.
      10
    /    \
   5      6
  / \    /
 5   4  3

​
Key Properties

Complete Binary Tree

Heaps are filled from left to right at each level. All levels are completely filled except possibly the last level.

Array Implementation

Heaps are efficiently stored as arrays since they’re always complete binary trees, making them space-efficient.

​
Parent-Child Relationships

Heaps use simple formulas to navigate the tree structure when stored as an array:
For any element at index i:
  • Parent index: (i - 1) / 2
  • Left child index: (2 * i) + 1
  • Right child index: (2 * i) + 2
These relationships allow efficient traversal without storing explicit pointers.

​
Operations

​
Insert Operation

Insertion maintains the heap property through a bubble-up process:
1

Add to End

Insert the new element at the end of the array (bottom-right of the tree) to maintain the complete binary tree property.
2

Bubble Up

Compare the new element with its parent. If it violates the heap property (greater than parent in max heap), swap them.
3

Repeat

Continue bubbling up until the element is in the correct position or reaches the root.
Example: Inserting 7 into [10, 5, 6, 5, 4, 6] 
Initial: [10, 5, 6, 5, 4, 6]
Add 7:   [10, 5, 6, 5, 4, 6, 7]
Swap:    [10, 5, 7, 5, 4, 6, 6]  (7 > 6, swap with parent)
Final:   [10, 5, 7, 5, 4, 6, 6]  (7 < 10, stop)
Time Complexity: O(log n) - In the worst case, the element bubbles up the entire height of the tree

​
Remove Operation

Removal always extracts the root and uses bubble-down to restore the heap:
1

Remove Root

Extract the root element (maximum in max heap). This is the element being removed.
2

Replace with Last

Move the last element in the array to the root position to maintain the complete tree property.
3

Bubble Down

Compare the new root with its children. Swap with the larger child (in max heap) if it violates the heap property.
4

Repeat

Continue bubbling down until the element is in the correct position or becomes a leaf node.
Example: Removing from [10, 5, 6, 5, 4, 3] 
Initial:  [10, 5, 6, 5, 4, 3]
Remove:   [3, 5, 6, 5, 4]       (remove 10, move 3 to root)
Swap:     [6, 5, 3, 5, 4]       (3 < 6, swap with larger child)
Final:    [6, 5, 3, 5, 4]       (3 has no larger children)
Time Complexity: O(log n) - The element may need to bubble down the entire height of the tree

​
Using the Visualizer

The heap visualizer provides both a tree view and an array representation:
1

Insert Elements

Enter a value and click Insert. The element is added at the end of the heap.
2

Step Through Heapify

If the insertion violates the heap property, click Next Step to see the bubble-up process in action.
3

Remove Elements

Click Remove to extract the root. Use Next Step to visualize the bubble-down process.
4

Toggle Views

Use Show/Hide Tree to switch between tree and array-only views.
You cannot insert or remove elements while a heapify operation is in progress. Complete the current operation using Next Step first.

​
Implementation Details

The visualizer implements these core helper methods: 
// Check if a node satisfies heap property
function isValidParent(index) {
  if (!hasLeftChild(index)) return true;
  if (!hasRightChild(index)) 
    return heap[index] >= leftChild(index);
  return heap[index] >= leftChild(index) && 
         heap[index] >= rightChild(index);
}

// Find the larger child for bubble-down
function largerChildIndex(index) {
  if (!hasRightChild(index)) 
    return leftChildIndex(index);
  return leftChild(index) > rightChild(index) 
    ? leftChildIndex(index) 
    : rightChildIndex(index);
}

​
Time Complexity Summary

Insert

O(log n)Bubble up operation

Remove

O(log n)Bubble down operation

Peek

O(1)Access root element

​
Common Use Cases

  • Priority Queues: Efficiently manage tasks by priority
  • Heap Sort: O(n log n) sorting algorithm
  • Dijkstra’s Algorithm: Finding shortest paths in graphs
  • Median Maintenance: Track running median in streams
  • Job Scheduling: Operating system task management

Priority Queue

See how heaps power priority queue operations

Binary Tree

Explore general binary tree traversals

Interactive Heap Visualizer

Practice inserting and removing elements with step-by-step visualization