Algorithm Visualizer

A Dissertation submitted
for the partial fulfillment of the degree of
Bachelor of Engineering in
Computer Engineering / Information Technology
(Session 2022 - 2023)

Guided By: Submitted By:

Pravin Karma Aayush Sharma (19I7001)
Samkit Jain (19I7057)
Twinkle Makhija (19C7168)

Department of Computer Engineering / Information Technology

Institute of Engineering & Technology
Devi Ahilya Vishwavidyalaya, Indore (M.P.)
([Link])

December 2022
 Dissertation Approval Sheet

The dissertation entitled “Algorithm Visualizer” submitted by Aayush Sharma,

Samkit Jain and Twinkle Makhija is approved as partial fulfillment for the award of
Bachelor of Engineering in Computer Engineering / Information
Technology degree by Devi Ahilya Vishwavidyalaya, Indore.

Internal Examiner External Examiner

Director
Institute of Engineering & Technology
Devi Ahilya Vishwavidyalaya,
Indore (M.P.)
 Recommendation

The dissertation entitled “Algorithm Visualizer” submitted by Aayush Sharma,

Samkit Jain, Twinkle Makhija is a satisfactory account of the bonafide work done
under my supervision is recommended towards the partial fulfillment for the award of
Bachelor of Engineering in Computer Engineering / Information Technology
degree by Devi Ahilya Vishwavidyalaya, Indore.

Date: Mr. Pravin Karma

Project Guide

Endorsed By

Head, Department of Computer Engineering

Endorsed By

Head, Department of Information Technology

 Candidate Declaration

We hereby declare that the work which is being presented in this project entitled
Algorithm Visualizer in partial fulfillment of degree of Bachelor of Engineering in
Computer Engineering / Information Technology is an authentic record of our own
work carried out under the supervision and guidance of Mr. Pravin Karma, Assistant
Professor in Department of Information Technology, Institute of Engineering and
Technology, Devi Ahilya Vishwavidyalaya, Indore.

We are fully responsible for the matter embodied in this project in case of any
discrepancy found in the project and the project has not been submitted for the award
of any other degree.

Date:

Place:

Aayush Sharma

Samkit Jain

Twinkle Makhija
 ACKNOWLEDGEMENTS

We’d like to acknowledge the assistance of our project guide Mr. Pravin Karma for
guiding us throughout the project and providing us relevant resources for the project.

We also like to acknowledge our HOD Dr. (Mrs.) Vrinda Tokekar for mentoring us in
the project and thanks to our Director Mr. Sanjiv Tokekar.
 ABSTRACT

An algorithm is an integral part of computers and programming. It provides

consistency in solving similar tasks with a predictable and desirable outcome.
Among algorithms, sorting algorithms are regarded as the gateway to the world of
algorithms in programming. As evident by their definition, they are used to sorting data
sets with similar properties.

There are various sorting algorithms to learn. People are more suited to acquire
concepts by watching them than by reading about them.
In this case, seeing the data move to its rightful spot as the result of an algorithm is
much easier to follow than looking at the source code and trying to figure out where the
data was supposed to go.

Advanced sorting algorithms like Quick Sort are not easy to grasp using text alone.
There must be animation to appeal to a wide spectrum of individuals utilizing various
technology media, and so it can be made in a web-based format instead of requiring the
user to install extra software or attempt to organize setups to use the tool.
It uses HTML5 (Hypertext Markup Text Language), JavaScript, and CSS for the
website's layout (Cascading Style Sheets).
The project focuses on various sorting algorithms that can be used to sort a set of
random numbers as a data set and visualize the sorting process using a web application.
TABLE OF CONTENTS Page No

Dissertation Approval Sheet i

Recommendation ii
Candidate Declaration iii
Acknowledgements iv
Abstract v

Chapter 1 - Introduction
1.1 Overview and issues involved 1
1.2 Problem Definition 1
1.3 Proposed Solution 1

Chapter 2 - Literature Survey

2.1 Methodology 2
2.2 Existing Solutions 3

Chapter 3 - Analysis & Design

3.1 Software Requirements 5
3.2 Hardware Requirements 5
3.3 Analysis Diagrams 6
3.4 Design Diagrams 8

Chapter 4 - Implementation and Testing

5.1 Database Design 10
5.2 Class diagram . 20

Chapter 5 - Conclusion 21
References 23
 Chapter-1 Introduction

1.1 Overview and issues involved

This Report is a reference to the Algorithm Visualizer :

Imagining the algorithm is a place where students can learn in an efficient and easy
manner. The issues that are discussed here in detail are the functionalities such as users
can improve their understanding by using the website.
Users can learn about various algorithms by watching their stepwise visualization.

1.2 Problem definition

Objective: To let everyone understand how sorting algorithms work.

Learning complex algorithms is generally hard and time consuming for students.
To make this process fast and efficient we thought of creating a user friendly software
using which people can easily learn about the working of algorithms with the help of
visualizations. The main problem was that often we fail to understand the core idea of a
particular algorithm maybe because we are unable to visualize how they work.

1.3 Proposed solution

The traditional way of learning the algorithms through written notes is thus replaced by
the visual aid via animation. The software also provides a user friendly interface which
helps the user to easily access it and interact with it. The interaction is made possible
through the dynamic implementation of the algorithms as working programs, which
would display animations on user defined input and thus show the steps accordingly.

Page 1
 Chapter-2 Literature Survey

2.1 Methodology

A single-page web application built using modern JavaScript technology that will
visualize the flow and logic of various sorting algorithms. The data array of the
selected size will be filled in with randomly generated unique values. The data set is
represented as a vertical bar with the height of their respective values. After the sorting
is started, the stepwise arrangement of data in ascending order based on their
value/height will be visualized in the UI.

Steps to be followed to achieve the objective.

● Make the user interface simple and easy to use.
● Run tests wherever possible during development.
● Cover all important algorithms and concepts.
● Provide time complexities and pseudo code.
● Visualization speed set and controlled by a user.
● Automate sample datasets generation.

Prerequisite Conceptual Terms / Concepts

● Brute Force :
In making an algorithm brute force means first idea or first approach towards
problem solving.
● Divide and Conquer :
In the Divide and Conquer approach, divide the problem size by a specific
number and then solve each part.
● Dynamic programming :
Dynamic programming stores the result for future use for better utilization.
● Algorithm :
Set of steps to be followed in order to solve a problem.
● Time Complexity :
Estimated time to run an algorithm.
Page 2
2.2 Existing Solutions

Some tools are available on the internet which cover famous algorithms. There are few
websites available on the internet which show the visualization of sorting algorithms
but most of them include just basic sorting algorithms.

A] [Link]
PROS :
● This website has a user interface which is responsive.
● Navigation steps are listed for a new user.
● Visualization is proper.

CONS :
● No speed control.
● Not all algorithms can be visualized.
● Limited features

B] [Link]
PROS :
● Sound Effects.
● Time complexities of algorithms are listed.

CONS :
● Proper visualization of graph traversal techniques is missing.
● Grid visualization could be better.

C] [Link]
PROS :
● The graph is shown using nodes and edges.
● Custom input sets can be given.

CONS :
● Sorting visualization features can be added.
● Grid visualization can also be included.

Page 3
Drawbacks of similar websites:-

Some drawbacks of some similar websites are :

● They lack UI (User experience) and are not very appealing to users.

● They lack some basic functionalities such as the absence of changing the size of
the sample set and changing the speed of visualization.

● No sound effects in some of them.

● Time complexities of all algorithms are not listed.

● The proper theory is not provided for someone who is learning the algorithm for
the first time.

Page 4
 Chapter-3 - Analysis & Testing

3.1 Software Requirements

● Microsoft Windows XP/Windows 7 Operating System

● Coding Language: JavaScript

● VS-Code Editor

● Tools Used: Visual Studio Code and Git

3.2 Hardware Requirements

● A system and web browser to run the web application.

● Internet connection To load the hosted Website.

Page 5
 3.3 Analysis Diagrams

3.3.1 Use Case Model

Figure 3.1 - Use Case Analysis

3.3.2 Use Case Description

● Actors:

Learner: Anyone with a will to learn and visualize algorithms can use the web
application

Page 6
● Use Cases:

User can set the size of input array within a range provided, set the speed of
animation according to their own understanding ability, select one algorithm
out of given five algorithms (Bubble Sort, Selection Sort, Insertion Sort,
Quick Sort, Merge Sort) which he/she wants to learn through visualization
and view the animation running to learn the concept quickly.

- Adjust Speed of Visualization

- Play Animation
- Change Data Size
- Choose Algorithm
- Randomize Data Set

View Big ‘O’ Estimate Chart: Time Complexity (Best, Average and Worst
Case) in terms of Big ‘O’ can be viewed, understood and compared for any
chosen algorithm.

- View Time and Space Complexities

- View Pseudocode
- View Definition

Page 7
 3.4 Design Diagram

Architecture Diagram

Figure 3.2 Architecture Diagram

The code is composed of HTML5, CSS, and JavaScript.

One of the advantages of HTML 5 is that it is not necessary to include different types
of web languages in a single file. Therefore, each type could have been separated,
making a total of three files (plus the miscellaneous sound and image files).

Page 8
This is good practice for readability and keeping related code together. However, we
decided not to separate the code for two reasons:

1) To increase the portability of the project by only needing to worry about one
project file instead of three.

2) Where in the project file, the change in coding languages is distinctly marked and
therefore does not significantly reduce readability.

Most websites have tools or scripts that require a server on the back-end (like PHP), but
it is not necessary in this case since JavaScript runs right in the user’s browser.

HTML5 and CSS are used for the interface.

The HTML5 communicates with the JavaScript code and vice versa to launch the
appropriate algorithms and update the interface accordingly, as seen with a single,
bidirectional arrow.

Page 9
 Chapter – 4 Implementation & Testing

First of all we have a basic Dashboard in which the user will have three options to
choose from :
1) Sorting Visualizer
2) Traversal Visualizer
3) Theory

This the the basic homepage which pops out whenever someone loads up the web
application.
He can choose any one option of these three. We implemented this inside the
[Link] file which contains the link to all these options.

 Sorting Visualizer
We implemented the sorting visualizer using the [Link] inside the components
folder. It contains the default state as through componentDidMount() react lifecycle
method.
Further in the architecture / hierarchy we have:

 [Link]

 [Link]
for(let j = 0 ; j < length-i-1 ; ++j) {
if(array[j] > array[j+1]) {
await swap(array, j, j+1);
[Link]([j, j+1, SWAP]);
}
else {
[Link]([j, j+1, !SWAP]);
}
}

 [Link]
for(let index = [Link](length/2)-1 ; index >= 0 ; --index) {
await heapify(moves, array, length, index);
}
for(let index = length-1 ; index >= 0 ; --index) {
[Link]([index, 0, SWAP]);
await swap(array, index, 0);
await heapify(moves, array, index, 0);
}
return moves;

 [Link]
for(let i = 0 ; i < length-1 ; ++i) {
let j = i;
while(j >= 0 && array[j] > array[j+1]) {
await swap(array, j, j+1);
[Link]([j, j+1, SWAP]);
--j;
}
}

Page 10
 [Link]
await divide(array, moves, 0, length-1);
return moves;

const divide = async(array, moves, start, end) => {

if(start < end) {
let mid = [Link]((end + start)/2);
await divide(array, moves, start, mid);
await divide(array, moves, mid+1, end);
await merge(array, moves, start, mid, end);
}
};

 [Link]
await divider(moves, array, 0, length-1);
return moves;

const divider = async(moves, array, start, end) => {

if(start < end) {
let pivot = await partition(moves, array, start, end);
await divider(moves, array, start, pivot-1);
await divider(moves, array, pivot+1, end);
}
};

 [Link]
for(let i = 0 ; i < length-1 ; ++i) {
let minIndex = i;
for(let j = i+1 ; j < length ; ++j) {
if(array[j] < array[minIndex]) {
minIndex = j;
}
[Link]([j, minIndex, !SWAP]);
}
await swap(array, i, minIndex);
[Link]([i, minIndex, SWAP]);
}
return moves;

 [Link]

 [Link]
Basically used to generate random blocks of different lengths to sort
let min = 1, max = 100;
for (let counter = 0; counter < length ; ++counter) {
let num = [Link]([Link]() * (max - min + 1) + min);
[Link]({key: parseInt(num), classType: 0});
}
return list;

 [Link]
Assigns unique key value to every block during the sorting

 [Link]
It basically swaps two blocks when they are of different size
let cache = array[index1];
array[index1] = array[index2];
array[index2] = cache;

Page 11
 Navbar-Features

 [Link]
We can manipulate the number of the blocks available for visualization using the size
block in Navbar. The number of blocks can vary from 10 to 60 in the multiples of 10
onChange = {(e) => [Link]([Link], "size")}>
{[Link](element => (
<option
key = {10*element}
value = {element}>
{element}
</option>
))}

 [Link]
We can also manipulate the speed of our visualization through Navbar from 1x to upto
10x.
<select
name="Algorithm" id="menu" className="speed-menu"
onChange = {(e) => [Link]([Link], "speed")}>
{[Link](element => (
<option
key = {element}
value = {element}>
{element}x
</option>
))}
</select>

 [Link]

We have defined states such as algorithms, lengths, and speeds and we are
calling different onclick event listeners to process the request of the learner.

 [Link]

We have eight different web pages under the theory part of the web
application in which the learner can visit the theory of the following
algorithms and can learn their pseudocodes,

 Bubble Sort
 Selection Sort
 Insertion Sort
 Heap Sort
 Quick Sort
 Merge Sort
Page 12
 Depth First Search
 Breadth First Search

Figure 4.1 - Default UI of Sorting Visualizer

Figure 4.2 - UI of an Theory page

Page13
 Traversal Visualization

A learner can also visualize traversal algorithms under the traversal section
in which he can choose an algorithm from dfs/bfs and can also choose grid
size from small/medium/large. We can also choose to populate the grid with
obstacles to visualize the algorithm in a better way.

Figure 4.3 - Default UI of Traversal Visualizer

Figure 4.4 - Traversal Grid with Obstacles

Page14
 Implementation of Grid Traversal with Obstacles using BFS in Grid
Visualizer Section

Figure 4.5 - BFS Traversal with Obstacles

 Implementation of Grid Traversal with Obstacles using DFS in Grid

Visualizer Section

Figure 4.6 - DFS with Obstacles

Page15
 Implementation of Grid Traversal without Obstacles using DFS in Grid
Visualizer Section

Figure 4.7 - DFS in Implementation

Figure 4.8 - DFS After Implementation

Page 16
 Implementation of Grid Traversal without Obstacles using BFS in Grid
Visualizer Section

Figure 4.9 - BFS in Implementation

Figure 4.10 - BFS After Implementation

Page 17
 Implementation of Merge Sort in Sorting Visualizer Section

Figure 4.11 - Sorting Visualizer at Start

Figure 4.12 - Sorting Visualizer in middle of sorting througn Merge Sort

Page 18
Figure 4.12 - A Fully Sorted Implementation of Sorting Visualizer

Page 19
Class diagram

Sorter Function - Consists of various sorting Algorithms

Sort Area - Consists of Start and Reload Buttons

Page 20
 Chapter – 5 Conclusion

 Project Goal :
The goal was to create a web application built using modern JavaScript technology that
will visualize the flow and logic of various algorithms.
There are various sorting algorithms to learn. People are more suited to acquire
concepts by watching them than by reading about them. In this case, seeing the data
move to its rightful spot as the result of an algorithm is much easier to follow than
looking at the source code and trying to figure out where the data was supposed to go.

 To help instructors illustrate algorithm operations in a lecture.

 To help students as they study and learn about fundamental algorithms in a
computer science course.
 To help instructors track down bugs in student programs during teaching hours.
 To help students learn about the basic operations of an abstract data type in a
computer science laboratory.
 Participants can be actively involved with the visualization by making them
construct their input data sets.
 To do an analysis of an algorithm behaviour and make predictions about the next
algorithm steps.

 The main functionalities implemented are :

1. Speed Control
Users can adjust speed as per understanding.

2. Dataset Generation
Randomized datasets can be generated for visualization.

3. Visualization
Learning becomes easy and self-paced.
Page 21

4. Colored Algorithm States

The Start, ongoing, and end states of an algorithm can be identified
by their color schemes.

5. Reset and Random Button

The reset button refreshes the entire page whereas using the random button
user can generate new datasets.

6. Grid Traversals
Implemented grid/maze traversals techniques based on breadth-first-search
and depth-first-search.

7. Size of Datasets
The dataset size can also be changed by the user as per need.

 Future Expansion:

1. Graph Traversals
Graph Algorithm visualization and traversal techniques can also
be added in future updates.

2. Tree Traversals
Tree Algorithms visualization and traversal techniques can also
be added in future updates.

 Our learning
1. Better visualization of sorting algorithms.
2. Understanding of Complex JavaScript Concepts.

Page 22

 Our Achievements
1. Helping students and teachers.
2. Making the learning process fun.
3. Developing and Hosting the website.

 Limitations
1. Can only take finite datasets.
2. Can only have a finite number of speeds.

REFRENCES.

[1][Link]

[2] Bubble-sort with Hungarian (“Cs∩ang∩o”) Folk Dance. YouTube, Sapientia

University

[3] Bubble Sort : [Link]

[4] Selection Sort : [Link]

[5] Insertion Sort : [Link]

[6] Merge Sort : [Link]

[7] Breadth First Search : [Link]

[8] Depth First Search : [Link]

Page 23