0COMPARISONS
0SWAPS
0msELAPSED
← Home
Algorithms
BubbleSort
Array Size 10
Speed 0.2×
IDLE
ARRAY · 60 ELEMENTS
ALGO · Bubble Sort
COMPARING
SWAPPING
SELECTED
PIVOT
SORTED
Pseudocode
bubble_sort
pseudocode
Description
Complexity
Best Use Cases
    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. 1 Pick an algorithm from the list on the left. If you are starting from zero, choose Bubble Sort — it is the easiest to follow.
    2. 2 Drop the array size to about 10. The default is deliberately small for a reason: with ten bars you can follow every single comparison. With fifty you can only see the overall pattern.
    3. 3 Press Teach Me rather than Sort. Teach Me narrates each stage as it happens, which is far more useful on a first pass than watching an unexplained animation play out.
    4. 4 Watch the pseudocode panel, not just the bars. The current line highlights as it executes. Connecting "this line is running" to "those bars just moved" is the moment the algorithm actually clicks.
    5. 5 Use Pause, Back and Step. When something happens too fast, pause and step back over it one operation at a time. This is the single most valuable habit for learning from the visualiser.
    6. 6 Try to 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.

    The Compare All button opens the full complexity table for all ten algorithms 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.
    Sorted
    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 along the top of the visualiser, and 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.

    AlgorithmBestAverageWorstSpaceStableMethod
    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:

    Each algorithm has a written walkthrough with code on the blog, and the docs cover them in reference form.

    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.
    Does the visualiser work on a phone? +
    It works, but the three-panel layout is built for a wider screen. On a phone the bars and pseudocode are cramped. For a first encounter with an algorithm a laptop or tablet is a much better experience.
    What does Teach Me mode do? +
    Teach Me steps through the selected algorithm with narration, pausing to explain what is happening and why at each stage, rather than just playing the animation straight through. It is the best starting point if the algorithm is completely new to you.
    Can I step backwards through an algorithm? +
    Yes. Pause at any point and use the Back and Step buttons to move one operation at a time in either direction. Stepping backwards over a moment you did not follow is by far the most useful feature for actually understanding an algorithm.
    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.