Animated binary heap (max-heap / min-heap): insert with sift-up, extract the top with sift-down, step-by-step compare & swap highlighting on an SVG tree and the parallel array view, plus a one-click heap-sort demo.
Pick max-heap or min-heap, enter an integer, and click Insert — the value is appended at the end of the array then sifted up (heapify-up), with every parent / child comparison and swap highlighted on both the SVG tree and the array. Extract top removes the root, moves the last node to the root, then sifts it down (heapify-down), swapping with the worthier child until the heap property is restored; the extracted value lands in the sorted-output tray. Build random fills a fresh heap; Heap sort repeats extract-top until the heap is empty, producing the elements in heap order (largest-first for a max-heap, smallest-first for a min-heap). Use Next step to advance frame-by-frame after pausing, Auto play to resume, Pause to halt. The array index appears under each tree node so the tree ↔ array mapping (parent = ⌊(i−1)/2⌋, children = 2i+1 / 2i+2) is explicit. Pure front-end — nothing is uploaded.
Where binary heaps are used
• Heapsort — O(n log n) in-place sorting
• Priority queues (schedulers, event simulation, Dijkstra / A* open sets)
• Top-k / kth-largest streaming selection
• Median maintenance with two heaps (max + min)
• Task schedulers and OS / printer job queues
• Huffman coding tree construction
• Timer / deadline wheels and expiring-cache eviction