Yyassin / SortingVisualizer

A website for visualizing common sorting algorithms.

Sorting Visualizer

Sorting Visualizer is a website that allows for the visualization of common sorting algorithms. The algorithms are applied to randomly generated arrays that are represented graphically. The manipulation of stored data is animated with the aid of color-coding. Visit the live site here.
Inspired by: Clément Mihailescu

Minimum Requirements:

• Windows 7 or later
• Node.js >12
• Yarn >1.2x

Running Project

You will first need to clone the repository to your local machine:

git clone https://github.com/Yyassin/SortingVisualizer

• Install Node js version 12.x or later.

• Install Yarn version 1.2x or later.

• Navigate to the appropriate directory from terminal:

cd ~/SortingVisualizer

• Install the required dependencies in the root folder with npm:

npm i

• Run the main client file with yarn:

yarn start

• Enjoy! 🎉

Features

• Visualize the implementation of 6 common sorting algorithms on randomly generated arrays:

  • bubble sort
  • insertion sort
  • selection sort
  • quick sort
  • merge sort
  • heap sort

• Visualization is achieved by dynamically swapping elements and color-coding algorithm stages.

• Change the speed at which animations are applied with a slider.

• Change the number of data points being considered (note: limits vary by platform).