liminfoSort Algorithm Visualizer
Free web tool: Sort Algorithm Visualizer
About Sort Algorithm Visualizer
The Sorting Algorithm Visualizer is an interactive educational tool that animates six classic sorting algorithms — Bubble Sort, Insertion Sort, Selection Sort, Quick Sort, Merge Sort, and Heap Sort — in real time. Each bar in the visualization represents an array element, with color-coded states: blue for default, yellow for currently comparing elements, red for elements being swapped, and green for finalized sorted positions. This makes it immediately obvious how each algorithm progresses through the data.
Computer science students, bootcamp learners, and software engineers preparing for technical interviews use this tool to build genuine intuition about algorithm behavior. Seeing Quick Sort's pivot-based partitioning, Merge Sort's divide-and-conquer merging, or Heap Sort's max-heap construction unfold visually is far more memorable than reading pseudocode alone. You can adjust the array size from 10 to 80 elements and control animation speed from slow to fast to focus on specific phases of each algorithm.
All computation runs entirely in your browser using JavaScript frame generation. The tool pre-computes the full sequence of comparison and swap frames for the chosen algorithm, then plays them back at the selected speed using async/await timing. No data is sent to any server — everything executes locally, making the visualizer instant to start and completely private.
Key Features
- Six sorting algorithms: Bubble, Insertion, Selection, Quick Sort (Lomuto partition), Merge Sort (recursive), and Heap Sort
- Color-coded bar states: blue (default), yellow (comparing), red (swapping), green (sorted) for clear visual feedback
- Adjustable array size from 10 to 80 elements via range slider
- Variable animation speed from 1 to 100 — slow down to study individual steps or speed up to see the full sort
- Start and Reset controls — reset generates a new random array while preserving size settings
- Sorted elements turn green permanently so you can track the algorithm's progress region in real time
- 100% client-side frame generation — no server calls, works offline after page load
- Dark mode support with distinct color variants for all bar states
Frequently Asked Questions
What sorting algorithms does this visualizer support?
The visualizer supports six algorithms: Bubble Sort, Insertion Sort, Selection Sort, Quick Sort (using Lomuto partition scheme with the last element as pivot), Merge Sort (recursive top-down), and Heap Sort (max-heap based). Each is implemented faithfully to show authentic comparison and swap sequences.
What do the bar colors mean?
Blue bars are unsorted and not currently being examined. Yellow bars are the two elements currently being compared. Red bars are elements in the middle of being swapped. Green bars have been placed in their final sorted position and will not move again.
Which algorithm is fastest to watch?
Quick Sort and Merge Sort on random data tend to complete significantly faster than Bubble or Selection Sort on the same array size because they have O(n log n) average complexity versus O(n²). Set the array size to 60–80 at medium speed to see the difference clearly.
Why does Bubble Sort produce so many more frames than Quick Sort?
Bubble Sort has O(n²) comparisons in the worst case, generating approximately n²/2 comparison frames for an array of size n. Quick Sort averages O(n log n) comparisons. On a 50-element array, that is roughly 1,250 frames for Bubble Sort versus about 280 for Quick Sort.
How does Heap Sort work in this visualizer?
Heap Sort first builds a max-heap from the array using heapify operations on all non-leaf nodes (bottom-up). Then it repeatedly extracts the maximum element (root) by swapping it to the end and heapifying the reduced heap. Each swap and comparison is captured as a frame.
Can I pause the visualization mid-way?
You can click Reset at any point to immediately stop the animation and generate a new random array. The cancel mechanism uses a cancelRef flag that interrupts the frame playback loop before the next frame is displayed.
What is the difference between Insertion Sort and Selection Sort visually?
Insertion Sort picks the next element and shifts it left into its correct position among already-sorted elements — you see activity mainly at the boundary between sorted and unsorted regions. Selection Sort scans the entire unsorted portion to find the minimum, then swaps it to the front — you see the comparison marker sweeping the full unsorted range each pass.
Is this tool useful for technical interview preparation?
Yes. Watching the algorithms run side-by-side at the same array size and speed makes it easy to internalize time complexity differences. Seeing Merge Sort's even, parallel merge steps versus Selection Sort's inefficient full-scan comparisons reinforces algorithm analysis concepts that frequently appear in coding interviews.