Sorting Algorithm Visualizer
Watch sorting algorithms work, step by step. Animate bubble, insertion, selection, quicksort, merge sort and heap sort on a shuffled bar array — with live comparison and swap counts. A hands-on way to see why some algorithms are so much faster than others.
How to Use
- Pick an algorithm from the menu — start with Bubble to see the simplest one, then try Quick or Merge.
- Set the array size and the animation speed with the sliders.
- Press Sort to watch it run; press again to pause, or use Step to advance one operation at a time.
- Shuffle to deal a fresh random array and compare how the same algorithm handles it.
- Watch the comparison and write counts climb — that is exactly what "fast" and "slow" mean in practice.
What you're watching
Sorting — putting a list in order — is one of the most studied problems in computing, because a computer does it constantly and because the way it does it matters enormously. Every bar here is a number; its height is its value. A sorted array rises smoothly from left to right. Each algorithm reaches that goal differently, and this tool drives the animation with a real implementation, recording every comparison (checking which of two values is larger) and every write (moving a value) so you see exactly what it costs.
The colours tell the story: a bar lights up while it is being compared, glows orange while it is swapped, and turns green when it has reached its final home. Watch where the green appears — bubble sort settles the largest value at the far right first, selection sort fills in from the left, quicksort locks in pivots scattered across the array, and merge sort assembles whole sorted runs at once. Those patterns are the algorithms.
The algorithms
Why Big-O matters
The labels O(n²) and O(n log n) describe how the work grows as the array gets bigger. For an O(n²) algorithm, doubling the array roughly quadruples the comparisons; for an O(n log n) algorithm, doubling barely more than doubles them. At 40 items the difference is modest, but the comparison counter here makes it visible — and at thousands or millions of items it is the difference between instant and unusable. That is why, although bubble sort is the easiest to write, real software almost always uses a quicksort or merge sort variant under the hood. Set both to the same size, run each, and read the counts: you are watching computational complexity in action.
About this visualizer
Every animation is produced by a real implementation of the named algorithm, which records its comparisons, swaps, and writes as a list of operations and then replays them onto the canvas at your chosen speed — so the counts are genuine and the motion is faithful. The Step button advances one operation at a time, which is perfect for tracing exactly how a partition or a merge unfolds. It all runs in your browser with nothing uploaded.
About the Sorting Algorithm Visualizer
Need a hand with web development and data tasks? The Sorting Algorithm Visualizer does the work for you — free, and right here in your browser. Watch sorting algorithms work, step by step. Animate bubble, insertion, selection, quicksort, merge sort and heap sort on a shuffled bar array — with live comparison and swap counts. A hands-on way to see why some algorithms are so much faster than others.
How it works
Type in what you have, and the answer shows up right away. Change anything and it updates by itself. Everything runs in your browser, so it is fast and nothing you type is sent away.
Want the deeper story? The Knowledge Base explains the ideas behind the tools in more detail.
Frequently Asked Questions
What do the colors mean?
Grey bars are unsorted. A bar turns the accent colour while it is being compared, orange while it is being swapped, and green once it is in its final sorted position. Watching the green grow shows you the algorithm's strategy — from one end, from the middle, or all at once.
Why is quicksort so much faster than bubble sort?
Bubble, insertion and selection sort compare nearly every pair of items, so they take on the order of n² operations — double the array and the work quadruples. Quicksort, merge sort and heap sort cleverly avoid most of those comparisons and take about n·log n operations, which grows far more gently. The comparison counter makes the gap obvious: try the same size with Bubble and then Merge.
What is a "stable" sort?
A stable sort keeps equal items in their original relative order. Merge sort and insertion sort are stable; quicksort and heap sort are not, by default. Stability matters when you sort by one key but want ties broken by a previous sort — for example sorting a table by date, then by name.
Are these the real algorithms?
Yes. Each animation is driven by a genuine implementation of that algorithm, recording every comparison, swap, and write as it runs, then replaying them. The counts you see are the real number of operations the algorithm performed on your array.
How do I use the Sorting Algorithm Visualizer?
Just type your numbers. The answer shows up right away — there is no button to press. Change anything and it updates by itself.
Is it free? Does it work without internet?
Yes to both. It is free with no sign-up, and once the page has loaded it keeps working even with no internet.
Where does my data go?
Nowhere — every calculation runs on your own device. Nothing you enter is uploaded, logged, or stored.
Common Use Cases
Learn how sorting works
See abstract pseudocode become motion — the single best way to finally understand quicksort's partition or merge sort's divide-and-conquer.
Feel the difference Big-O makes
Run an O(n²) sort and an O(n log n) sort at the same size and watch the comparison counts diverge dramatically.
Study for an interview or exam
Reinforce the behaviour and trade-offs of the classic algorithms by watching and stepping through them.
Teach a concept
Show a class exactly what "comparisons" and "swaps" mean, live, instead of on a static slide.
Last updated: