The Sorting Algorithm Visualizer is a web application built using React 18, TypeScript, Redux and Material UI. It allows users to visualize various sorting algorithms in action, providing an interactive and educational experience. Inspired by Clément Mihailescu's insightful video, this project aims to demonstrate the mechanics and efficiency of different sorting algorithms.
The visualizer supports the following sorting algorithms:
- Bubble Sort
- Heap Sort
- Insertion Sort
- Merge Sort
- Shell Sort
- Selection Sort
- Quick Sort
Each algorithm is implemented and visualized to demonstrate its operation step by step, allowing users to gain a deeper understanding of how sorting algorithms work.
Users can interact with the visualizer by controlling the speed of the sorting process. They can observe how the algorithms manipulate the elements of the array in real-time, represented by bars, helping them grasp the concepts behind each sorting technique.
The visualizer tracks various sorting metrics such as iterations, comparisons, swaps, and shifts. Users can see these values change dynamically as the sorting algorithms operate on the input array. This feature enhances the educational aspect of the visualizer, providing insights into the inner workings of each algorithm.
Users have the option to adjust the delay for visualization speed. A smaller delay results in faster visualization, allowing users to choose the speed that best suits their preference or learning pace. This flexibility enables users to focus on specific aspects of the sorting process or observe the algorithms in action at different speeds.
The visualizer is designed to be responsive, ensuring a seamless user experience across various devices and screen sizes. Whether accessed on a desktop computer, tablet, or smartphone, users can easily engage with the sorting algorithms and visualize their behavior.
To use the Sorting Algorithm Visualizer, simply navigate to the application's URL in a web browser. Select the desired sorting algorithm from the available options and adjust the speed and size settings as desired. Click the "Visualize" button to initiate the sorting process, and observe the algorithm in action as it rearranges the elements of the input array.
To run the Sorting Algorithm Visualizer locally, follow these steps:
- Clone the repository to your local machine.
- Install the necessary dependencies using npm.
- Run the development server using
npm start. - Access the application in your web browser at the specified URL.