📊 Sorting Visualizer

An interactive web application that visualizes how different sorting algorithms work in real time using animations and dynamic bar representations.

Built using HTML, CSS, and JavaScript, this project helps in understanding the step-by-step execution of sorting algorithms through visual simulation.

• 🎨 Interactive UI with animated sorting visualization
• 📈 Dynamic array generation
• ⚡ Adjustable sorting speed
• 🔄 Generate random arrays instantly
• 📊 Visual comparison of sorting processes
• 🖱️ User-friendly controls

• Bubble Sort
• Selection Sort
• Insertion Sort
• Merge Sort
• Quick Sort

sorting-visualizer/
├── index.html
├── style.css
├── script.js
└── algorithms/
    ├── bubbleSort.js
    ├── selectionSort.js
    ├── insertionSort.js
    ├── mergeSort.js
    └── quickSort.js

1. Generate a random array
2. Select a sorting algorithm
3. Start visualization
4. Watch bars rearrange step-by-step as the algorithm sorts the array

• Each bar represents an array element
• Bar height corresponds to value size
• Colors indicate:
  • Comparing elements
  • Swapping elements
  • Sorted elements

This project was built to:

• Understand sorting algorithms visually
• Improve JavaScript DOM manipulation skills
• Practice asynchronous programming & animations
• Strengthen frontend development fundamentals

• Add Heap Sort & Radix Sort
• Add sound effects during sorting
• Display time & space complexity dynamically
• Add dark/light theme toggle
• Mobile responsiveness improvements

Simply open index.html in your browser.

Or use VS Code Live Server for a better development experience.

• DOM Manipulation
• Event Handling
• Async/Await
• CSS Transitions & Animations
• Algorithm Visualization

Ayush Jain

Frontend & Backend Developer passionate about building interactive and educational web applications.

⭐ If you found this project useful, consider giving it a star!