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

Navigate to your project folder, then:

python -m http.server 5500

Then open:

http://localhost:5500

✅ 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:

http://localhost:5500

🖱 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.