version 1.1.0

This is a Sorting visualizer is intended to provide the user with an interface where they can visualize various sorts. They are able to choose the size of the array they want to deal with which also correlates to the speed of the sort and the speed of the colours which are displayed to the screen. Can be accessed below :

Sorting Visualizer

This full-stack application that is written in React.js ( a JavaScript framework ) including ES6 syntax, with minimal ES5 usage and depends on the Node.js middleware ( greater than node version 9 atleast ).

It was deployed using GitHub pages, with yarn version 1.22.10 scripts indicated within the package.json file.

Bubble Sort
Heap Sort
Quick Sort
Merge Sort

Download Node.js: Node.js

Further information on React.js: React.js

The very first button Create New array will simply create a new array of random numbers when pressed according to the currently scaled slider size on the right.

This button will allow the user to change the size of the array that we are dealing with, which also changes the speed of the visualization of the colours that are rendered based on this size of the array automatically. When the size changes to more than 45, the sizes of the bars are not displayed

Below is a full model view of the UI provided with all the features displayed.

When a sort is selected, the colour of all the buttons change and they cannot be selected during the sort. If the sorting wants to be shut down, the page will need a refresh and UI will reset.

Once the sort is complete the buttons will change however, the user still cannot select another button as the current array is already sorted. They will need to press Create New Array. The user will be prompted by an error while trying to do so.

Feel free to contact me at my email : [email protected] for any further questions about the code itself and if there's any changes or suggestions feel free to leave those as well :). Thank you for taking a look