|
| 1 | +# Sorting Algorithm Visualizer |
| 2 | + |
| 3 | +An interactive web-based application that visualizes how different sorting algorithms work in real-time. Built with React, TypeScript, and Tailwind CSS. |
| 4 | + |
| 5 | + |
| 6 | + |
| 7 | + |
| 8 | + |
| 9 | +## Features |
| 10 | + |
| 11 | +### 13 Sorting Algorithms Implemented |
| 12 | + |
| 13 | +#### Comparison-Based Sorts (10) |
| 14 | +- **Bubble Sort** - Simple comparison-based algorithm |
| 15 | +- **Selection Sort** - In-place comparison sorting |
| 16 | +- **Insertion Sort** - Builds sorted array one element at a time |
| 17 | +- **Cocktail Shaker Sort** - Bidirectional bubble sort variant |
| 18 | +- **Shell Sort** - Gap-based insertion sort improvement |
| 19 | +- **Comb Sort** - Improved bubble sort with shrinking gaps |
| 20 | +- **Gnome Sort** - Simple swap-based comparison sort |
| 21 | +- **Quick Sort** - Efficient divide-and-conquer with pivot selection |
| 22 | +- **Merge Sort** - Stable divide-and-conquer algorithm |
| 23 | +- **Heap Sort** - Comparison-based using binary heap |
| 24 | + |
| 25 | +#### Non-Comparison Sorts (3) |
| 26 | +- **Counting Sort** - Integer-based counting algorithm |
| 27 | +- **Radix Sort** - Digit-by-digit processing |
| 28 | +- **Bucket Sort** - Distribution-based sorting |
| 29 | + |
| 30 | +### Visualization Features |
| 31 | +- Real-time step-by-step animation |
| 32 | +- Color-coded states: |
| 33 | + - **Blue** - Default/Unsorted |
| 34 | + - **Yellow** - Being compared |
| 35 | + - **Red** - Being swapped |
| 36 | + - **Purple** - Pivot element (Quick Sort) / Non-comparison algorithm indicator |
| 37 | + - **Green** - Sorted |
| 38 | +- Adjustable array size (5-200 elements) |
| 39 | +- Variable speed control (1x-200x) |
| 40 | +- Fully functional Play/Pause/Resume controls |
| 41 | +- Statistics tracking (comparisons & swaps) |
| 42 | +- Categorized algorithm selection (Comparison vs Non-Comparison) |
| 43 | + |
| 44 | +### Educational Content |
| 45 | +- Comprehensive algorithm descriptions |
| 46 | +- Time complexity analysis (Best, Average, Worst) |
| 47 | +- Space complexity information |
| 48 | +- Interactive learning experience |
| 49 | + |
| 50 | +## Getting Started |
| 51 | + |
| 52 | +### Prerequisites |
| 53 | +- Node.js (v18 or higher) |
| 54 | +- npm or yarn |
| 55 | + |
| 56 | +### Installation |
| 57 | + |
| 58 | +1. Clone the repository: |
| 59 | +```bash |
| 60 | +git clone <repository-url> |
| 61 | +cd sort-graph |
| 62 | +``` |
| 63 | + |
| 64 | +2. Install dependencies: |
| 65 | +```bash |
| 66 | +npm install |
| 67 | +``` |
| 68 | + |
| 69 | +3. Start the development server: |
| 70 | +```bash |
| 71 | +npm run dev |
| 72 | +``` |
| 73 | + |
| 74 | +4. Open your browser and navigate to: |
| 75 | +``` |
| 76 | +http://localhost:5173 |
| 77 | +``` |
| 78 | + |
| 79 | +### Build for Production |
| 80 | + |
| 81 | +```bash |
| 82 | +npm run build |
| 83 | +``` |
| 84 | + |
| 85 | +Preview the production build: |
| 86 | +```bash |
| 87 | +npm run preview |
| 88 | +``` |
| 89 | + |
| 90 | +## Project Structure |
| 91 | + |
| 92 | +``` |
| 93 | +sort-graph/ |
| 94 | +├── src/ |
| 95 | +│ ├── algorithms/ # 13 sorting algorithm implementations |
| 96 | +│ │ ├── bubbleSort.ts |
| 97 | +│ │ ├── selectionSort.ts |
| 98 | +│ │ ├── insertionSort.ts |
| 99 | +│ │ ├── cocktailSort.ts |
| 100 | +│ │ ├── shellSort.ts |
| 101 | +│ │ ├── combSort.ts |
| 102 | +│ │ ├── gnomeSort.ts |
| 103 | +│ │ ├── quickSort.ts |
| 104 | +│ │ ├── mergeSort.ts |
| 105 | +│ │ ├── heapSort.ts |
| 106 | +│ │ ├── countingSort.ts |
| 107 | +│ │ ├── radixSort.ts |
| 108 | +│ │ └── bucketSort.ts |
| 109 | +│ ├── components/ # React components |
| 110 | +│ │ ├── Visualizer.tsx # Main visualization component |
| 111 | +│ │ └── AlgorithmInfo.tsx # Algorithm information display |
| 112 | +│ ├── hooks/ |
| 113 | +│ │ └── useSortingVisualizer.ts # Custom hook for state management |
| 114 | +│ ├── types/ |
| 115 | +│ │ └── index.ts # TypeScript type definitions |
| 116 | +│ ├── utils/ |
| 117 | +│ │ └── algorithmInfo.ts # Algorithm metadata |
| 118 | +│ ├── App.tsx # Main application component |
| 119 | +│ ├── main.tsx # Application entry point |
| 120 | +│ └── index.css # Global styles |
| 121 | +├── package.json |
| 122 | +├── tsconfig.json |
| 123 | +├── vite.config.ts |
| 124 | +└── postcss.config.js |
| 125 | +``` |
| 126 | + |
| 127 | +## How It Works |
| 128 | + |
| 129 | +### Generator Functions |
| 130 | +Each sorting algorithm is implemented as a JavaScript generator function that yields animation steps: |
| 131 | + |
| 132 | +```typescript |
| 133 | +export function* bubbleSort(array: number[]): Generator<SortStep> { |
| 134 | + // Algorithm implementation |
| 135 | + yield { |
| 136 | + array: [...arr], |
| 137 | + comparingIndices: [i, j], |
| 138 | + }; |
| 139 | + // More steps... |
| 140 | +} |
| 141 | +``` |
| 142 | + |
| 143 | +### Animation Loop |
| 144 | +The application uses `requestAnimationFrame` for smooth animations: |
| 145 | +- Each step from the generator is rendered at a controlled speed |
| 146 | +- State updates trigger re-renders of the visualization |
| 147 | +- Statistics are tracked and updated in real-time |
| 148 | + |
| 149 | +## Technologies Used |
| 150 | + |
| 151 | +- **React 19.2.0** - UI framework |
| 152 | +- **TypeScript 5.9.3** - Type safety |
| 153 | +- **Vite 7.1.10** - Build tool and dev server |
| 154 | +- **Tailwind CSS 4.1.14** - Styling |
| 155 | +- **@tailwindcss/postcss** - CSS processing |
| 156 | + |
| 157 | +## Usage |
| 158 | + |
| 159 | +1. **Select an Algorithm** - Choose from 13 different sorting algorithms (10 comparison-based, 3 non-comparison) |
| 160 | +2. **Adjust Array Size** - Use the slider to set array size (5-200 elements) |
| 161 | +3. **Set Speed** - Control animation speed (1x-200x) |
| 162 | +4. **Generate New Array** - Click "New Array" to randomize values |
| 163 | +5. **Start Sorting** - Press "Start" to begin the visualization |
| 164 | +6. **Pause/Resume** - Pause the animation at any time and resume exactly where you left off |
| 165 | +7. **Reset** - Generate a new array and reset statistics |
| 166 | + |
| 167 | +## Algorithm Complexities |
| 168 | + |
| 169 | +### Comparison-Based Sorts |
| 170 | + |
| 171 | +| Algorithm | Best | Average | Worst | Space | |
| 172 | +|------------------|------------|------------|------------|----------| |
| 173 | +| Bubble Sort | O(n) | O(n²) | O(n²) | O(1) | |
| 174 | +| Selection Sort | O(n²) | O(n²) | O(n²) | O(1) | |
| 175 | +| Insertion Sort | O(n) | O(n²) | O(n²) | O(1) | |
| 176 | +| Cocktail Sort | O(n) | O(n²) | O(n²) | O(1) | |
| 177 | +| Shell Sort | O(n log n) | O(n^1.5) | O(n²) | O(1) | |
| 178 | +| Comb Sort | O(n log n) | O(n²/2^p) | O(n²) | O(1) | |
| 179 | +| Gnome Sort | O(n) | O(n²) | O(n²) | O(1) | |
| 180 | +| Quick Sort | O(n log n) | O(n log n) | O(n²) | O(log n) | |
| 181 | +| Merge Sort | O(n log n) | O(n log n) | O(n log n) | O(n) | |
| 182 | +| Heap Sort | O(n log n) | O(n log n) | O(n log n) | O(1) | |
| 183 | + |
| 184 | +### Non-Comparison Sorts |
| 185 | + |
| 186 | +| Algorithm | Best | Average | Worst | Space | |
| 187 | +|---------------|------------|------------|------------|----------| |
| 188 | +| Counting Sort | O(n + k) | O(n + k) | O(n + k) | O(k) | |
| 189 | +| Radix Sort | O(d·n) | O(d·n) | O(d·n) | O(n + k) | |
| 190 | +| Bucket Sort | O(n + k) | O(n + k) | O(n²) | O(n + k) | |
| 191 | + |
| 192 | +*Where n = number of elements, k = range of input, d = number of digits* |
| 193 | + |
| 194 | +## Future Enhancements |
| 195 | + |
| 196 | +- [ ] Custom array input |
| 197 | +- [ ] Step-by-step mode with next/previous buttons |
| 198 | +- [ ] Export visualization as GIF/video |
| 199 | +- [ ] Sound effects synchronized with operations |
| 200 | +- [ ] Mobile-responsive design improvements |
| 201 | +- [ ] Dark/Light theme toggle |
| 202 | +- [ ] Comparison mode (run two algorithms side-by-side) |
| 203 | +- [ ] Performance benchmarking |
| 204 | + |
| 205 | +## Contributing |
| 206 | + |
| 207 | +Contributions are welcome! Please feel free to submit a Pull Request. |
| 208 | + |
| 209 | +## License |
| 210 | + |
| 211 | +This project is open source and available under the MIT License. |
| 212 | + |
| 213 | +## Acknowledgments |
| 214 | + |
| 215 | +- Inspired by visualizations from VisuAlgo and Sorting Visualizer projects |
| 216 | +- Built as an educational tool for learning sorting algorithms |
0 commit comments