🎨 Sorting Algorithm Visualizer

An interactive web application that visualizes various sorting algorithms with real-time animations and statistics tracking. Built with vanilla JavaScript, HTML, and Tailwind CSS.

✨ Features

• 6 Sorting Algorithms: Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, Quick Sort, and Heap Sort
• Adjustable Array Size: Customize from 10 to 150 elements
• Speed Control: 5 speed levels from Very Slow to Very Fast
• Real-time Statistics: Track comparisons, array accesses, and execution time
• Visual Feedback: Color-coded animations showing comparisons, swaps, and sorted elements
• Dark Theme: Modern, eye-friendly interface with gradient effects
• Educational Info: Algorithm descriptions with time and space complexity

🎯 Demo

🚀 Getting Started

Prerequisites

No installation required! Just a modern web browser.

Running Locally

1. Clone the repository:

git clone https://github.com/7vignesh/sorting-visualizer.git

2. Navigate to the project directory:

cd sorting-visualizer

3. Open index.html in your browser:

# On Windows
start index.html

# On macOS
open index.html

# On Linux
xdg-open index.html

Or simply double-click the index.html file.

🎮 How to Use

1. Select Algorithm: Choose from 6 different sorting algorithms
2. Adjust Array Size: Use the slider to set the number of bars (10-150)
3. Set Speed: Control animation speed (1-5)
4. Generate Array: Click "Generate" to create a new random array
5. Start Sorting: Click "Sort" to begin visualization

🎨 Color Legend

• Purple/Pink: Unsorted elements
• Yellow: Elements being compared
• Red: Elements being swapped
• Blue: Pivot element (Quick Sort)
• Green: Sorted elements

📊 Algorithms Implemented

Algorithm	Time Complexity	Space Complexity
Bubble Sort	O(n²)	O(1)
Selection Sort	O(n²)	O(1)
Insertion Sort	O(n²)	O(1)
Merge Sort	O(n log n)	O(n)
Quick Sort	O(n log n) avg	O(log n)
Heap Sort	O(n log n)	O(1)

🛠️ Technologies Used

• HTML5: Structure
• CSS3: Styling with custom animations
• Tailwind CSS: Utility-first CSS framework
• JavaScript (ES6+): Logic and interactivity
• Async/Await: Smooth animations

📁 Project Structure

sorting-visualizer/
│
├── index.html          # Main HTML file
├── styles.css          # Custom CSS styles
├── script.js           # JavaScript logic
└── README.md           # Project documentation

🌟 Key Features Explained

Visual Feedback

Each sorting step is animated with color coding to help understand the algorithm's behavior in real-time.

Performance Tracking

Monitor algorithm efficiency with live statistics:

• Comparisons: Number of element comparisons
• Array Accesses: Total array read/write operations
• Time: Execution time in milliseconds

Responsive Design

Works seamlessly across different screen sizes and devices.

🤝 Contributing

Contributions are welcome! Feel free to:

1. Fork the project
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is open source and available under the MIT License.

👤 Author

Vignesh

• GitHub: @7vignesh

🙏 Acknowledgments

• Inspired by the need to understand sorting algorithms visually
• Built as a learning project to demonstrate algorithm knowledge
• Thanks to the open-source community

📧 Contact

For questions or feedback, feel free to reach out!

---

⭐ Star this repository if you found it helpful!