A MINI PROJECT REPORT

ON

ALGORITHM VISUALIZER

Submitted in partial fulfillment of requirements for the award of 6th Sem of

BACHELOR OF ENGINEERING IN
ELECTRONICS AND COMMUNICATION ENGINEERING

Submitted By:
SAKSHI S GANIGA
1MJ20CS185

Under the Guidance of

Prof. David
Assistant Professor, Department of ECE

DEPARTMENT OF ELECTRONICS AND COMMUNICATION ENGINEERING

MVJ COLLEGE OF ENGINEERING
BANGALORE-67
ACADEMIC YEAR 2023-24
 MVJ COLLEGE OF ENGINEERING
Near ITPB, Whitefield, Bangalore-67

DEPARTMENT OF ELECTRONICS AND COMMUNICATION

ENGINEERING

CERTIFICATE
This is to certify that the mini- project work, entitled “ALGORITHM VISUALIZER” is
a bonafide work carried out by SAKSHI S GANIGA(1MJ20CS185) in partial
fulfillment for the award of degree of Bachelor of Engineering in Computer Science &
Engineering during the academic year 2022-23. It is certified that all the
corrections/suggestions indicated for Internal Assessment have been incorporated in the
Report. The mini project report has been approved as it satisfies the academic
requirements.

Signature of the Guide Signature of the HOD

Prof. David Dr. Sajithra Varun
Assistant Professor, Dept of ECE

Name of examiners: Signature with

date: 1.
2.
 MVJ COLLEGE OF ENGINEERING
Whitefield, Near ITPB, Bangalore-67

DEPARTMENT OF ELECTRONICS AND COMMUNICATION ENGINEERING

DECLARATION
I, SAKSHI S GANIGA hereby declare that the entire work titled “ALGORITHM
VISUALIZER” embodied in this mini project report has been carried out by me during
the 6th semester of BE degree at MVJCE, Bangalore under the esteemed guidance of Prof.
David, Assistant Prof, Dept. of ECE, MVJCE. The work embodied in this dissertation
work is original and it has not been submitted in part or full for any other degree in any
University.

SAKSHI S GANIGA
1MJ20CS185

Place:

Date:
 ABSTRACT

Algorithms Visualizations contribute to improve computer science education. The method of teaching and
learning algorithms is commonly complex job. Visualization is a helpful technique for learning in any
engineering course or any other department of education. In this report, an e-learning tool for Sorting and
Searching Algorithms is described. For example, in sorting the animation tool would represent information as
a bar and once choosing a data-ordering and algorithms, the user will run an automatic animation or step
through it at their own pace. In searching making the starting and the end node be able to move around or the
user to choose wherever he wants it to start or end. The e-learning tool developed using react along with
JavaScript, CSS and HTML permits visualizing algorithms and their rules. It’s mean to be used as a
supplement to face-to- face instruction or as a complete application.

i
 ACKNOWLEDGMENT

I express my sincere gratitude to the Management of MVJ College of Engineering, Bangalore, for their
unwavering support and encouragement during our mini-project work.

I am thankful to Dr. Suresh Babu, Principal of MVJCE, Bengaluru, for his constant inspiration and for
providing the necessary facilities throughout the project.

My deep appreciation goes to Dr. Sajithra Varun, HOD of Electronics and Communication Engineering,
MVJCE, for her consistent support and provision of resources needed for the project.

I am also grateful to our guide, Prof. David, Assistant Professor, Dept. of ECE, MVJCE, for his
encouragement and invaluable guidance in the successful completion of the project.

I extend my thanks to all faculty members of our department for their cooperation and constructive feedback,
which significantly aided our project work.

Lastly, I thank my family and friends for their unwavering support and encouragement.

Thank you.
SAKSHI S GANIGA
 TABLE OF CONTENTS
Contents

ABSTRACT.................................................................................................................................................. 4

ACKNOWLEDGMENT.............................................................................................................................. 1

TABLE OF CONTENTS............................................................................................................................. 2

INTRODUCTION........................................................................................................................................ 4

CHAPTER 2 - LITERATURE SURVEY................................................................................................... 5

Introduction.................................................................................................................................................. 5
2.1 Environmental Chemistry of Arsenic............................................................................................... 5
2.2 Properties of Arsenic......................................................................................................................... 7
2.3 Consolidated Literature Review....................................................................................................... 7

CHAPTER 3 - PROBLEM ANALYSIS..................................................................................................... 8

CHAPTER 4 - PROPOSED SYSTEM....................................................................................................... 9

CHAPTER 5 - HW AND SW REQUIREMENTS................................................................................... 10

5.1 Hardware Requirements:.................................................................................................................... 10
5.2 Software Requirements:...................................................................................................................... 10

CHAPTER 6 - IMPLEMENTATION...................................................................................................... 10

CHAPTER 7 - RESULTS AND ANALYSIS........................................................................................... 13

CHAPTER 8 - CONCLUSION................................................................................................................. 15

CHAPTER 9 - FUTURE ASPECTS......................................................................................................... 16

REFERENCES........................................................................................................................................... 17
 INTRODUCTION

Nowadays sorting algorithms are widely used in computer software. For example, if you open
file explorer on your PC, you may see files sorted in different ways. Searching in sorted data is
more efficient than in not sorted ones. Students of computer science start learning different
algorithms in the first year of studies and sorting algorithms are among them.
Good Algorithmic Visualizers have the capability to bring algorithms to life by illustrating data
structures in natural, abstract ways and animating their various states. We are presenting a data
structure visualization tool designed to animate standard manipulations of several common data
structures.
The main objective of this visualization platform is to provide a means for learning the concepts
requiring abstract thinking in a more effective as well as enjoyable way which will engage the
learners and drive away any boredom. The purpose is to build a user-friendly interface where the
students can experiment and learn data structures. A system providing visualizations for some
basic geometric algorithms and widely used data structures such as array, stack, queue, tree,
heap, graph, etc. along with the animation of common operations associated with the data
structures, such as inserting an element into and deleting an element from array, stack, and
queue. The text of the project describes principles of the most known sorting algorithms which
are demonstrated in the computer program. It might be used as a source for learning algorithms
by students. Also, the program might be easily used as a demonstration by lecturers and tutors
during classes.
 CHAPTER 2 - LITERATURE SURVEY

Introduction

The name Arsenic is derived from the Greek word arsenikon, which means yellow orpiment.
Arsenic compound have been mined and used since ancient times. The extraction of the
element from arsenic compound was first reported by Albertus Magnus in 1250 A.D. Arsenic
ranks 20th in earth's crust, 14th in sea water and 12th in human body. Arsenic exhibit metallic as
well as non-metallic characteristics and corresponding chemical properties. Hence, it is called
metalloid.

2.1 Environmental Chemistry of Arsenic

Arsenic in its various chemical forms and oxidation states is released into the aquatic
environment by various process and industrial discharges. On release to aquatic environment,
the arsenic species enter into methylation / demethylation cycle, while some are bound to the
sediments or taken up by biota where, they could undergo metabolic conversion to other
organo-arsenicals. Arsenic generally exists in the inorganic form in water samples. Under
different redox conditions arsenic is stable in the +5, +3, -3, and 0 oxidation states. The
pentavalent (+5) arsenic or arsenate species include AsO 43-, and H2AsO4-. The trivalent (+3)
arsenic or arsenide species include As(OH) 4-, AsO2(OH)2-, and AsO33-. The pentavalent arsenic
s p e c i e s a r e predominant and stable in the oxygen-rich aerobic
environment, whereas the trivalent arsenic species are predominant in the moderately reducing anaerobic
environment such as groundwater (Ghosh and Yuon, 1987). The stability and predominance of different
arsenic species in the aquatic environment at different pH ranges is shown in Table 2.1 (Gupta and Chen,
1987). As0 and As3- are rare in aquatic environments. Methylated or organic arsenic occurs at concentration
less than 1 ppb, and is not of major significance in drinking water treatment (Edwards, 1994)

2.2 Properties of Arsenic

Arsenic is a chemical element in the Nitrogen family, existing in both yellow and grey crystalline forms.
Although some forms of the Arsenic are metal-like, it is best classified as metalloid and non-metal. Some of
the significant properties of Arsenic are listed in Table 2.2.

2.3 Consolidated Literature Review

Arsenic is a chemical element in the Nitrogen family, existing in both yellow and grey crystalline forms.
Although some forms of the Arsenic are metal-like, it is best classified as metalloid and non-metal.
 CHAPTER 3 - PROBLEM ANALYSIS

One of the most common problems in computer science education is the way to explain and
communicate non-material terms and conditions. As a result, the complexity increases when the
concept is not visible, as it is fundamental in computer science, such as algorithms.
Many students complain it being difficult to remember the various algorithms in data structures
since abstract thinking is required in order to comprehend it and grasp the concept. One way for
improving instruction in this area is to include algorithm and data structure visualizations in the
form of animations. A visualization tool of data structures like arrays, stacks, queues, linked
lists, trees, and graphs is necessary for students to experiment with thus, allowing students to see
the actual process of an element being inserted into or deleted from different data structures,
how a tree is traversed in different orders (pre-order, in-order, post-order, level-order) etc.
Understanding complex algorithms just by looking at the code is basically a tedious task. Data
Structures rely heavily on algorithms, making visualization essential. Memorizing algorithms
without practical understanding is not practical. Abstract thinking is necessary to form a
conceptual model of algorithms in our minds. A tool for visualizing data structure algorithms
interactively is necessary for students to experiment and learn effectively. There exists a huge
gap between the theory-based education and the practical study of the algorithms
 CHAPTER 4 - PROPOSED SYSTEM

In the proposed system, the user can select whichever model or algorithm he/she wants to study.
On its selection according to the algorithm, a graph or its visual representation will be generated.
For Searching algorithm, the user can create or customize the wall as per their requirements. For
sorting algorithm, the number of arrays can be set by the user. On starting the animation, a
systematic and detailed animation will be shown so as to how the algorithm works for a better
understanding. The animation speed can be controlled according to the user’s pace. In case of
any confusion the user can use the details option provided to learn the basic theoretical details of
the algorithm. After learning, the user can also test their knowledge by trying to predict the
working before playing the animation.

ADVANTAGES OF PROPOSED SYSTEM:

The proposed system enables the user to customize the visualization ground according to their
requirement. The system makes use of graph generating algorithm for the system to provide a
better educational experience and to give users the ability to test themselves on the same
algorithm multiple times, it is necessary to use randomly generated graphs. It changes the values
and randomly generates different graphs every time the user refreshes the tab along with the
feature of customization in case the user does not want to use the random generated graph. In
case of any confusion the user can also make use of the detail tab provided where the theoretical
details of each algorithm are provided, such as the definition, working and a graphical example,
in order to help the students to understand better the working of algorithm
 CHAPTER 5 - HW AND SW REQUIREMENTS

Include one paragraph summarizing the HW/SW requirements

5.1 Hardware Requirements:

1. Processor: Pentium IV or Above
2. RAM: 2ttB or above
3. Hard Disk: 50ttB or Above
4. Input Device: Keyboard, Mouse
5. Output Devices: Monitor
6. Internet Connection: Required

5.2 Software Requirements:

1. Operating System: Windows 10
2. Frontend Design: HTML & CSS

3. Algorithms and Animation: JavaScript

4. Server hosting: NodeJS

5. Web hosting: Netlify

CHAPTER 6 - IMPLEMENTATION
Include one paragraph summarizing the HW/SW requirements

6.1 SYSTEM ARCHITECTURE:

 Fig 6.1 System Architecture

6.2 FLOW DIAGRAM:

. Fig 6.2 Flow Chart

The algorithm visualizer allows the user the select the visualizer according to their interest.
When the user selects the visualizer, the graph generating algorithm will generate the random
visualization ground. The user needs to select the type of algorithm they want to visualize. On
selection the visualization software created using JavaScript will fetch the appropriate action and
will enable the visualization of the algorithm using the CSS properties. Once the visualization is
completed the user can even reload and select another algorithm if he/she wants to learn other
algorithms.
 CHAPTER 7 - RESULTS AND ANALYSIS

Fig 7.1: Home Page

Home Page of the website shows the list of algorithms that the visualizer contain. The
user is allowed to select the algorithm of their choice for visualization. Once the user
selects the algorithm then the visualizer will lead them to the visualization ground of
that algorithm.
ALGORITHM VISUALIZER

SEARCHING VISUALIZER

Fig 7.2: Searching Visualizer

ALGORITHM VISUALIZER

CHAPTER 8 - CONCLUSION

As the main goal of this project, there was created the teaching support application which
visualizes the most known sorting and searching algorithms. The application allows stepping
forward and backward through each represented algorithm. User may run sorting on a random or
custom array. During the demonstration run, the application visualizes pseudo code and current
information about some variables. In searching the path between the start and the end node is
determined .
I tried to create high-quality software with a user-friendly and easy-to-use interface, which
could be used by lecturers, tutors, and students. Possible next improvement of the applications is
extension it by other algorithms.
This system is implemented for visualizing some of the sorting, searching algorithms. This is a
helpful tool for all kinds of students and tutors to easily understand the execution of algorithms.
For future enhancement we can include more algorithms of sorting, searching, and path-finding.
ALGORITHM VISUALIZER

CHAPTER 9 - FUTURE ASPECTS

The future of algorithm visualizers holds several exciting possibilities and potential
advancements. Here are some potential future aspects of algorithm visualizers:
1. Real-time Visualization: Algorithm visualizers could evolve to provide real-time
visualization, enabling learners and developers to observe the algorithm's execution as it
happens. This would offer a more dynamic and interactive learning experience, allowing for
immediate feedback and the ability to track algorithm behavior in real-world scenarios.

2. Virtual and Augmented Reality: Algorithm visualizers could leverage virtual and augmented
reality technologies to create immersive learning environments. Learners could step into virtual
worlds or overlay visualizations onto real-world objects, enhancing their understanding and
engagement with algorithms through a more interactive and immersive experience.

3. Machine Learning Visualizations: As machine learning algorithms continue to advance,

algorithm visualizers can play a crucial role in understanding and interpreting their inner
workings. Visualizations specific to machine learning algorithms can help users comprehend
complex models, visualize feature importance, observe decision boundaries, and gain insights
into the learning process.

4. Adaptive and Personalized Visualizations: Algorithm visualizers could adapt to individual

learners' needs and preferences. They could dynamically adjust the level of detail, pacing, and
visual representation based on the user's skill level, learning style, and specific areas of interest.
Personalized visualizations would enhance the effectiveness of algorithm learning and cater to
diverse learning profiles.
 ALGORITHM VISUALIZER

REFERENCES

[1] https://www.w3schools.com/w3css/w3css_web_javascript.asp

[2] https://www.geeksforgeeks.org/where-to-put-javascript-in-an-html-document

[3] https://www.brainkart.com/article/Algorithm-Visualization_8008/

[4] https://bost.ocks.org/mike/algorithms/

[5] https://dl.acm.org/doi/10.1145/1227504.1227366

[6] https://medium.com/codex/4-visualisers-to-learn-data-structures-and-algorithms-10x-faster-
5c46a7b01f6c

[7] https://www.irjmets.com/uploadedfiles/paper/issue_11_november_2022/31719/final/fin_irjmets
1669731512.pdf

[8] VisuAlgo: https://visualgo.net/

[9] "Algorithm Visualization: A Report on the State of the Field" by Paul E. Dunne and James R.
Cordy (2002) - https://dl.acm.org/doi/10.1145/568522.568526

[10] “Boundary iterative-deepening depth-first search (BIDDFS) algorithm visualizer.” By Kai Li

Lim & Lee Seng Yeon. (May 2013)
[11] “Critical Analysis on Algorithm Visualization Study” by Ahmad Supli, Syamsul Bahrin Zaibon,
Norshuhada Shiratuddin (September 2016)
[12] “A Literature Review on Algorithm Visualizers” by Sweta Bansal, Karan Kohli, Krishna Kumar
Vishwakarma, Kush Gupta. (2020)
[13] “Path Finding Algorithm Visualization for Acropolis Institute of Technology and Research” by
Albin Thomas, Ashutosh Singh Yadav, Ayush Soni, Chaman Mandloi, Pir Mohammad. (2020)
[14] “Review paper on Algorithm Visualizer from International Research Journal of Modernization
in engineering technology and sciences” by Rohit L. Ugile, Ritesh B. Barure, Gajanan S.
Sawant, Prof. Laxmi Kant Malphedwar. (November 2022)