ALGORITHM
VISUALIZER
Team Members:
1. SIDDHARTH SINGH(181500710)
2. SURYANSHU GUPTA(181500740)
3. KAVYA SINGH(181500319)
4. SPARSH GUPTA(181500723)
5. HARSHIT JAISWAL(181500255)
What is Algorithm Visualizer
Algorithm-visualizer is a web app written in React.It consists of
sorting methods like Bubble, insertion, selection and quicksort
where the user can visualize different sorting algorithms .
Algorithms and data structures form one cornerstone of an
undergraduate computer science education. A technique for
improving in this critical area is to include algorithm and data
structure visualizations.
Reason for selecting the topic
Analysis and design of algorithms is a great challenge for
computer science student’s .We selected this project because we
were fascinated by sorting algorithms, and we wanted to visualize
them in action.This Project is a fully automatic visualization
system. Design principles and technical structure of the
visualization system as well as its practical implications and
educational benefits are presented and discussed.
Hardware & Software to be used:
Software: VS Code , Github ,Git Bash
Technologies: React , CSS, JavaScript, HTML
Hardware:
· RAM:- 4.00GB
· Processor:- Intel(R)Core(TM) i3-4005U CPU @ 1.70GHz
What is REACT?
React (also known as React.js or ReactJS) is an open-source, front
end, JavaScript library for building user interfaces or UI
components. React is a JavaScript library created by Facebook.
React can be used as a base in the development of single-page or
mobile applications.
Working:
In this working project the user can set the size of the unsorted
array (i.e 2 to 1000) as well as the time of delay in microseconds.
We have used different colours to make the user visualize different
algorithms.Initially the unsorted array is of green colour and the
comparison is depicted by yellow colour resulting the higher
order element is given purple colour.
Bubble Sort Algorithm
Bubble Sort is the simplest sorting algorithm that works by
repeatedly swapping the adjacent elements if they are in wrong
order
Worst and Average Case Time Complexity: O(n*n). Worst case
occurs when array is reverse sorted.
Best Case Time Complexity: O(n). Best case occurs when array
is already sorted.
BUBBLE
SORT
CODE
Insertion Sort Algorithm
Insertion sort is a simple sorting algorithm that works similar to
the way you sort playing cards in your hands. The array is virtually
split into a sorted and an unsorted part. Values from the unsorted
part are picked and placed at the correct position in the sorted part.
Worst and Average Case Time Complexity: O(n*n). Worst case
occurs when array is reverse sorted.
Best Case Time Complexity: O(n). Best case occurs when array
is already sorted.
INSERTION
SORT
CODE
Selection Sort Algorithm
The selection sort algorithm sorts an array by repeatedly finding
the minimum element (considering ascending order) from unsorted
part and putting it at the beginning
Time Complexity:O(n^2) for all cases.
SELECTION
SORT
CODE
Quick Sort Algorithm
QuickSort is a Divide and Conquer algorithm. It picks an element
as pivot and partitions the given array around the picked pivot
Best Case and Average case Time Complexity: O(nlog n).
Worst Case Time Complexity : O(n*n).
QUICK
SORT
CODE
GITHUB DEPLOYMENT
Since we have deployed our react app on github so we first we
have to add a homepage on package.json file and then install gh-
pages by using few commands. We have to deploy the site by
using npm run deploy then optionally we can configure the
domain with github pages
Commands used to deploy it on github
To publish it at https://myusername.github.io/my-app, run: npm install --
save gh-pages
Alternatively you may use yarn: yarn add gh-pages
Add the following scripts in your package.json:
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
What is Git Bash
Git Bash is an application for Microsoft Windows environments
which provides an emulation layer for a Git command line
experience. Bash is an acronym for Bourne Again Shell. A shell is
a terminal application used to interface with an operating system
through written commands.
To deploy our project we have also used the git bash software
THANK
YOU
