A modern, interactive web application that visualizes how various sorting algorithms work under the hood. Built purely with HTML, CSS, and Vanilla JavaScript, this tool demonstrates 8 different sorting algorithms with smooth animations, step-by-step execution, and educational insights. It features a sleek glassmorphic UI, dynamic time/space complexity metrics, and sound effects generated via the Web Audio API.
- 8 Sorting Algorithms: Bubble, Selection, Insertion, Merge, Quick, Heap, Counting, and Radix Sort.
- Interactive Controls: Adjust array size and animation speed on the fly.
- Playback System: Play, Pause, Resume, and Step-by-Step manual execution.
- Live Metrics: Real-time tracking of comparisons and array swaps/writes.
- Educational Insights: Dynamic display of Time and Space complexity for the selected algorithm.
- Special Visualizations: Includes a secondary array renderer to visualize the inner workings of Counting Sort.
- Audio Feedback: Synthesized sound effects that pitch-shift based on the values being compared or swapped.
- Modern UI: Dark/Light theme toggle, responsive design, and glassmorphism components.
- Zero Dependencies: Built entirely from scratch without external frameworks or libraries.
- HTML5 (Semantic structure)
- CSS3 (CSS Variables, Flexbox, Grid, Glassmorphism, Responsive Design)
- Vanilla JavaScript (ES6+, DOM Manipulation, Async/Await Animation Engine, Web Audio API)
Since this is a static web application, no installation or build steps are required.
- Clone the repository:
git clone https://github.com/yourusername/sorting-visualizer.git
- Open the project folder.
- Simply double-click
index.htmlto open it in your web browser. Alternatively, you can use an extension like VS Code Live Server for the best developer experience.
- Bubble Sort:
O(n²) - Selection Sort:
O(n²) - Insertion Sort:
O(n²) - Merge Sort:
O(n log n) - Quick Sort:
O(n log n)avg - Heap Sort:
O(n log n) - Counting Sort:
O(n + k) - Radix Sort:
O(nk)
Link -: https://sorting-algorithm-visualizer-02.netlify.app/