About Quick Sort Visualizer
The Quick Sort Visualizer helps you understand how the Quick Sort algorithm works by showing every step visually.
Instead of just reading code, you can see how numbers move, compare, and get sorted in real time. Each element is represented as a bar, and colors help you track what is happening during sorting.
This tool is especially useful for:
- Students learning sorting algorithms
- Developers preparing for interviews
- Anyone who wants to understand Quick Sort visually
Key Features
- Step-by-step visualization of Quick Sort
- Run automatically or explore using step mode
- Clear color-coded elements (pivot, compare, smaller, larger, sorted)
- Adjustable speed control for animations
- Support for custom input and random data generation
- Real-time statistics (elements, partitions, comparisons, moves)
- Detailed execution log for every step
- Accurate representation of Quick Sort with real partitioning and recursion
How to Use the Visualizer
1. Add or Generate Data
- Enter your own numbers (comma or space separated), then click Load
- Or click Random to generate a dataset instantly
2. Start Visualization
- Click Run ▶️ to see the full sorting animation
- Click Step to move one step at a time (best for learning)
3. Control Speed
- Use the Speed slider to slow down or speed up the animation
4. Reset Anytime
- Click Reset to start over with the original array
Understanding Colors
- 🟡 Pivot – current reference element
- 🟠 Comparing – element being checked
- 🔵 Smaller – goes to left side
- 🟣 Larger – goes to right side
- 🟢 Sorted – final position
What is Quick Sort?
Quick Sort is a fast and efficient sorting algorithm that uses a technique called divide and conquer. Instead of sorting the whole array at once, it:
- Picks a pivot element
- Splits the array into two parts:
- Elements smaller than pivot → left side
- Elements greater than or equal to pivot → right side
- Repeats the same process on both sides
This continues until the entire array is sorted.
How Quick Sort Works
Let’s understand with a simple example:
Example Array - [8, 3, 1, 7, 0, 10, 2]
Step 1: Choose Pivot
Pick the last element → pivot = 2
Step 2: Partition the Array
Rearrange elements:
- Smaller than 2 →
[1, 0] - Pivot →
[2] - Larger than 2 →
[8, 3, 7, 10]
Now array becomes - [1, 0, 2, 8, 3, 7, 10]
Step 3: Sort Left Side [1, 0]
- Pivot = 0
- Result →
[0, 1]
Step 4: Sort Right Side [8, 3, 7, 10]
- Pivot = 10 →
[8, 3, 7, 10](already smaller) - Next pivot = 7 →
[3, 7, 8]
Final Sorted Array - [0, 1, 2, 3, 7, 8, 10]
FAQ
1 - What is the allowed size of the input array?
The array must contain between 2 and 60 elements, and all values should be positive integers only.
2 - What sorting algorithm does this visualizer use?
This visualizer uses Divide and Conquer sorting algorithm.
How it works -
- Divide: Choose a pivot and split the array
- Smaller elements go to the left
- Larger elements go to the right
- Conquer: Recursively sort both sides
- Combine: No separate step needed (sorting happens in-place)
3 - How should I start using the visualizer for the first time?
Start with Step mode so you can follow each operation one by one. This helps you clearly understand how the algorithm works.