View this project at Sorting Algorithm Visualization
The Sorting Algorithm Visualizer is a Web app created with React,Javascript,CSS and HTML to display a range of popular sorting algorithms in real time. The current version of the app contains 4 sorting algorithms which are Quicksort, Heapsort, MergeSort and Bubble Sort. The app uses an array filled with random integer values ranging from 0 - 850 and can have a max size between 5 - 200. The Visualizer also has 3 different speeds at which to sort at and the sizes of each integer bar will resize with the appropriate choosen size of the array.
-
Open up Sorting Algorithm Visualization
-
Get started by choosing a array size using the slider
-
Choose which sorting algorithm would you like to see from the 4 options
-
Click "Sort Array" to view the array being sorted
-
If you would like to try a diffrent algorithm, but still maintain the same size, click "Generate List"
Here are listed future plans for this project and will completed soon.
- Implement QuickSort
- Implement HeapSort
- Implement MergeSort
- Implement Bubble Sort
- Implement Algorithm Comparison
- Implement Insertion Sort
- Implement Selection Sort
- Implement Time Complexities
Recently, I have been learning more about data algorithms and I wanted to create a graph visualizer so that I could learn more about path finding algorithms. But, with no experience in building web applications, I thought it would have been very difficult as a first project. I then decided on building something similar and finally chose a sorting algorithm visualizer as it seemed fun and I would be learning more about best/worse cases of popular sorting algorithms. I was mostly inspired from videos such as this as I found it very enjoyable to watch each index being swaped in real time. I also wanted to learn JavaScript, CSS and React and this project seemed like a great learning experience.
If you have any question or concerns regards this project please feel free to email me at prashant.mistry@ryerson.ca