gizmobench

Sorting Algorithm Visualizer

Run two sorting algorithms on the same array and step through every comparison and swap. Track equal-value identities, compare educational operation counts, and export the full traces.

Choose the same input for both algorithms

Enter 2–64 comma- or whitespace-separated decimals from −1,000,000 to 1,000,000, with up to six decimal places. Equal values keep their original identities (#1, #2, …), so their order remains visible.

Generate a repeatable array

The same whole-number seed (0–4,294,967,295) and length (2–64) reproduce the same array of integers from −20 to 20. Generating replaces the input; build traces afterward.

Explore operation events

Each trace advances by one comparison or swap event per step; the final event marks completion. Finished algorithms hold their final output. This alignment is not elapsed machine time. Playback pauses when hidden; edits, rewind, stepping and scrubbing stop pending playback.

Bubble sort

Stable by construction

Adjacent comparisons and swaps, with early exit after an unchanged pass.

Comparisons0
Swaps0
Array writes0
Bubble sort: 5 (#1), 3 (#2), 5 (#3), 1 (#4), 4 (#5), 3 (#6), 2 (#7), 4 (#8)Position 1: 5, original identity #151Position 2: 3, original identity #232Position 3: 5, original identity #353Position 4: 1, original identity #414Position 5: 4, original identity #545Position 6: 3, original identity #636Position 7: 2, original identity #727Position 8: 4, original identity #84850

Positions are one-based. Gold marks a comparison; green marks swapped positions. Both charts share the original value scale. Zero values use a one-pixel mark; full values and identities are below.

Event 0/44 · start
Original input. Identities #1 onward follow the entered order.

Operation log near this step

Up to 25 events near the selected step. Export includes all frames.

EventActionDescription
0startOriginal input. Identities #1 onward follow the entered order.
1compareCompare positions 1 and 2: 5 (#1) and 3 (#2).
2swapSwap positions 1 and 2: #1 and #2.
3compareCompare positions 2 and 3: 5 (#1) and 5 (#3).
4compareCompare positions 3 and 4: 5 (#3) and 1 (#4).
5swapSwap positions 3 and 4: #3 and #4.
6compareCompare positions 4 and 5: 5 (#3) and 4 (#5).
7swapSwap positions 4 and 5: #3 and #5.
8compareCompare positions 5 and 6: 5 (#3) and 3 (#6).
9swapSwap positions 5 and 6: #3 and #6.
10compareCompare positions 6 and 7: 5 (#3) and 2 (#7).
11swapSwap positions 6 and 7: #3 and #7.
12compareCompare positions 7 and 8: 5 (#3) and 4 (#8).
13swapSwap positions 7 and 8: #3 and #8.
14compareCompare positions 1 and 2: 3 (#2) and 5 (#1).
15compareCompare positions 2 and 3: 5 (#1) and 1 (#4).
16swapSwap positions 2 and 3: #1 and #4.
17compareCompare positions 3 and 4: 5 (#1) and 4 (#5).
18swapSwap positions 3 and 4: #1 and #5.
19compareCompare positions 4 and 5: 5 (#1) and 3 (#6).
20swapSwap positions 4 and 5: #1 and #6.
21compareCompare positions 5 and 6: 5 (#1) and 2 (#7).
22swapSwap positions 5 and 6: #1 and #7.
23compareCompare positions 6 and 7: 5 (#1) and 4 (#8).
24swapSwap positions 6 and 7: #1 and #8.

Insertion sort

Stable by construction

Stable adjacent-swap insertion: move each item left past strictly larger neighbors.

Comparisons0
Swaps0
Array writes0
Insertion sort: 5 (#1), 3 (#2), 5 (#3), 1 (#4), 4 (#5), 3 (#6), 2 (#7), 4 (#8)Position 1: 5, original identity #151Position 2: 3, original identity #232Position 3: 5, original identity #353Position 4: 1, original identity #414Position 5: 4, original identity #545Position 6: 3, original identity #636Position 7: 2, original identity #727Position 8: 4, original identity #84850

Positions are one-based. Gold marks a comparison; green marks swapped positions. Both charts share the original value scale. Zero values use a one-pixel mark; full values and identities are below.

Event 0/38 · start
Original input. Identities #1 onward follow the entered order.

Operation log near this step

Up to 25 events near the selected step. Export includes all frames.

EventActionDescription
0startOriginal input. Identities #1 onward follow the entered order.
1compareCompare positions 1 and 2: 5 (#1) and 3 (#2).
2swapSwap positions 1 and 2: #1 and #2.
3compareCompare positions 2 and 3: 5 (#1) and 5 (#3).
4compareCompare positions 3 and 4: 5 (#3) and 1 (#4).
5swapSwap positions 3 and 4: #3 and #4.
6compareCompare positions 2 and 3: 5 (#1) and 1 (#4).
7swapSwap positions 2 and 3: #1 and #4.
8compareCompare positions 1 and 2: 3 (#2) and 1 (#4).
9swapSwap positions 1 and 2: #2 and #4.
10compareCompare positions 4 and 5: 5 (#3) and 4 (#5).
11swapSwap positions 4 and 5: #3 and #5.
12compareCompare positions 3 and 4: 5 (#1) and 4 (#5).
13swapSwap positions 3 and 4: #1 and #5.
14compareCompare positions 2 and 3: 3 (#2) and 4 (#5).
15compareCompare positions 5 and 6: 5 (#3) and 3 (#6).
16swapSwap positions 5 and 6: #3 and #6.
17compareCompare positions 4 and 5: 5 (#1) and 3 (#6).
18swapSwap positions 4 and 5: #1 and #6.
19compareCompare positions 3 and 4: 4 (#5) and 3 (#6).
20swapSwap positions 3 and 4: #5 and #6.
21compareCompare positions 2 and 3: 3 (#2) and 3 (#6).
22compareCompare positions 6 and 7: 5 (#3) and 2 (#7).
23swapSwap positions 6 and 7: #3 and #7.
24compareCompare positions 5 and 6: 5 (#1) and 2 (#7).

What the counts include

A comparison is one call comparing two values; loop and index checks are excluded. A swap exchanges two distinct positions; self-swaps are omitted. Each swap records two main-array writes. Initial copies and temporary-variable assignments are excluded. Insertion uses adjacent swaps here, so its write count differs from a shifting implementation.

Stable means equal keys keep their original relative order for every input. Bubble and insertion are stable here. Selection, Lomuto quicksort and heapsort can reorder equal keys. Recursion, allocation, language runtime and device performance are not measured.

Export includes the input, every snapshot and identity, operation counts, algorithm conventions and stability labels. The displayed step does not limit the export. Inputs and traces are not automatically saved.

Educational comparison, swap and array-write counts for the implementations shown, not machine-performance benchmarks. Equal values retain visible original identities; only bubble and adjacent-swap insertion are guaranteed stable here. Trace building runs locally in a cancellable worker with a 15-second timeout.

Common questions

Which sorting algorithms are included?
The visualizer includes early-exit bubble sort, adjacent-swap insertion sort, minimum-selection sort, last-pivot Lomuto quicksort and max-heap heapsort. You can compare any two on the same input, or show one trace.
How are comparisons, swaps and writes counted?
Each value-to-value comparator call counts once. Loop and index checks do not count. An exchange of two different array positions is one swap and two main-array writes. Self-swaps, initial copying and temporary-variable assignments are excluded. These are educational counts, not timing benchmarks.
What does stable sorting mean?
A stable algorithm preserves the original relative order of equal values for every input. Original identities such as #2 and #6 make that order visible. Bubble and adjacent-swap insertion are stable here. Selection, quicksort and heapsort are not guaranteed stable, even when one input happens to preserve equal-value order.
How many swaps does reverse-order bubble sort make?
For five distinct values in reverse order, bubble sort makes ten swaps and twenty main-array writes in this implementation. It also makes ten value comparisons. You can load the reverse-five example and jump to the sorted output to verify the counts.
How does side-by-side playback work?
Each shared step advances each algorithm by one operation event; a finished trace holds its final frame. Playback interval controls viewing speed, not processor speed. Pause, step, rewind, scrub or edit to stop playback. Hiding the page pauses it automatically.
Can I generate repeatable arrays or export traces?
A seed from zero to 4,294,967,295 and a length from two to 64 generate the same integer array from -20 to 20. Manual arrays accept decimals between -1,000,000 and 1,000,000 with six decimal places. JSON export includes every frame, item identity, counter and algorithm convention, regardless of the visible step.
Does my input leave the browser?
No. Trace generation runs in a local cancellable worker with a 15-second timeout. Inputs and traces are not automatically saved. Timed-out or canceled builds do not display partial traces as complete.

Educational comparison, swap and array-write counts for the implementations shown, not machine-performance benchmarks. Equal values retain visible original identities; only bubble and adjacent-swap insertion are guaranteed stable here.