Welcome back
Please enter your details to sign in to your account
Sorting Visualizer
Watch sorting algorithms come to life. Compare speed, swaps, and comparisons in real time.
| Best | Average | Worst | Space | Stable |
|---|---|---|---|---|
| O(n) | O(nยฒ) | O(nยฒ) | O(1) | Yes |
- Select a sorting algorithm from the tabs above
- Adjust Array Size and Speed with the sliders
- Click Shuffle to generate a new random array
- Click Sort to start the visualization
- Use Pause/Resume to control playback
- Watch the color indicators: ๐ต Blue: unsorted ๐ก Yellow: comparing ๐ด Red: swapping ๐ข Green: sorted ๐ฃ Purple: pivot ๐ Orange: insertion position
1. Generator Pattern
All sorting algorithms are implemented as JavaScript Generator functions. Each step yields a snapshot of the array state with highlighted indices. The visualizer consumes one step at a time with a configurable delay, making it easy to pause, resume, or change speed mid-sort.
// Generator yields each comparison/swap as a step
function* bubbleSort(arr: number[]): SortGenerator {
// ...
yield { array: [...arr], comparing: [j, j+1], swapping: [] };
// ...
}
// Visualizer consumes one step at a time
const { value, done } = generator.next();
setState(value);
await sleep(delay);2. Time Complexity Comparison
O(nยฒ) algorithms (Bubble, Selection, Insertion) slow down dramatically with large arrays. O(n log n) algorithms (Merge, Quick, Heap) scale much better. Try Array Size = 100 to see the difference clearly.
3. Stable vs Unstable Sort
A stable sort preserves the relative order of equal elements. Bubble, Insertion, and Merge Sort are stable. Selection, Quick, and Heap Sort are not.
- Playground for Developers by DevSupporter