A Sorting Algorithm Visualizer built using HTML, CSS, and JavaScript.
This project demonstrates how various sorting algorithms work by visualizing the sorting process in real-time with animated bars.
It includes dark mode, customizable bar colors, speed control, and swap count tracking.
- 🎨 Beautiful UI with Light/Dark Mode toggle.
- 🔄 Sorting Algorithms Supported:
- 🟢 Bubble Sort
- 🟡 Selection Sort
- 🔵 Insertion Sort
- 🟣 Merge Sort
- 🔴 Quick Sort
- 🎚️ Adjustable animation speed.
- 🎨 Customizable bar colors.
- 🔢 Swap counter to track operations.
- 🔀 Generate a new random array instantly.
- 📱 Fully responsive design.
- HTML5 → Structure
- CSS3 → Styling & Dark Mode
- JavaScript (ES6) → Sorting algorithms, animations, and interactivity
git clone https://github.com/<your-username>/sorting-visualizer.gitcd sorting-visualizerJust open the index.html file in any modern browser.Sorting Algorithms Visualized
| Algorithm | Time Complexity | Space Complexity | Stability | Visualization |
|---|---|---|---|---|
| Bubble Sort | O(n²) | O(1) | ✅ Stable | ✅ |
| Selection Sort | O(n²) | O(1) | ❌ Unstable | ✅ |
| Insertion Sort | O(n²) | O(1) | ✅ Stable | ✅ |
| Merge Sort | O(n log n) | O(n) | ✅ Stable | ✅ |
| Quick Sort | O(n log n) | O(log n) | ❌ Unstable | ✅ |
-
Each bar represents an array element.
-
Bar height corresponds to the value.
-
Swaps are animated to visualize the sorting process.
Control Description
- 🎨 Bar Color Picker Change the color of bars dynamically
- ⏱ Speed Slider Adjust animation speed
- 🔄 Generate Array Create a new random dataset
- 🔀 Sorting Buttons Choose between 5 sorting algorithms
- 🌙 Dark Mode Toggle between light & dark themes
- 🔢 Swap Counter Shows the number of swaps performed
sorting-visualizer/
├── index.html # Main HTML file
├── README.md # Project documentation (Since CSS & JS are embedded in the HTML file.)
✅ Add Heap Sort & Counting Sort
✅ Add Sound effects for swaps 🎵
✅ Deploy live demo on GitHub Pages
✅ Improve mobile responsiveness
Contributions, issues, and feature requests are welcome! Feel free to fork the repository and submit a pull request.
This project is licensed under the MIT License — you are free to use, modify, and distribute it.
Kinza Afzal 📧 kinzaafzal07122004@gmail.com
🌐 GitHub Profile: kinza7124
If you like this project, don’t forget to star the repository ⭐ on GitHub!