One of my earlier projects, built when I wanted to see how sorting algorithms actually behave rather than just trace them on paper. Reading pseudocode for Quick Sort vs Heap Sort is one thing; watching them run side by side on the same array makes the differences obvious in a way the code alone doesn't.
How it works
The hard part of visualizing a sort isn't the algorithm, it's getting the DOM to animate without fighting it. Each of the five algorithms (Bubble, Selection, Insertion, Quick, Heap) is written as an async function that awaits a short delay between every comparison and swap. That pause is what hands control back to the browser so it can paint the intermediate state; without it the whole sort would finish in a single frame and you'd see nothing happen.
The bars move by CSS transform rather than by their order in the document, and that split is what makes a swap animate cleanly:
- swapping two bars exchanges their
transformvalues, and the CSS transition slides them past each other on screen; - the underlying DOM nodes are still in their old order, so once the animation has played they get reordered to match: a temporary placeholder takes one bar's slot, the two nodes are exchanged with
replaceWith, and the placeholder is removed.
Animating first and reordering after means the visual movement is pure CSS, and the DOM only changes a quarter-second later, once the eye has already followed the bars to their new positions. Each bar is a div whose height encodes its value, with the number labelled above it.
Colors
Color tracks what's happening at each step: purple for unsorted, a darker purple for the two elements being compared, green for ones that have reached their final position. Each algorithm layers its own accent colors on top, for the elements that only it cares about: the pivot and the less-than partition in Quick Sort, the running minimum in Selection Sort, the current largest in Heap Sort.
The interface
The whole thing is keyboard-driven: each algorithm has a letter (B, S, I, Q, H), N reshuffles the array, and D slides out a drawer. The drawer shows the selected algorithm's source, syntax-highlighted, next to a color legend that picks up that algorithm's accent colors and a hotkey reference. With the drawer open, the letter keys switch which implementation you're reading instead of running it, so you can flip between algorithms and their code side by side.
Limitations
A few things are fixed by design rather than choice. The array is always 20 elements and the animation speed is hardcoded, both of which could be settings but weren't worth it at the time. It wants at least an 876x624 viewport and shows a dismissible warning below that. And only one sort runs at a time: stopping a run is a full page reload, the bluntest possible reset, but it kept the state handling simple.