Skip to content

This is a React app that displays an array of bars along with different sorting algorithms, where they are visualized by various different colours

License

Notifications You must be signed in to change notification settings

Yoshi-islands/SortingVisualizer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

version 1.1.0

Purpose

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

Implemented Technologies

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.

Resources

Bubble Sort
Heap Sort
Quick Sort
Merge Sort

Download Node.js: Node.js

Further information on React.js: React.js

Features and Usage

Getting to know the navigation bar

Create New Array

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.

Change Array Size and Speed

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

NavBar

Full model view

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

Full display

The Sorting View

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.

SortingView

After The Sort

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.

AfterSorting

Contact

Feel free to contact me at my email : maazsyedbusiness@gmail.com 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

About

This is a React app that displays an array of bars along with different sorting algorithms, where they are visualized by various different colours

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published