Sorting Algorithm Visualizer

Interactive visualization of different sorting algorithms built with Next.js.

Features

• 6 Sorting Algorithms: Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, Quick Sort, and Heap Sort
• Step-by-step Animation: Watch algorithms work in real-time
• Interactive Controls: Customize array size and sorting speed
• Responsive Design: Works on desktop and mobile devices
• Algorithm Comparison: See complexity and performance differences
• Color-coded Visualization: Different colors for comparing, swapping, and sorted elements

Getting Started

Install dependencies

bun install
# or
npm install
# or
yarn install

Run the development server

npm run dev
# or
yarn dev
# or
bun run dev

1. Open sorting-visualized.onrender.com in your browser

How to Use

1. Select Algorithm: Choose from Bubble, Selection, Insertion, Merge, Quick, or Heap sort
2. Configure Array: Adjust array size using the slider (10-200 elements)
3. Set Speed: Control animation speed with the speed slider
4. Start Sorting: Click "Start Sorting" to begin visualization
5. Watch Animation: See how the algorithm sorts step by step
6. Randomize: Generate a new random array anytime

Sorting Algorithms

• Bubble Sort: O(n²) - Compares adjacent elements and swaps if needed
• Selection Sort: O(n²) - Finds minimum element and places it at the beginning
• Insertion Sort: O(n²) - Builds sorted array one element at a time
• Merge Sort: O(n log n) - Divides array and merges sorted halves
• Quick Sort: O(n log n) average - Partitions around pivot element
• Heap Sort: O(n log n) - Uses heap data structure to sort

Technologies Used

• Next.js 15
• React 19
• CSS3 with animations
• Responsive design
• Modern JavaScript (ES6+)

Project Structure

sorting-visualized/
├── src/
│   ├── components/
│   │   ├── Controls/
│   │   │   ├── AlgorithmSelector.js
│   │   │   ├── ArraySizeSlider.js
│   │   │   ├── SpeedSlider.js
│   │   │   ├── SortButton.js
│   │   │   ├── RandomizeButton.js
│   │   │   └── index.js
│   │   ├── SortingVisualizer.js
│   │   ├── ArrayDisplay.js
│   │   └── ConsoleSignature.js
│   ├── lib/
│   │   ├── algorithms/
│   │   │   ├── bubbleSort.js
│   │   │   ├── selectionSort.js
│   │   │   ├── insertionSort.js
│   │   │   ├── mergeSort.js
│   │   │   ├── quickSort.js
│   │   │   ├── heapSort.js
│   │   │   └── index.js
│   │   └── utils/
│   │       └── generateArray.js
│   ├── pages/
│   │   ├── _app.js
│   │   ├── _document.js
│   │   └── index.js
│   └── styles/
│       └── globals.css
├── public/
├── package.json
└── README.md

Algorithm Complexity

Algorithm	Best Case	Average Case	Worst Case	Space Complexity
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)

Contributing

1. Fork the repository
2. Create your 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 licensed under the MIT License - see the LICENSE file for details.

Author

Created with ❤️ for educational purposes

Acknowledgments

• Inspired by various sorting algorithm visualizations
• Built with modern web technologies
• Designed for learning and understanding sorting algorithms