Sorting Algorithm Visualizer

Free sorting algorithm visualizer. Watch bubble, insertion, selection, merge and quicksort run step by step on random, nearly sorted or reversed data, with live comparison and write counts.

Sorting Visualizer

Auto-run

Live controls

Algorithm

Starting data

Array size90

Operations/frame6

Hue205

Knobs patch the running animation live. A few (marked in the code as baked-in values like particle counts) restart the preview.

Five sorts as generators, stepped a fixed number of operations per frame.

// Sorting Visualizer — every sort is a generator, so the animation can advance
// a fixed number of operations per frame. Sleeping inside a recursive sort
// would make it impossible to restart or to change the speed mid-run.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const params = window.params = Object.assign({
  algorithm: 'quick',
  distribution: 'random',
  count: 90,          // baked into the array, so it rebuilds
  ops: 6,             // generator steps per frame
  hue: 205,
}, window.params);

const LABELS = {
  bubble: 'bubble sort  O(n^2)',
  insertion: 'insertion sort  O(n^2)',
  selection: 'selection sort  O(n^2)',
  merge: 'merge sort  O(n log n)',
  quick: 'quicksort  O(n log n) avg',
};

let w = 0, h = 0, dpr = 1;
function resize() {
  dpr = Math.min(window.devicePixelRatio || 1, 2);
  w = canvas.width = Math.max(1, Math.floor(canvas.clientWidth * dpr));
  h = canvas.height = Math.max(1, Math.floor(canvas.clientHeight * dpr));
}
resize();
// ResizeObserver rather than window.onresize: it fires once right after layout
// settles (so the canvas is never measured at zero) and again on every panel
// resize, which a window listener would miss entirely.
new ResizeObserver(resize).observe(canvas);

let arr = [], aux = [], run = null, key = '';
let compares = 0, writes = 0, finished = false, sweep = 0;
let markA = -1, markB = -1;
function mark(a, b) { markA = a; markB = b; }

/* Each sort yields once per comparison and once per write. A yield is one
   animation step; nothing here knows that a screen exists. */

function* bubble(a) {
  for (let i = 0; i < a.length; i++) {
    let swapped = false;
    for (let j = 0; j < a.length - i - 1; j++) {
      mark(j, j + 1); compares++; yield;
      if (a[j] > a[j + 1]) {
        const t = a[j]; a[j] = a[j + 1]; a[j + 1] = t;
        writes += 2; swapped = true; yield;
      }
    }
    if (!swapped) return;   // already sorted: bubble sort's one redeeming trait
  }
}

function* insertion(a) {
  for (let i = 1; i < a.length; i++) {
    const v = a[i];
    let j = i - 1;
    while (j >= 0) {
      mark(j, i); compares++; yield;
      if (a[j] <= v) break;
      a[j + 1] = a[j]; writes++; j--; yield;
    }
    a[j + 1] = v; writes++; mark(j + 1, -1); yield;
  }
}

function* selection(a) {
  for (let i = 0; i < a.length; i++) {
    let m = i;
    for (let j = i + 1; j < a.length; j++) {
      mark(m, j); compares++; yield;
      if (a[j] < a[m]) m = j;
    }
    if (m !== i) {
      const t = a[i]; a[i] = a[m]; a[m] = t;
      writes += 2; mark(i, m); yield;
    }
  }
}

// yield* delegates to the recursive calls, so the recursion suspends and
// resumes exactly like a flat loop would.
function* merge(a, lo, hi) {
  if (hi - lo < 2) return;
  const mid = (lo + hi) >> 1;
  yield* merge(a, lo, mid);
  yield* merge(a, mid, hi);
  for (let i = lo; i < hi; i++) aux[i] = a[i];
  let i = lo, j = mid;
  for (let k = lo; k < hi; k++) {
    let v;
    if (i >= mid) v = aux[j++];
    else if (j >= hi) v = aux[i++];
    else { compares++; v = aux[j] < aux[i] ? aux[j++] : aux[i++]; }
    a[k] = v; writes++;
    mark(k, i < mid ? i : mid);
    yield;
  }
}

// Lomuto partition: everything smaller than the last element gets swapped to
// the front, then the pivot drops into the gap.
function* quick(a, lo, hi) {
  if (lo >= hi) return;
  const pivot = a[hi];
  let i = lo;
  for (let j = lo; j < hi; j++) {
    mark(j, hi); compares++; yield;
    if (a[j] < pivot) {
      if (i !== j) { const t = a[i]; a[i] = a[j]; a[j] = t; writes += 2; yield; }
      i++;
    }
  }
  const t = a[i]; a[i] = a[hi]; a[hi] = t; writes += 2;
  mark(i, hi); yield;
  yield* quick(a, lo, i - 1);
  yield* quick(a, i + 1, hi);
}

function currentKey() {
  return params.algorithm + '|' + params.distribution + '|' + Math.round(params.count);
}

function shuffle(a) {
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    const t = a[i]; a[i] = a[j]; a[j] = t;
  }
}

function restart() {
  const n = Math.max(4, Math.min(400, Math.round(params.count)));
  arr = new Array(n);
  const d = params.distribution;
  for (let i = 0; i < n; i++) {
    arr[i] = d === 'fewUnique' ? (Math.floor(i * 6 / n) + 1) / 6 : (i + 1) / n;
  }
  if (d === 'reversed') arr.reverse();
  else if (d === 'nearly') {
    // A handful of out-of-place elements: the case insertion sort is built for.
    for (let k = 0; k < Math.max(1, Math.round(n * 0.05)); k++) {
      const i = Math.floor(Math.random() * n), j = Math.floor(Math.random() * n);
      const t = arr[i]; arr[i] = arr[j]; arr[j] = t;
    }
  } else if (d !== 'sorted') shuffle(arr);

  aux = new Array(n);
  compares = 0; writes = 0; finished = false; sweep = 0; mark(-1, -1);
  if (params.algorithm === 'bubble') run = bubble(arr);
  else if (params.algorithm === 'insertion') run = insertion(arr);
  else if (params.algorithm === 'selection') run = selection(arr);
  else if (params.algorithm === 'merge') run = merge(arr, 0, n);
  else run = quick(arr, 0, n - 1);
  key = currentKey();
}
restart();

function draw() {
  ctx.fillStyle = '#07050f';
  ctx.fillRect(0, 0, w, h);

  const pad = 14 * dpr;
  const top = 40 * dpr;
  const n = arr.length;
  const bw = (w - pad * 2) / n;
  const base = h - pad;
  const span = Math.max(1, base - top);

  for (let i = 0; i < n; i++) {
    const bh = arr[i] * span;
    if (finished && i < sweep) ctx.fillStyle = 'hsl(140, 90%, 62%)';
    else if (i === markA || i === markB) ctx.fillStyle = '#ff2f6d';
    else ctx.fillStyle = 'hsl(' + (params.hue + arr[i] * 110) + ', 78%, ' + (34 + arr[i] * 30) + '%)';
    ctx.fillRect(pad + i * bw, base - bh, Math.max(1, bw - Math.min(2 * dpr, bw * 0.25)), bh);
  }

  ctx.fillStyle = '#e8e4ff';
  ctx.font = (13 * dpr) + 'px ui-monospace, SFMono-Regular, Menlo, monospace';
  ctx.fillText(
    (LABELS[params.algorithm] || params.algorithm) +
    '   n ' + n + '   compares ' + compares + '   writes ' + writes +
    (finished ? '   sorted' : ''),
    pad, 24 * dpr
  );
}

function frame() {
  // Changing the algorithm or the data shape restarts from a fresh array.
  // Array size carries rebuild:true as well, but checking here means the demo
  // recovers no matter which way the value arrives.
  if (currentKey() !== key) restart();

  if (!finished) {
    const steps = Math.max(1, Math.round(params.ops));
    for (let i = 0; i < steps; i++) {
      if (run.next().done) { finished = true; mark(-1, -1); break; }
    }
  } else {
    // A verification sweep left to right, then reshuffle and go again.
    sweep += Math.max(1, arr.length / 45);
    if (sweep > arr.length + 40) restart();
  }
  draw();
  requestAnimationFrame(frame);
}
frame();

// Sorting Visualizer — every sort is a generator, so the animation can advance
// a fixed number of operations per frame. Sleeping inside a recursive sort
// would make it impossible to restart or to change the speed mid-run.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const params = window.params = Object.assign({
  algorithm: 'quick',
  distribution: 'random',
  count: 90,          // baked into the array, so it rebuilds
  ops: 6,             // generator steps per frame
  hue: 205,
}, window.params);

const LABELS = {
  bubble: 'bubble sort  O(n^2)',
  insertion: 'insertion sort  O(n^2)',
  selection: 'selection sort  O(n^2)',
  merge: 'merge sort  O(n log n)',
  quick: 'quicksort  O(n log n) avg',
};

let w = 0, h = 0, dpr = 1;
function resize() {
  dpr = Math.min(window.devicePixelRatio || 1, 2);
  w = canvas.width = Math.max(1, Math.floor(canvas.clientWidth * dpr));
  h = canvas.height = Math.max(1, Math.floor(canvas.clientHeight * dpr));
}
resize();
// ResizeObserver rather than window.onresize: it fires once right after layout
// settles (so the canvas is never measured at zero) and again on every panel
// resize, which a window listener would miss entirely.
new ResizeObserver(resize).observe(canvas);

let arr = [], aux = [], run = null, key = '';
let compares = 0, writes = 0, finished = false, sweep = 0;
let markA = -1, markB = -1;
function mark(a, b) { markA = a; markB = b; }

/* Each sort yields once per comparison and once per write. A yield is one
   animation step; nothing here knows that a screen exists. */

function* bubble(a) {
  for (let i = 0; i < a.length; i++) {
    let swapped = false;
    for (let j = 0; j < a.length - i - 1; j++) {
      mark(j, j + 1); compares++; yield;
      if (a[j] > a[j + 1]) {
        const t = a[j]; a[j] = a[j + 1]; a[j + 1] = t;
        writes += 2; swapped = true; yield;
      }
    }
    if (!swapped) return;   // already sorted: bubble sort's one redeeming trait
  }
}

function* insertion(a) {
  for (let i = 1; i < a.length; i++) {
    const v = a[i];
    let j = i - 1;
    while (j >= 0) {
      mark(j, i); compares++; yield;
      if (a[j] <= v) break;
      a[j + 1] = a[j]; writes++; j--; yield;
    }
    a[j + 1] = v; writes++; mark(j + 1, -1); yield;
  }
}

function* selection(a) {
  for (let i = 0; i < a.length; i++) {
    let m = i;
    for (let j = i + 1; j < a.length; j++) {
      mark(m, j); compares++; yield;
      if (a[j] < a[m]) m = j;
    }
    if (m !== i) {
      const t = a[i]; a[i] = a[m]; a[m] = t;
      writes += 2; mark(i, m); yield;
    }
  }
}

// yield* delegates to the recursive calls, so the recursion suspends and
// resumes exactly like a flat loop would.
function* merge(a, lo, hi) {
  if (hi - lo < 2) return;
  const mid = (lo + hi) >> 1;
  yield* merge(a, lo, mid);
  yield* merge(a, mid, hi);
  for (let i = lo; i < hi; i++) aux[i] = a[i];
  let i = lo, j = mid;
  for (let k = lo; k < hi; k++) {
    let v;
    if (i >= mid) v = aux[j++];
    else if (j >= hi) v = aux[i++];
    else { compares++; v = aux[j] < aux[i] ? aux[j++] : aux[i++]; }
    a[k] = v; writes++;
    mark(k, i < mid ? i : mid);
    yield;
  }
}

// Lomuto partition: everything smaller than the last element gets swapped to
// the front, then the pivot drops into the gap.
function* quick(a, lo, hi) {
  if (lo >= hi) return;
  const pivot = a[hi];
  let i = lo;
  for (let j = lo; j < hi; j++) {
    mark(j, hi); compares++; yield;
    if (a[j] < pivot) {
      if (i !== j) { const t = a[i]; a[i] = a[j]; a[j] = t; writes += 2; yield; }
      i++;
    }
  }
  const t = a[i]; a[i] = a[hi]; a[hi] = t; writes += 2;
  mark(i, hi); yield;
  yield* quick(a, lo, i - 1);
  yield* quick(a, i + 1, hi);
}

function currentKey() {
  return params.algorithm + '|' + params.distribution + '|' + Math.round(params.count);
}

function shuffle(a) {
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    const t = a[i]; a[i] = a[j]; a[j] = t;
  }
}

aux = new Array(n);
  compares = 0; writes = 0; finished = false; sweep = 0; mark(-1, -1);
  if (params.algorithm === 'bubble') run = bubble(arr);
  else if (params.algorithm === 'insertion') run = insertion(arr);
  else if (params.algorithm === 'selection') run = selection(arr);
  else if (params.algorithm === 'merge') run = merge(arr, 0, n);
  else run = quick(arr, 0, n - 1);
  key = currentKey();
}
restart();

function draw() {
  ctx.fillStyle = '#07050f';
  ctx.fillRect(0, 0, w, h);

const pad = 14 * dpr;
  const top = 40 * dpr;
  const n = arr.length;
  const bw = (w - pad * 2) / n;
  const base = h - pad;
  const span = Math.max(1, base - top);

for (let i = 0; i < n; i++) {
    const bh = arr[i] * span;
    if (finished && i < sweep) ctx.fillStyle = 'hsl(140, 90%, 62%)';
    else if (i === markA || i === markB) ctx.fillStyle = '#ff2f6d';
    else ctx.fillStyle = 'hsl(' + (params.hue + arr[i] * 110) + ', 78%, ' + (34 + arr[i] * 30) + '%)';
    ctx.fillRect(pad + i * bw, base - bh, Math.max(1, bw - Math.min(2 * dpr, bw * 0.25)), bh);
  }

ctx.fillStyle = '#e8e4ff';
  ctx.font = (13 * dpr) + 'px ui-monospace, SFMono-Regular, Menlo, monospace';
  ctx.fillText(
    (LABELS[params.algorithm] || params.algorithm) +
    '   n ' + n + '   compares ' + compares + '   writes ' + writes +
    (finished ? '   sorted' : ''),
    pad, 24 * dpr
  );
}

function frame() {
  // Changing the algorithm or the data shape restarts from a fresh array.
  // Array size carries rebuild:true as well, but checking here means the demo
  // recovers no matter which way the value arrives.
  if (currentKey() !== key) restart();

if (!finished) {
    const steps = Math.max(1, Math.round(params.ops));
    for (let i = 0; i < steps; i++) {
      if (run.next().done) { finished = true; mark(-1, -1); break; }
    }
  } else {
    // A verification sweep left to right, then reshuffle and go again.
    sweep += Math.max(1, arr.length / 45);
    if (sweep > arr.length + 40) restart();
  }
  draw();
  requestAnimationFrame(frame);
}
frame();

Your code runs in a sandboxed frame with no access to this page, and it is never sent to a server. three.js demos load the library from jsDelivr; the rest need nothing but the browser.

Pick an animation

All 40 animations →

Canvas 2D

three.js

WebGL

CSS / DOM

How to read the visualization

Bar height is the value being sorted and red marks the two positions involved in the current comparison or swap. The counters below the chart track comparisons and writes separately, which matters because the two costs are not interchangeable: selection sort performs the fewest writes of anything here while doing the same number of comparisons regardless of input, and bubble sort does the most writes of all.

Set the array size to 200 and run each algorithm on the same data. The gap between the quadratic sorts and the n log n sorts stops being an abstraction once you watch the counters climb side by side.

Why the starting data changes everything

The Starting data control is the most instructive part of this tool, because algorithm performance is a property of the input as much as the algorithm.

Nearly sorted makes insertion sort finish almost immediately, because its real cost is the number of inversions rather than the array length squared. This is why production sorts such as Timsort detect existing runs and fall back to insertion sort for them.
Reversed is the worst case for a quicksort that takes the last element as its pivot: every partition is maximally unbalanced and the recursion depth grows to the length of the array.
Random is the case most textbooks quote, and the only one where the quoted average complexities apply directly.

Generators instead of sleeps

The obvious way to animate a sort is to put a short sleep inside the inner loop. It works once, then becomes unusable: the speed cannot be changed mid-run, restarting leaves half-finished recursive calls running, and the sort is no longer the algorithm you were trying to show.

Every sort here is written as a generator that yields once per comparison and once per write. The animation loop pulls a fixed number of steps per frame, so speed is a property of the renderer rather than the algorithm, and restarting is simply discarding the generator. Recursion still works normally through yield delegation, which is why quicksort and merge sort suspend and resume as cleanly as the flat loops do.

From the Inventive HQ family

OmniCanvas Notes

Visual thinking on an infinite canvas.

Notes, sketches and ideas laid out spatially instead of in a list. For people who think in diagrams and keep outgrowing linear note apps.

Take a look

Frequently Asked Questions

Which sorting algorithms does it show?+

Bubble sort, insertion sort, selection sort, merge sort and quicksort. Each runs on the same bar chart so you can compare them directly on identical data.

Why does insertion sort look slow on random data but fast on nearly sorted data?+

Because its cost is the number of inversions in the input, not n squared. On nearly ordered data there is almost nothing to move. That is exactly why real library sorts fall back to insertion sort for small or nearly sorted runs.

Which algorithm does the fewest writes?+

Selection sort, at one swap per pass. It still performs the same number of comparisons no matter what the input looks like, so its shape on screen never changes. Bubble sort sits at the other extreme and writes the most.

What do the red bars mean?+

Bar height is the value. Red marks the two positions being compared or swapped in the current step.

Why run quicksort on reversed data?+

To show why the last element is a poor pivot choice. On reversed input that pivot produces maximally unbalanced partitions and quicksort degrades towards n squared.

How is the animation implemented?+

Every sort is a JavaScript generator that yields once per comparison and once per write. The render loop pulls a fixed number of steps per frame, so speed is adjustable mid-run and restarting means discarding the generator. Recursive sorts suspend and resume through yield delegation.

Can I see the code?+

Yes. The HTML, CSS and JavaScript panes are editable and the code runs exactly as shown, so you can change an algorithm and watch the result immediately.

This tool is provided for informational and educational purposes only. All processing happens in your browser — no data is sent to or stored on our servers. While we strive for accuracy, we make no warranties about the completeness or reliability of results.