Sorting visualizer
Replay bubble, selection, insertion, merge, quick and heap sort step by step on a bar chart, with adjustable speed, pause, random or custom data, and live comparison, swap and complexity figures.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Data and algorithm
The algorithms run as pure functions in sorting-visualizer.ts and return compare / swap / set steps; the page just replays them. Random data comes from the browser crypto API.
Visualisation
5 1 9 3 7 2 8 4
25130Best O(n) · Average O(n²) · Worst O(n²) · Extra space O(1) · stable sort
What this tool does
- Explain an algorithm lecture with frame-by-frame playback: bubble, selection, insertion, merge, quick and heap sort all use the same compare / swap / set step model, so you can compare when each one touches the data.
- Check claims like "quick sort degrades to O(n²)": feed already sorted data to quick sort and the comparison count explodes, while merge sort barely changes on the same input.
- Profile an algorithm by counting work instead of milliseconds — comparisons, swaps and writes are read straight off the run.
- Sanity-check your own implementation against a reference: run the same data through a standard algorithm and compare the step counts.
Example
Input
Data 5, 1, 9, 3, 7, 2, 8, 4 (the default), algorithm bubble sort
Output
25 comparisons, 13 swaps, 0 writes, 38 steps, result 1 2 3 4 5 7 8 9
Bubble sort always performs exactly n(n-1)/2 swaps on fully reversed input; this data is only partly shuffled, hence 13 swaps. Merge sort on the same data reports 17 comparisons, 0 swaps and 24 writes — its cost is in writes.
Frequently asked questions
Why is the comparison count higher than what I counted by hand?
Every comparison that actually executes is counted, including the one that fails — for example the final check in insertion sort that discovers the previous element is not greater, or the extra pass bubble sort makes before it exits early. That is closer to real execution cost than counting only successful comparisons.
Why does merge sort report 0 swaps?
Merge sort never swaps: it copies the merged run back into the array position by position, so the tool records those as writes (set) instead of swaps. On the same 8-element data it does 17 comparisons and 24 writes, while heap sort works through swaps and ends up with more of them.
Does quick sort really degrade?
Yes. This implementation uses Lomuto partitioning with the last element as pivot, so already sorted or reversed input splits off a single element per pass, the recursion depth becomes n and comparisons grow to O(n²). Production code avoids this with a random pivot or median-of-three.
Can I turn the animation off?
Yes. When the system requests reduced motion (prefers-reduced-motion), the tool skips frame-by-frame playback and shows the final array with all counters immediately. You can also press "Jump to the end" for the result or step manually with the previous / next buttons.
How much data can I enter?
Between 2 and 64 integers, negative values and duplicates included. Every step stores an array snapshot, so memory grows with both the element count and the number of steps — 64 elements already means several thousand snapshots, and anything larger would visibly stutter.
Keywords：sorting visualizersorting algorithmbubble sortquick sortmerge sortheap sortalgorithm animation排序算法可视化冒泡排序快速排序归并排序堆排序算法动画比较次数