An interactive web-based application that visually demonstrates how different sorting algorithms work in real time. This project helps users understand the internal mechanics of sorting through dynamic animations and color-coded states.
-
📊 Visual representation of array elements as bars
-
🔄 Supports multiple sorting algorithms:
- Bubble Sort
- Selection Sort
- Insertion Sort
-
🎚️ Adjustable array size
-
⚡ Adjustable sorting speed
-
⏸️ Pause and resume functionality
-
🎨 Color-coded states:
- Yellow → Comparing
- Orange → Swapping
- Green → Sorted
- HTML5 – Structure of the application
- CSS3 – Styling and animations
- JavaScript (Vanilla JS) – Logic and DOM manipulation
-
A random array is generated and displayed as vertical bars.
-
Each bar’s height corresponds to the value of the array element.
-
When a sorting algorithm is selected:
- The algorithm runs step-by-step using asynchronous delays
- Bars are updated dynamically to reflect comparisons and swaps
- Colors indicate the current operation being performed
- Generate New Array → Creates a fresh random array
- Sorting Buttons → Start selected sorting algorithm
- Size Slider → Adjust number of elements
- Speed Slider → Control animation speed
- Pause/Resume → Control execution flow
| Algorithm | Best Case | Average Case | Worst Case |
|---|---|---|---|
| Bubble Sort | O(n) | O(n²) | O(n²) |
| Selection Sort | O(n²) | O(n²) | O(n²) |
| Insertion Sort | O(n) | O(n²) | O(n²) |
- Performance may degrade with very large arrays due to frequent DOM updates
- Currently supports only basic sorting algorithms
- Single-threaded execution
- Add advanced algorithms (Merge Sort, Quick Sort, Heap Sort)
- Use Canvas for better performance
- Add algorithm explanations and step counters
- Improve mobile responsiveness
Sorting-Visualizer/
│── index.html
│── style.css
│── script.js
This project demonstrates:
- Strong understanding of sorting algorithms
- DOM manipulation and event handling
- Asynchronous JavaScript (async/await)
- UI/UX design fundamentals
Sachin B.Tech Computer Science Student
Give it a star ⭐ and feel free to fork it!