Sorting Algorithm Visualizer
Watch Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, and Quick Sort animate step by step on a bar chart. Comparisons, swaps, and sorted elements are colour-coded so you can follow every operation. No signup, runs entirely in your browser.
⏱ 7 min read · Complete guide below
How to Use the Sorting Algorithm Visualizer
- 1Choose an algorithm — Bubble, Selection, Insertion, Merge, or Quick Sort.
- 2Set the array size and speed; slow it down when learning a new algorithm.
- 3Watch the colour-coded bars — blue compared, orange swapped, red pivot, green sorted.
- 4Run different algorithms on the same size and compare step counts.
Worked Example: Watching O(n²) and O(n log n) Diverge
Set the array size to 50 and run Bubble Sort. It compares adjacent pairs and bubbles the largest value to the end each pass, so it needs on the order of 50² / 2 ≈ 1,250 comparisons — you will watch a lot of small orange swaps crawl across the chart. Now run Merge Sort on the same size: it recursively halves the array (log₂ 50 ≈ 6 levels) and merges, taking roughly 50 × 6 = 300 operations. The visual difference in how long the animation runs is the O(n²)-versus-O(n log n) gap made concrete.
The visualizer also exposes the caveats that raw Big O hides. Run Quick Sort a few times: on random arrays it is fast, but its speed swings with pivot luck, and an already-sorted input with a naive pivot degrades toward O(n²). Meanwhile Insertion Sort, technically O(n²), finishes almost instantly on a nearly-sorted array of 8 elements — which is why real libraries switch to it for small runs. Seeing the bars move turns these “it depends” footnotes into something you can watch happen.
Why Visualising Sorting Helps It Click
Sorting algorithms are a rite of passage in computer science, but reading their pseudocode rarely conveys how they actually behave. Seeing them animate does. When you watch Bubble Sort repeatedly push the largest remaining value to the end, or Selection Sort scan for the minimum and place it, or Merge Sort split the array down and reassemble it in order, the logic stops being a wall of loops and becomes an intuitive picture. The colour coding is the key: highlighting which elements are being compared, which are being swapped, and which are already sorted turns each abstract step into something you can literally follow with your eyes, which is why visualisation is one of the most effective ways to learn these algorithms.
Understanding Big O Through the Bars
The reason some algorithms are “better” than others comes down to how the number of operations grows as the input gets larger — captured by Big O notation. The simple algorithms (Bubble, Selection, Insertion) are O(n²): doubling the array roughly quadruples the work, which you can see as the animation dragging on for larger sizes. Merge Sort and Quick Sort are O(n log n), growing far more gently, so they pull dramatically ahead on big arrays. Running two algorithms on the same size and watching one finish while the other is still crawling makes this growth difference tangible in a way a table of complexities never can — the gap between n² and n·log n stops being theory and becomes something you watch unfold.
Choosing the Right Algorithm
In practice there is no single “best” sort, and the visualizer reveals why. Insertion Sort, despite being O(n²), is genuinely fast on small or nearly-sorted arrays, which is why real standard libraries fall back to it for short runs. Merge Sort guarantees O(n log n) and is stable (it preserves the order of equal elements), making it ideal when predictable performance and stability matter. Quick Sort is usually the fastest in practice thanks to good cache behaviour, but a poor pivot choice can degrade it to O(n²). Understanding these trade-offs — worst case versus average case, stability, and behaviour on real data — is exactly the practical judgement that distinguishes knowing algorithms from merely memorising them.
Algorithm Comparison Tips
Compare step counts
Set the same array size and run each algorithm. Merge Sort and Quick Sort take far fewer steps than Bubble Sort on large arrays — this makes O(n log n) vs O(n²) tangible.
Slow down for clarity
Set speed to Slow when studying a new algorithm. Watch exactly which elements are compared and swapped at each step before speeding up for the full picture.
Insertion Sort on small arrays
Insertion Sort performs very well on nearly-sorted arrays and small arrays (n < 20). Try it on size 8 — it often beats Merge Sort in raw step count on short inputs.
Stability comparison
Merge Sort and Insertion Sort are stable (equal elements maintain relative order). Quick Sort is typically unstable. Selection Sort is also unstable. Stability matters when sorting objects with multiple keys.
Frequently Asked Questions
Which algorithms are included?
Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, and Quick Sort. These are the five algorithms most commonly covered in introductory computer science courses.
What do the bar colours mean?
Blue bars are being compared in the current step. Orange bars are being swapped. Red indicates the pivot element in Quick Sort. Green bars have been confirmed in their final sorted position.
What is the time complexity of each algorithm?
Bubble, Selection, and Insertion Sort are O(n²) in the worst case. Merge Sort is O(n log n) always. Quick Sort averages O(n log n) but degrades to O(n²) on already-sorted input with a naive pivot choice.
Why does Quick Sort sometimes look slow?
Quick Sort's step count depends on the pivot choices. The worst case occurs when the pivot is always the largest or smallest element. For random arrays (as generated here), Quick Sort is typically fast in practice.
What is the difference between Merge Sort and Quick Sort?
Merge Sort divides the array in half recursively, sorts each half, then merges them — always O(n log n). Quick Sort partitions around a pivot element, which is more cache-friendly but has a worst-case O(n²). In practice, Quick Sort is faster on most real-world data.
Is my data stored?
No. The arrays are generated in your browser and never sent to any server.
What is Big O notation and how does the visualizer show it?
Big O notation describes how an algorithm's number of operations grows as the input size increases. O(n²) algorithms slow down sharply as arrays grow, while O(n log n) algorithms scale far more gently. The visualizer makes this concrete: run an O(n²) sort like Bubble Sort and an O(n log n) sort like Merge Sort on the same array size, and you can watch the faster algorithm finish while the slower one is still working — the growth-rate difference made visible.
Which sorting algorithm is the fastest?
It depends on the data. For large random arrays, Quick Sort is usually fastest in practice due to good cache behaviour, though a bad pivot choice can slow it to O(n²). Merge Sort guarantees O(n log n) every time and is stable. On small or nearly-sorted arrays, simple Insertion Sort can actually beat them both, which is why real libraries switch to it for short runs. There is no single "fastest" sort — the right choice depends on the input and requirements.
What does it mean for a sorting algorithm to be "stable"?
A stable sort preserves the relative order of elements that compare as equal. For example, if you sort a list of people by age and two share the same age, a stable sort keeps them in their original order. Merge Sort and Insertion Sort are stable; Quick Sort and Selection Sort typically are not. Stability matters when sorting records by one key after another, and it is a real factor in choosing an algorithm beyond raw speed.
Why does Quick Sort sometimes take many more steps?
Quick Sort works by partitioning the array around a chosen pivot, and its efficiency depends heavily on how balanced those partitions are. With good pivots it runs in O(n log n), but if the pivot is repeatedly the largest or smallest element — which happens on already-sorted input with a naive pivot choice — the partitions become lopsided and it degrades to O(n²). On the random arrays this tool generates, Quick Sort is usually fast, but you can watch it struggle in the worst case.
How can I use this to study for a computer science course?
Pick one algorithm at a time, set the speed to slow, and follow the colour-coded comparisons and swaps until you can predict the next move yourself. Then run several algorithms on the same array size and compare how long each takes, connecting what you see to the Big O complexity. This active, visual approach — predicting behaviour and confirming it — tends to make sorting algorithms stick far better than reading pseudocode alone.