Introduction
Based on a framework done by Clément Mihailescu, myself and a colleague, Tristan Graber, created a Sorting Algorithm Visualizer using JavaScript and React JS. This project acts as a learning tool that visualizes different sorting algorithms and how they look as they are sorted. Mihailescu implemented a visualization of Merge Sort using his framework. As such, Graber and I focused our work on implementing other sorting algorithms such as Quick Sort, Heap Sort, Bubble Sort, and Insertion Sort. The work done by Mihailescu is shown below. The link to his GitHub repo is here.
Graber and I spent a few months organizing our goals for this project and eventually landed on implementing Bubble Sort and Selection Sort.
Bubble Sort
Bubble Sort is an algorithm that sorts elements from least to greatest, where the least is on the left side and the greatest is on the right side. This algorithm first compares the first two sets of numbers (bars, in the visualization) by checking to see if the left number is greater than the right bar. If it is, then the bars are swapped. Then, the algorithm moves to the right one index and compares those two numbers. This process repeats until the greatest number is at the very right of the element set. Then, the algorithm goes back to the beginning of the element set and repeats the process up until the already sorted number at the very end of the element set. This repeats until all of the numbers are sorted and in the correct order.
Selection Sort
Selection Sort is a sorting algorithm that works at a similar speed to Bubble Sort. Selection Sort compares a single bar to every bar to the right of it, finding the smallest bar. Once the smallest is found, the comparison bar is swapped with the minimum bar, the index is increased, and the algorithm continues until it reaches the end of the set of bars. The idea behind Selection Sort is that after every sorting run, a new minimum value will be solidified at the front, and the remaining array of bars will be one bar shorter to search through.
The Application
The first image shows the main interface of the app, with a “Generate New Array” button alongside the two Sorting buttons. When the first button is pressed, a new, random set of bars shows up ready to be sorted. Depending on the Sorting button that is pressed, the second image shows the sort in progress. The sorting moves one bar at a time, showing how the algorithm works at its lowest level. After it is finished, the third image shows a fully sorted array of bars.