An interactive web application that visualizes various sorting algorithms in real-time. Watch how different algorithms sort data with animated visual representations.
-
Multiple Sorting Algorithms: Visualize different sorting algorithms including:
- Bubble Sort
- Quick Sort
- Merge Sort
- Insertion Sort
- Selection Sort
-
Adjustable Array Size: Change the number of elements to sort (10-1000)
-
Random Sample Generation: Generate new random arrays with one click
-
Real-time Visualization: Watch the sorting process step-by-step
-
Responsive Design: Works on desktop and mobile devices
-
Color-coded Animations: Different colors represent different stages of sorting
- React.js - Frontend framework
- JavaScript (ES6+) - Programming language
- HTML5 & CSS3 - Structure and styling
- Node.js & npm - Package management
- Clone the repository:
git clone https://github.com/aliminagar/sorting-algorithm-visualizer.git- Navigate to the project directory:
cd sorting-algorithm-visualizer- Install dependencies:
npm install- Start the development server:
npm start- Open http://localhost:3000 in your browser
- Select a sorting algorithm from the dropdown menu
- Adjust the array size using the number input (default: 500)
- Click "Generate Sample" to create a new random array
- Click "Sort" to watch the algorithm visualize the sorting process
- Experiment with different algorithms and array sizes to compare performance
This project helped me understand:
- How different sorting algorithms work under the hood
- Algorithm time complexity (O(n²), O(n log n), etc.)
- React component architecture and state management
- Asynchronous JavaScript and animation timing
- Breaking down complex problems into smaller components
- Add algorithm speed control (slow, medium, fast)
- Display time and space complexity information
- Add comparison counter to show number of comparisons
- Include more algorithms (Heap Sort, Radix Sort, etc.)
- Add dark/light theme toggle
- Show algorithm pseudocode during visualization
- Add sound effects for each comparison/swap
| Algorithm | Best Case | Average Case | Worst Case | Space Complexity |
|---|---|---|---|---|
| Bubble Sort | O(n) | O(n²) | O(n²) | O(1) |
| Quick Sort | O(n log n) | O(n log n) | O(n²) | O(log n) |
| Merge Sort | O(n log n) | O(n log n) | O(n log n) | O(n) |
| Insertion Sort | O(n) | O(n²) | O(n²) | O(1) |
| Selection Sort | O(n²) | O(n²) | O(n²) | O(1) |
Contributions are welcome! Feel free to:
- Fork the project
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Alireza Minagar
- GitHub: @aliminagar
- LinkedIn: Alireza Minagar
- Portfolio: alirezaminagar-md.netlify.app
- Thanks to the React community for excellent documentation
- Built as a learning project to deepen understanding of algorithms and data structures
⭐ If you found this project helpful, please consider giving it a star!