Sorting Algorithm Visualizer

Inspiration

All three of our team members took the Algorithms & Computation class recently, and we thought that seeing how an algorithm works in a simulation makes it more intuitive and helps with our learning process. We also wanted to see how various sorting algorithms perform in terms of running time in a simulation, and whether they are consistent with what we expect from the big O run time analysis.

What it does

Our project visualizes four most commonly used sorting algorithms: MergeSort, QuickSort, BubbleSort, and HeapSort. User could run the program on a local machine and see how each algorithm works in action, and how elements are swapped in the array to get to the sorted array in the end. Our program also measures and displays the actual run-time of each sorting algorithm on the screen.

How we built it

We used Javascript, CSS, and the React framework.

Challenges we ran into

Our program has two major components for each sorting algorithm: one is the sorting algorithm itself, and the other is the visualization of the sorting process. For all of our algorithms, sorting of the array happens "in place", meaning that we are not creating any additional array to store the sorted numbers, but rather sorting the original array by swapping elements in that array. Visualization requires additional data structure, or memoization, to store the history of these swaps. Figuring out how to implement that was the first challenge we ran into.
We also ran in to some challenges debugging our program. Specifically, we had an issue that some algorithms work fine when we ran them separately, but fail to show the expected behavior when we ran all sorting algorithms simultaneously. Our team debugged the problem together on a video conference, and was able to fix the bug from testing the sorted array output and visualization output on console log. The problem was that we originally created shallow copies of the array, but for all algorithms to work simultaneously, they need to run on identical deep copies of the same array so they don't interfere with each other.

Accomplishments that we're proud of

Our team is relatively new to Javascript and React, and frontend work in general. We are proud that we are able to put together an aesthetically pleasant visualizer in a short period of time. We are also proud of our team work and our productivity during the hackathon!

What we learned

The run time of the sorting algorithms are indeed consistent with big O analysis and what we learned in class!
We have a better understanding of recursive algorithms, and Javascript / React.