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 constructionAdjacent comparisons and swaps, with early exit after an unchanged pass.
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.
| Event | Action | Description |
|---|---|---|
| 0 | start | Original input. Identities #1 onward follow the entered order. |
| 1 | compare | Compare positions 1 and 2: 5 (#1) and 3 (#2). |
| 2 | swap | Swap positions 1 and 2: #1 and #2. |
| 3 | compare | Compare positions 2 and 3: 5 (#1) and 5 (#3). |
| 4 | compare | Compare positions 3 and 4: 5 (#3) and 1 (#4). |
| 5 | swap | Swap positions 3 and 4: #3 and #4. |
| 6 | compare | Compare positions 4 and 5: 5 (#3) and 4 (#5). |
| 7 | swap | Swap positions 4 and 5: #3 and #5. |
| 8 | compare | Compare positions 5 and 6: 5 (#3) and 3 (#6). |
| 9 | swap | Swap positions 5 and 6: #3 and #6. |
| 10 | compare | Compare positions 6 and 7: 5 (#3) and 2 (#7). |
| 11 | swap | Swap positions 6 and 7: #3 and #7. |
| 12 | compare | Compare positions 7 and 8: 5 (#3) and 4 (#8). |
| 13 | swap | Swap positions 7 and 8: #3 and #8. |
| 14 | compare | Compare positions 1 and 2: 3 (#2) and 5 (#1). |
| 15 | compare | Compare positions 2 and 3: 5 (#1) and 1 (#4). |
| 16 | swap | Swap positions 2 and 3: #1 and #4. |
| 17 | compare | Compare positions 3 and 4: 5 (#1) and 4 (#5). |
| 18 | swap | Swap positions 3 and 4: #1 and #5. |
| 19 | compare | Compare positions 4 and 5: 5 (#1) and 3 (#6). |
| 20 | swap | Swap positions 4 and 5: #1 and #6. |
| 21 | compare | Compare positions 5 and 6: 5 (#1) and 2 (#7). |
| 22 | swap | Swap positions 5 and 6: #1 and #7. |
| 23 | compare | Compare positions 6 and 7: 5 (#1) and 4 (#8). |
| 24 | swap | Swap positions 6 and 7: #1 and #8. |
Insertion sort
Stable by constructionStable adjacent-swap insertion: move each item left past strictly larger neighbors.
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.
| Event | Action | Description |
|---|---|---|
| 0 | start | Original input. Identities #1 onward follow the entered order. |
| 1 | compare | Compare positions 1 and 2: 5 (#1) and 3 (#2). |
| 2 | swap | Swap positions 1 and 2: #1 and #2. |
| 3 | compare | Compare positions 2 and 3: 5 (#1) and 5 (#3). |
| 4 | compare | Compare positions 3 and 4: 5 (#3) and 1 (#4). |
| 5 | swap | Swap positions 3 and 4: #3 and #4. |
| 6 | compare | Compare positions 2 and 3: 5 (#1) and 1 (#4). |
| 7 | swap | Swap positions 2 and 3: #1 and #4. |
| 8 | compare | Compare positions 1 and 2: 3 (#2) and 1 (#4). |
| 9 | swap | Swap positions 1 and 2: #2 and #4. |
| 10 | compare | Compare positions 4 and 5: 5 (#3) and 4 (#5). |
| 11 | swap | Swap positions 4 and 5: #3 and #5. |
| 12 | compare | Compare positions 3 and 4: 5 (#1) and 4 (#5). |
| 13 | swap | Swap positions 3 and 4: #1 and #5. |
| 14 | compare | Compare positions 2 and 3: 3 (#2) and 4 (#5). |
| 15 | compare | Compare positions 5 and 6: 5 (#3) and 3 (#6). |
| 16 | swap | Swap positions 5 and 6: #3 and #6. |
| 17 | compare | Compare positions 4 and 5: 5 (#1) and 3 (#6). |
| 18 | swap | Swap positions 4 and 5: #1 and #6. |
| 19 | compare | Compare positions 3 and 4: 4 (#5) and 3 (#6). |
| 20 | swap | Swap positions 3 and 4: #5 and #6. |
| 21 | compare | Compare positions 2 and 3: 3 (#2) and 3 (#6). |
| 22 | compare | Compare positions 6 and 7: 5 (#3) and 2 (#7). |
| 23 | swap | Swap positions 6 and 7: #3 and #7. |
| 24 | compare | Compare 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.