Sorting Algorithm Visualizer

A web-based interactive visualizer for popular sorting algorithms, built with React and TypeScript.

Features

• Visualize and compare a variety of sorting algorithms:
  • Quadratic Sorts: Bubble Sort, Selection Sort, Insertion Sort, Gnome Sort, Cocktail Shaker Sort
  • Logarithmic/Linearithmic Sorts: Merge Sort, Quick Sort, Heap Sort, Shell Sort
  • Miscellaneous Sorts: Comb Sort, Bogo Sort
• Adjustable array size and value range
• Adjustable sorting speed
• Step-by-step visualization with color-coded bars:
  • Blue: Unsorted
  • Yellow: Comparing
  • Red: Swapping
  • Green: Sorted
• Sound feedback for comparisons and swaps (with mute/unmute)
• Dark mode toggle
• Responsive design

Usage

1. Website
   Visit the website at SortingAlgorithmVisualiserX) to use the visualizer directly.

Controls

• Min/Max Value: Set the minimum and maximum values for array elements.
• Array Size: Set the number of elements (up to 200).
• Algorithm: Select the sorting algorithm from the dropdown.
• Generate New Array: Create a new random array.
• Start Sorting / Pause: Start or pause the visualization.
• Speed: Adjust the animation speed.
• Mute/Unmute: Toggle sound effects.
• Dark Mode: Toggle between light and dark themes.

Notes

• Some algorithms (like Bogo Sort) are intentionally inefficient and should only be used for very small arrays.
• The visualizer is intended for educational and demonstration purposes.

License

MIT Licence