Sorting Algorithm Visualizer
Watch sorting algorithms in action with real-time animated bar charts and step-by-step controls.
About This Tool
The Sorting Algorithm Visualizer is a free, interactive browser-based tool that helps developers and students understand how different sorting algorithms work by watching them execute step by step on animated bar charts. Seeing the comparisons, swaps, and partitions happen in real time makes abstract algorithmic concepts concrete and intuitive.
This tool supports eight of the most important sorting algorithms: Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, Quick Sort, Heap Sort, Radix Sort, and Shell Sort. Each algorithm has detailed complexity information showing best-case, average-case, and worst-case time complexity as well as space complexity. You can also see whether each algorithm is stable (preserves the relative order of equal elements) and whether it sorts in-place (requires only O(1) extra memory).
The comparison mode lets you run two algorithms side by side on the same input data, making it easy to see why Quick Sort generally outperforms Bubble Sort, or how Merge Sort maintains consistent O(n log n) performance regardless of input order. You can choose from four data presets — random, nearly sorted, reversed, and few unique values — to observe how different input distributions affect each algorithm's performance. For a deeper dive into algorithmic complexity, check out the Big O Reference tool.
The visualizer highlights bars being compared in yellow, bars being swapped in red, pivot elements in purple, and elements that have reached their final sorted position in green. A real-time counter tracks the total number of comparisons and swaps performed, giving you a quantitative feel for each algorithm's efficiency. If you are studying tree-based data structures used in Heap Sort, our Binary Tree Visualizer provides complementary visualizations.
All processing happens entirely in your browser using requestAnimationFrame for smooth, jank-free animations. No data is sent to any server. Adjustable speed and array size sliders let you slow down complex algorithms for study or speed them up for a high-level overview. For a broader look at how arrays, trees, and heaps relate to sorting, explore the Data Structure Visualizer.
How to Use
- Select a sorting algorithm from the dropdown menu (e.g., Bubble Sort, Quick Sort).
- Choose a data preset — Random, Nearly Sorted, Reversed, or Few Unique — to control the initial array.
- Adjust the Size slider (10-100 elements) to set the number of bars in the visualization.
- Click Start to begin the animation. Yellow bars indicate comparisons, red bars indicate swaps, and green bars are in their final sorted position.
- Use Pause to freeze the animation, then Resume to continue, or click Step to advance one operation at a time.
- Adjust the Speed slider at any time to make the animation faster or slower.
- Enable Compare mode to run a second algorithm side by side on the same data and observe the difference in comparisons and swaps.
Popular Sorting Algorithm Topics
FAQ
Is my data safe when using this tool?
Yes. The sorting visualizer runs entirely in your browser. No data is transmitted to any server. The arrays are generated locally using JavaScript's Math.random() and all sorting operations happen on your device.
Which sorting algorithm is the fastest?
It depends on the input. For general-purpose sorting, Quick Sort and Merge Sort are the most efficient with O(n log n) average-case performance. Merge Sort guarantees O(n log n) in all cases, while Quick Sort can degrade to O(n squared) on pathological inputs. For nearly sorted data, Insertion Sort with O(n) best case is often the fastest. Radix Sort can outperform comparison-based algorithms when the range of values (k) is small relative to n.
What is the difference between stable and unstable sorting?
A stable sort preserves the relative order of elements with equal values. For example, if two elements have the same key, their original order is maintained in the output. Merge Sort, Bubble Sort, Insertion Sort, and Radix Sort are stable. Quick Sort, Heap Sort, Selection Sort, and Shell Sort are not stable by default.
What do the bar colors mean?
Blue bars are in their default unsorted state. Yellow bars are currently being compared. Red bars are being swapped. Purple bars indicate the pivot element (in Quick Sort). Green bars have reached their final sorted position.
Can I use this tool on mobile devices?
Yes. The visualizer is fully responsive. On smaller screens the bars automatically adjust their width. The comparison mode stacks vertically on mobile for better readability.
How does the comparison mode work?
When you enable Compare mode, both algorithms receive the same initial array and run simultaneously. Each side independently tracks its comparisons and swaps, so you can directly compare the efficiency of two algorithms on identical input data.
Why does Quick Sort sometimes perform poorly?
Quick Sort's worst case (O(n squared)) occurs when the pivot selection consistently picks the smallest or largest element, such as when sorting an already-sorted or reversed array with the last element as pivot. In practice, randomized pivot selection or median-of-three strategies avoid this. The visualizer uses the last element as pivot for clarity.
Related Tools
Big-O Reference
Interactive Big-O complexity reference with growth charts, algorithm database, and comparison tools. Visualize O(1) to O(n!) growth curves.
Binary Tree Visualizer
Visualize binary trees interactively with BST operations, traversal animations, balance checking, and AVL rotations.
Data Structure Visualizer
Visualize and interact with Stack, Queue, Linked List, Hash Table, and Heap data structures with step-by-step animations.
Graph Visualizer
Build directed and undirected graphs interactively and visualize BFS, DFS, Dijkstra, and topological sort algorithms step by step.