An interactive Sorting Algorithm Visualizer that demonstrates how different sorting algorithms work step by step.
Built with a focus on simplicity, clean UI, and educational value — this project helps users see what happens behind the code when arrays get sorted.
🔗 Try it now: https://krishnapschauhan.github.io/sorting-visualizer/
- 🎞️ Real-time animation for every sorting step
- ⚙️ Adjustable speed and array size
- 🔀 Generate new random arrays anytime
- 🌈 Color-coded comparisons and swaps
- 💻 Fully responsive and works in any browser
| Control | Description |
|---|---|
| 🎲 Randomize Array | Generates a new random array of bars to visualize sorting again. |
| 📊 Insertion Sort | Visualizes the insertion sort algorithm — builds the sorted array one element at a time. |
| 🔍 Selection Sort | Selects the smallest (or largest) element in each pass and places it in the correct position. |
| 💧 Bubble Sort | Repeatedly compares adjacent elements and swaps them if they are in the wrong order. |
| ⚡ Quick Sort | Uses the divide-and-conquer approach to partition the array and sort recursively. |
| 🧬 Merge Sort | Splits the array into halves, sorts each half, and merges them in order. |
| 📏 Change Size | Adjusts the number of bars (array size) in the visualization to make sorting more or less detailed. |
| Algorithm | Time Complexity (Avg) | Space Complexity | Stability |
|---|---|---|---|
| Bubble Sort | O(n²) | O(1) | ✅ |
| Selection Sort | O(n²) | O(1) | ❌ |
| Insertion Sort | O(n²) | O(1) | ✅ |
| Merge Sort | O(n log n) | O(n) | ✅ |
| Quick Sort | O(n log n) | O(log n) | ❌ |
(More algorithms can be added easily!)
- HTML5 → Structure
- CSS3 → Styling, layout, and animations
- JavaScript (ES6) → Sorting logic & visualization
- GitHub Pages → Deployment
- The array is represented as vertical bars.
- When you select an algorithm, each comparison and swap updates the colors and bar heights in real-time.
- Delays are controlled by the selected speed slider to visualize sorting more clearly.
# Clone the repository
git clone https://github.com/krishnapschauhan/sorting-visualizer.git
# Navigate into the project directory
cd sorting-visualizer