An interactive web application that visualizes various sorting algorithms in real-time. This educational tool helps users understand how different sorting algorithms work, compare their performance, and learn about their time and space complexities.
View the live application here
- Visual Representation: See sorting algorithms in action with animated visualizations
- Multiple Algorithms: Implementations of 6 popular sorting algorithms
- Real-time Stats: Track comparisons, swaps, and array accesses during algorithm execution
- Interactive Controls: Adjust array size and sorting speed
- Algorithm Information: View detailed information about each algorithm including time complexity, space complexity, and pseudocode
- Dark/Light Mode: Toggle between dark and light themes for comfortable viewing
- Responsive Design: Works on desktop and mobile devices
- Educational Tool: Perfect for students learning about algorithms and data structures
- Bubble Sort: O(n²) time complexity, O(1) space complexity
- Selection Sort: O(n²) time complexity, O(1) space complexity
- Insertion Sort: O(n²) time complexity, O(1) space complexity
- Merge Sort: O(n log n) time complexity, O(n) space complexity
- Quick Sort: O(n log n) time complexity, O(log n) space complexity
- Heap Sort: O(n log n) time complexity, O(1) space complexity
- React: Frontend library for building the user interface
- Vite: Next generation frontend tooling for faster development
- Tailwind CSS: Utility-first CSS framework for styling
- React Router: For navigation between pages
-
Clone the repository:
git clone https://github.com/Khushishah224/Types-of-Sorting-Algorithms.git cd sorting-visualizer -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and navigate to:
http://localhost:5173
- Generate Array: Click the "New Array" button to create a random array
- Select Algorithm: Choose a sorting algorithm from the dropdown menu
- Adjust Size: Use the slider to change the array size (10-100 elements)
- Adjust Speed: Use the slider to change the visualization speed
- Start Sorting: Click the "Start" button to begin the visualization
- Learn: Observe the sorting process and review the algorithm's pseudocode and complexity information
| Algorithm | Best Time | Average Time | Worst Time | Space |
|---|---|---|---|---|
| Bubble Sort | O(n) | O(n²) | O(n²) | O(1) |
| Selection Sort | O(n²) | O(n²) | O(n²) | O(1) |
| Insertion Sort | O(n) | O(n²) | O(n²) | O(1) |
| Merge Sort | O(n log n) | O(n log n) | O(n log n) | O(n) |
| Quick Sort | O(n log n) | O(n log n) | O(n²) | O(log n) |
| Heap Sort | O(n log n) | O(n log n) | O(n log n) | O(1) |
This project is designed as a learning tool for:
- Computer Science students studying algorithms
- Developers looking to understand sorting algorithms
- Educators teaching algorithm concepts
- Anyone curious about how sorting works
The visualizations make abstract concepts concrete and easier to understand.
sorting-visualizer/
├── public/
├── src/
│ ├── algorithms/ # Sorting algorithm implementations
│ ├── components/ # React components
│ ├── App.jsx # Main application component
│ ├── App.css # Application styles
│ ├── index.css # Global styles
│ └── main.jsx # Entry point
└── index.html # HTML template