Sorting Algorithm Visualiser BubbleSort
Pick an algorithm, then press Sort to watch it run.
Getting started
How to use this visualiser
The visualiser above animates ten sorting algorithms on an array of bars, where each bar's height is its value. Sorting means rearranging those bars from shortest to tallest, and the point of watching is to see how each algorithm gets there — because they all reach the same result by strikingly different routes.
If you have never used it before, this order works best:
- 1 Pick an algorithm. On a wide screen the rail down the left lists all ten; on a phone, tap the algorithm name at the top to open the picker. Starting from zero, choose Bubble Sort — it is the easiest to follow.
- 2 Keep the array small at first. The size slider defaults low on purpose. With around ten bars you can follow every individual comparison. With fifty you can only see the overall shape of the algorithm.
- 3 Press Teach me rather than Sort. Teach me slows the animation right down and narrates each stage in the strip under the bars, which is far more useful on a first pass than watching an unexplained animation play out.
- 4 Watch the pseudocode, not just the bars. The currently executing line highlights as it runs. Connecting "this line is running" to "those bars just moved" is the moment the algorithm actually clicks.
- 5 Drag the timeline. The slider above the buttons scrubs through the whole sort, so you can jump straight back to the moment you missed instead of restarting. Pause, Back and Step move one operation at a time.
- 6 Predict the next move before you press Step. Guessing and being wrong teaches you more in ten seconds than re-reading a paragraph three times.
Compare all 10 opens the full complexity table side by side, and the sound toggle maps each value to a pitch — which makes the difference between a gradually-ordering hum and Quick Sort's sudden sweeps surprisingly easy to hear.
Reading the animation
What the colours mean
Every bar is colour-coded by what the algorithm is doing to it at that instant. Learning these five colours is most of what you need to read any of the animations:
- Comparing These two bars are being read and compared right now. Nothing has moved yet — this is the algorithm asking "which of you is bigger?"
- Swapping These two values are being exchanged. Every red flash is one write to the array, which is what the swap counter is tracking.
- Selected The element the algorithm is currently carrying or tracking — the key being inserted in Insertion Sort, or the running minimum in Selection Sort.
- Pivot Quick Sort's chosen pivot for the current partition. Watch how the choice of pivot changes how evenly the work splits.
- Locked in This element is in its final position and will not move again. Green spreading across the canvas is your progress bar.
The counters
Comparisons, swaps and elapsed time
Three counters run across the top of the stage, alongside the current state of the run. They are not equally meaningful.
Comparisons
How many times the algorithm has asked "is this value bigger than that one?". This is the headline measure of work for comparison-based sorting, and it is what Big-O notation is counting. An O(n²) algorithm on 50 elements makes roughly 1,250 comparisons; an O(n log n) algorithm makes roughly 280. Run both and watch the counters diverge.
Swaps
How many times two values have actually been exchanged — in other words, how many writes the algorithm performed. This matters separately from comparisons, because on real hardware writes can be far more expensive than reads. Selection Sort is the clearest illustration: it makes as many comparisons as Bubble Sort but only about n swaps, which is exactly why it is preferred when writing is the costly operation.
Elapsed
Wall-clock milliseconds since you pressed Sort — and the one number you should not use to judge an algorithm. It includes all the artificial animation delay that makes the visualisation watchable, so it mostly measures your speed slider. If you want to compare two algorithms fairly, shuffle once and compare their comparison and swap counts on the same array. Those counts are exact and delay-free.
Reference
The 10 algorithms at a glance
Time and space complexity for every algorithm in the visualiser. Stable means equal elements keep their original relative order — which matters whenever you sort the same data by one field after another.
| Algorithm | Best | Average | Worst | Space | Stable | Method |
|---|---|---|---|---|---|---|
| Bubble Sort | O(n) | O(n²) | O(n²) | O(1) | Yes | Exchanging |
| Selection Sort | O(n²) | O(n²) | O(n²) | O(1) | No | Selection |
| Insertion Sort | O(n) | O(n²) | O(n²) | O(1) | Yes | Insertion |
| Merge Sort | O(n log n) | O(n log n) | O(n log n) | O(n) | Yes | Merging |
| Quick Sort | O(n log n) | O(n log n) | O(n²) | O(log n) | No | Partitioning |
| Heap Sort | O(n log n) | O(n log n) | O(n log n) | O(1) | No | Selection |
| Shell Sort | O(n log n) | gap-dependent | O(n²) | O(1) | No | Insertion |
| Counting Sort | O(n + k) | O(n + k) | O(n + k) | O(k) | Yes | Counting |
| Radix Sort | O(nk) | O(nk) | O(nk) | O(n + k) | Yes | Digit buckets |
| Tim Sort | O(n) | O(n log n) | O(n log n) | O(n) | Yes | Insertion + merging |
Two honest caveats. Bubble Sort only achieves its O(n) best case because this implementation includes the early-exit check that stops once a full pass makes no swaps — the naive version is O(n²) even on sorted input. And Shell Sort has no single agreed average complexity: it depends entirely on the gap sequence used, so the table reports it as gap-dependent rather than inventing a precise-looking figure. Full derivations are in the documentation.
Where to start
A sensible order to watch them in
Working through the algorithms in this sequence means each one builds on the last rather than arriving out of nowhere:
- Bubble, then Insertion, then Selection. Three simple O(n²) sorts that introduce comparing, swapping and scanning. Run Insertion Sort on a nearly-sorted array to see an adaptive algorithm finish almost instantly.
- Merge Sort. Your first divide-and-conquer algorithm and the clearest picture of what O(n log n) looks like — a recursive staircase of splits followed by merges.
- Quick Sort. Watch the purple pivot. Run it several times and you will occasionally catch a badly-chosen pivot producing a lopsided split — which is the O(n²) worst case happening in front of you.
- Heap Sort, then Shell Sort. Two clever restructurings of ideas you have already met — selection via a heap, and insertion across widening gaps.
- Counting and Radix Sort. These break the comparison model entirely and beat O(n log n) by never comparing two values at all. Notice the animation looks completely different — bars are placed, not swapped.
- Tim Sort last. The hybrid that Python, Java and Swift actually ship. It only makes sense once you know both Insertion Sort and Merge Sort, because it is a careful combination of the two.
Each algorithm has a written walkthrough with code, complexity analysis and worked examples in the docs library.
Questions
Frequently asked questions
Is the sorting visualiser free to use? +
Yes — completely. There is no account, no sign-up, no trial and no premium tier. It runs entirely in your browser, and the running costs are intended to be covered by advertising rather than by charging you.
Why does the elapsed timer not match the real speed of the algorithm? +
Because the animation is deliberately slowed down so you can follow it. The elapsed timer measures wall-clock time including every animation delay, so it tells you nothing about real-world performance. Use the comparison and swap counters instead — those are exact counts of the work the algorithm actually did, and they are the fair way to compare two algorithms on the same array.
What array size should I use? +
Start at 10 to 15 elements. At that size you can follow every individual comparison and genuinely trace what the algorithm is doing. Once the behaviour makes sense, push the slider toward 50 to see the overall shape of the algorithm — the recursive staircase of Merge Sort, or the way Selection Sort sweeps the same ground over and over. Past roughly 40 bars the value labels are dropped, because they would overlap into an unreadable smear; the bar heights still carry the information.
Does the visualiser work on a phone? +
Yes, and it is built for one rather than merely tolerated. The bars, the narration and every control fit in a single screen, the playback buttons are full-size touch targets, and the algorithm picker is a bottom sheet listing all ten. The pseudocode and the algorithm notes sit in collapsible panels underneath, so the animation is always the first thing you see.
What does Teach me mode do? +
Teach me drops the speed to its slowest setting, trims the array to eight bars, and then plays the sort while explaining what is happening and why at each step in the narration strip below the bars. It is the best starting point if the algorithm is completely new to you.
Can I step backwards through an algorithm? +
Yes, in two ways. Back and Step move one operation at a time in either direction, and the timeline slider above them scrubs freely through the entire sort — so you can drag straight back to a moment you did not follow instead of restarting and waiting for it to come round again. Both keep working after the sort has finished, so you can review a completed run end to end.
Are there keyboard shortcuts? +
Space runs the sort and pauses or resumes it, the left and right arrow keys step one operation at a time once it is paused, and R reshuffles the array. The algorithm rail is a radio group, so you can also tab to it and move through the ten algorithms with the arrow keys.
Why do two algorithms show different comparison counts on the same array? +
That difference is the entire point. Press Shuffle, note the array, then run two algorithms on it and compare the counters. Seeing Selection Sort perform thousands of comparisons where Merge Sort needs a few hundred makes the gap between O(n²) and O(n log n) concrete in a way a graph never does.