How to use the visualizer

1. Choose min or max

The kind decides which way comparisons go: a min-heap keeps the smallest value at the root, a max-heap the largest. Switching kinds starts a fresh session.

2. Build the heap

Either insert numbers one at a time (each insert appends at the next free slot and sifts up), or type a list — the sample from class is pre-filled — and press Heapify to watch the build-from-below: every parent sifted down, last parent first. Up to 15 whole numbers keep the tree readable.Heap sort reads the same list, because building the heap is its own first phase.

Or press one of the course examples: the binary heaps page's eight inserts into a min-heap, and the heap sort page's in-place max-heapify. Each switches to the kind of heap that page builds, replays it here, and leaves its values in the list box so you can carry on from them — and the arrow beside it opens the page itself, so you can hold what you watched against the figures in the notes.

3. Operate and replay

Extract removes the root: it swaps with the last element, the heap shrinks, and the new root sifts down — the extracted value stays parked in the array, greyed out. Heap sort runs the whole algorithm: phase 1 builds the heap — the same last-parent-first sift-downs the Heapify button shows — and phase 2 repeats the extraction until the array is sorted in place. Heapify is not a separate algorithm you run first; it is heap sort's opening move, which is why pressing Heap sort on nothing still works. If the values on screen are already a heap, phase 1 is named rather than replayed — it would compare every parent and move nothing. Every operation plays automatically; use the controls to pause, change speed, step one compare-or-swap at a time, or scrub backwards through the whole session — nothing is ever lost until you clear or switch kinds.

When two values swap, both views draw two arrows between the slots that traded, and the two values travel along them and cross. The circles and the cells never move: a slot stays where it is and the value in it changes, which is exactly what a swap does to the array. The arrows stay on screen while you are paused or scrubbing, so you can always tell a swap from the comparison that led to it.

Watching the heap property

Under the views, a badge says whether the values still in the heap satisfy the heap property at the step you are looking at — so it turns amber the moment a sift begins and green again when the repair finishes. Scrub backwards and it follows you. During Heapify it stays amber until the last sift-down lands, which is the honest picture: an ordinary list only becomes a heap at the end of the build.

Beside it, Pause at each heap sort pass stops playback at the top of every round, so a class can talk through one extraction before the next begins. Press play to continue to the following pass. It affects heap sort only — the operation that is made of repeated identical rounds.

Reading the two views

  • The tree is the mental model: node i's children are 2i+1 and 2i+2.
  • The array is the reality: one flat list, no pointers. Both views highlight the same compares and swaps.
  • Green nodes and cells sit beyond len — extracted values in place, forming heap sort's output.
  • Your numbers never leave the browser — see About & privacy.

The course notes behind this

The Heaps chapter is short — three pages, and this app animates all three. Read them alongside it.

  • Introduction to heaps — the heap as a priority queue with two operations, insert and delete, and heap sort as what you get by repeating the second one.
  • Binary heaps — the complete-tree shape, the heap order property, percolate up and down, and the 2i+1 / 2i+2 index arithmetic — the two views here, side by side.
  • Heap sort — its two phases — build the heap, then repeated extraction into the space the heap vacates — for O(n log n) in place. The build is the O(n) half; the drain is the O(n log n) one, and it dominates. The green cells past len are that output.