Sorting Algorithm Visualizer
This is a web-based Sorting Algorithm Visualizer built with HTML, CSS, and JavaScript (ES Modules). It supports multiple popular sorting algorithms with animations, color-coded bar movements, and interactive controls.
🚀 Features
Visualizes: Bubble, Selection, Insertion, Merge, Quick, and Heap Sort
Adjustable speed via slider
Manual or random array input
Stop sorting at any time
Colored animations:
🔵 Unsigned bars
🟧 Currently compared
🔴 Swapping
🟨 Pivot (Quick Sort)
🟩 Sorted bars
📁 Folder Structure
sorting-visualizer/ │ ├── index.html ├── style.css ├── main.js ├── utils.js └── algorithms/ ├── bubbleSort.js ├── selectionSort.js ├── insertionSort.js ├── mergeSort.js ├── quickSort.js └── heapSort.js
🧪 How to Run in Chrome (Important!)
Modern browsers block type="module" scripts over file://, so you must use a local server.
✅ Option 1: Using Python
python -m http.server 5500
Then open:
✅ Option 2: VS Code + Live Server
Open folder in VS Code
Install "Live Server" extension
Right-click index.html → Open with Live Server
✅ Option 3: Node.js http-server
npm install -g http-server http-server -p 5500
Then visit:
🖱 Controls
Choose Algorithm: Dropdown to select sorting type
Input Box: Enter custom numbers (comma separated)
Generate Array: Creates a new random or user-defined array
Sort: Starts the animation
Stop: Halts animation immediately
Speed Slider: Controls delay between steps (lower = faster)
✅ Compatibility
Works in Chrome, Firefox, Edge
Make sure JavaScript is enabled
Must be served via HTTP protocol (local server)
🙌 Credits
Made with ❤️ by Arvind using vanilla JavaScript and DOM manipulation.
📝 License
This project is free to use and modify for personal or educational purposes.