Sort Visualizer
Watch sorting algorithms work step by step with animated bars and sound.
Algorithm code
User Guide
Getting Started
- Select a preset algorithm from the dropdown above the editor, or write your own sorting code.
- Click Start to begin visualization. Each bar represents an array element — taller bars are larger values.
- Use Pause / Resume to control playback, or Stop to cancel execution.
- Choose item-count and speed presets to control array size and playback speed.
- Enable Audio to hear tones mapped to values — higher pitches correspond to larger numbers.
Tip
To write your own: call length() to get the array size, iterate with loops, use compare(i, j) to compare elements, and swap(i, j) or write(i, value) to rearrange them.
API Reference
Write your algorithm using read/write/swap/compare/length/finish.
const sort = () => {
const n = length();
for (let i = 0; i < n - 1; i++) {
if (compare(i, i + 1) > 0) swap(i, i + 1);
}
finish();
};
sort();read(i)→ numberReturns the value at index i. Counted as a read operation.
const val = read(0);
write(i, value)→ voidSets the value at index i. Counted as a write operation.
write(0, 42);
swap(i, j)→ voidSwaps elements at indices i and j. Counted as a swap and two writes.
swap(0, 1);
compare(i, j)→ numberCompares values at i and j. Returns negative if arr[i] < arr[j], zero if equal, positive if greater. This is a number, not a boolean.
if (compare(i, j) > 0) swap(i, j);
length()→ numberReturns the total number of elements in the array.
const n = length();
finish()→ voidStops execution immediately when sorting is complete.
finish();
Color Legend
Common Mistakes
Use provided functions
Write your algorithm with read/write/swap/compare/length/finish.
Infinite loop
If your algorithm doesn't make progress, the overload detector will automatically stop it. Check your loop conditions.
Index out of bounds
Accessing an index outside 0 to length−1 returns undefined. Always check indices against length().
compare() returns a number
compare(i, j) returns negative / 0 / positive, not true or false. Use compare(i, j) > 0 to check ordering.
Algorithm Complexity
| Algorithm | Best | Average | Worst | Space | Stable |
|---|---|---|---|---|---|
| Bubble | O(n) | O(n²) | O(n²) | O(1) | Yes |
| Selection | O(n²) | O(n²) | O(n²) | O(1) | No |
| Insertion | O(n) | O(n²) | O(n²) | O(1) | Yes |
| Merge | O(n log n) | O(n log n) | O(n log n) | O(n) | Yes |
| Quick | O(n log n) | O(n log n) | O(n²) | O(log n) | No |
| Heap | O(n log n) | O(n log n) | O(n log n) | O(1) | No |
Statistics
Idle- Elapsed
- 0ms
- Reads
- 0
- Writes
- 0
- Swaps
- 0
- Comparisons
- 0
About the Sort Visualizer
This tool animates classic sorting algorithms — bubble, merge, quick sort and more — as moving bar charts, with tones mapped to values so you can hear the progress. You can also write and run your own algorithm.
Custom sort code runs inside a Web Worker sandbox to keep the main thread responsive, and a safety stop triggers when a suspected infinite loop is detected.