An interactive web application that visually demonstrates how classic sorting algorithms work using animated bar charts. Built as a learning tool for students, this visualizer allows users to understand sorting algorithms not only through animations but also with integrated theoretical explanations.
-
📂 Visualizes multiple sorting algorithms:
- Bubble Sort
- Selection Sort
- Insertion Sort
- Merge Sort
- Quick Sort
-
⏱ Adjustable animation speed via slider
-
↕ Array size control to customize number of bars
-
🔍 View real-time theory for each selected algorithm
-
🌐 Responsive design (works on mobile/tablet)
-
🎨 Classic, student-friendly color palette
| Technology | Purpose |
|---|---|
| HTML5 | Layout and structure |
| CSS3 | Styling and responsiveness |
| JavaScript | Core logic and animation |
| Modular JS | Separated files for algorithms/data |
sorting-visualizer/
├── index.html # Main UI layout
├── style.css # Responsive and styled UI
├── script.js # Entry JS with UI controls
├── algorithms/
│ ├── bubbleSort.js
│ ├── selectionSort.js
│ ├── insertionSort.js
│ ├── mergeSort.js
│ └── quickSort.js
├── data/
│ └── theory.js # Algorithm theory content
└── assets/ # (Optional) Icons/images
- Clone or download this repo
- Open
index.htmlin any modern browser - Select an algorithm from the dropdown
- Adjust array size and speed
- Click "Start Sorting" to see it in action!
This project was built as a learning platform to help students grasp how sorting algorithms work internally. The visual animations paired with theory make it ideal for:
- Beginners studying data structures
- Interview prep and algorithm reviews
- Academic demos or workshops
Prabhat Verma Computer Science Student | CSE'26
- Add more algorithms (Heap Sort, Radix Sort)
- Save session history
- Add complexity chart comparison
- Sound effects and dark mode support
Pull requests are welcome! If you spot a bug or want to enhance functionality, feel free to open an issue or contribute directly.