Animated Algorithm Visualizer for Graph Based

2024 International Conference on Intelligent and Innovative Technologies in Computing, Electrical and Electronics (IITCEE) | 979-8-3503-0641-5/24/$31.00 ©2024 IEEE | DOI: 10.1109/IITCEE59897.2024.10467865

Algorithms and Recursive Programs Using Machine

Learning
S.Geetha, Shreyas K Manohar V
Professor, Computer Science and Engineering Computer Science and Engineering
Computer Science and Engineering BNM Institute of Technology BNM Institute of Technology
BNM Institute of Technology Bengaluru, India Bengaluru, India
Bengaluru, India
geethasfeb2023@gmail.com
Ankita Santosh Joshi Ashwini C S
Computer Science and Engineering Computer Science and Engineering
BNM Institute of Technology BNM Institute of Technology
Bengaluru, India Bengaluru, India

Abstract— Graph visualization algorithms present a graph algorithms. Because achieve this, we run a count of
significant challenge for students and researchers in tests in which we contrast the visualizer's performance with
computer science and information science. In order to that of alternative approaches to learning and teaching graph
improve understanding and motivation, we have developed a algorithms. The tests' findings will shed light on the
web-based tool that implements several graph visualization disadvantages and advantages of utilizing visualizations to
algorithms, including Dijkstra's algorithm, A* algorithm. teach and learn graph algorithms, and they will also help
This tool is built using HTML5, JavaScript, React, and CSS shape the creation of new visualizers and other educational
and is designed to be engaging and user-friendly. Our goal is tools in the future. Creating an animated algorithm visualizer
to provide a comprehensive overview of these algorithms and for graphs and recursive programs can be a complex task, but
to evaluate their performance on various datasets. By making it's definitely possible and can be a valuable tool for learning
the study of graph visualization more enjoyable and and understanding these concepts. Here in this paper, we
accessible, we hope to increase student motivation and provided in section II with our motivation to perform this
improve the learning experience with data structure work and further with back ground study in section III. We
algorithms. We also implemented our proposed approach also provided the steps to create a visualizer for various
with 97 % improvement with the existing algorithms. algorithms in section IV. Results in section V.

Keywords— Graph visualization algorithms, Dijkstra's II. MOTIVATION

algorithm, A* algorithm, Machine learning, Recursive programs. Algorithm visualizers can be a valuable tool for teaching
and learning about algorithms. They provide a more intuitive
I. INTRODUCTION and interactive way to understand how an algorithm works,
Graph visualization is a powerful tool for understanding which can be particularly helpful for students or beginners
and analyzing complex networks and relationships in a who are learning about algorithms for the first time.
variety of fields. In this research paper, we will focus on four Algorithm visualizers can be useful for debugging and
specific graph visualization algorithms: breadth first search optimizing algorithms. They allow users to see how the
(bfs), depth first search (dfs), Dijkstra's algorithm and A* algorithm is functioning and identify any issues or
algorithm. Algorithms are utilized in practice and have inefficiencies that may be causing problems. Algorithm
proven to be effective in a range of applications. Our goal in visualizers can be used to communicate complex algorithms
this paper is to provide a detailed overview on algorithms and and their results to a wider audience. By providing a visual
their performance on a variety of datasets. In addition, we representation of the algorithm and its outputs, visualizers
will discuss the challenges and the need for graph can easy the work of people who are not experts in the field
visualization. We believe that this research will be of the to understand and interpret the results. Algorithm visualizers
interest to researchers and also the practitioners working in can be used in research to help researchers understand and
computer science, data science, and related areas, to anyone analyze algorithms and their performance. Algorithms can be
interested in understanding the power and limitations of these used to test and compare different algorithms, or to identify
algorithms. Video games and industrial robots are the main patterns and trends in the data. Different authors proposed
applications of path finding algorithms. The usage of path with different tools for a visualizer like Python (with libraries
finding is most complex. Exploring difficult-to- like Pygame or Tkinter), JavaScript (using HTML5 Canvas),
reach/dangerous regions is an emerging, but intriguing, or even specialized visualization libraries like D3.js. By
application of path finding. The locations that are difficult for deciding on a programming language and framework we can
humans to get, to but which robots could profitably explore if implement our work.
they could avoid getting lost. This work aims to assess the
visualizer's usefulness as a learning and teaching tool for

979-8-3503-0641-5/24/$31.00 ©2024 IEEE

Authorized licensed use limited to: Zhejiang University. Downloaded on September 10,2024 at 04:12:51 UTC from IEEE Xplore. Restrictions apply.
 III. LITERATURE REVIEW IV. PROPOSED METHODOLOGY
Path finding algorithms are a class of algorithms that are To Design and implement an algorithm visualizer that
used to find a path between two points in a graph or other allows users to see how a variety of sorting algorithms work
discrete space. These algorithms are used in a wide range of in real- time. The visualizer should be able to handle different
applications, including computer games, robotics, and input sizes and types, and should provide a clear and intuitive
geographic information systems [1, 2]. There are many visual representation of the algorithm's steps and processes.
different path finding algorithms that have been developed The visualizer should also include features such as pause,
over the years, each with its own strengths and weaknesses resume, and step-by-step execution to allow users to control
[3]. Some of the most well-known algorithms include the speed and progress of the algorithm. In addition to this,
Dijkstra's algorithm [1], A* algorithm, and breadth-first the visualizer should also be able to handle the user input,
search [4]. These algorithms are characterized by their ability allowing users to specify the input data and parameters for
to find the shortest path between two points, either by the algorithm. The visualizer should be designed to be user-
minimizing the number of steps or the cost of traversing the friendly and easy to use, and should be able to run on a
path [5]. variety of devices and platforms.
The main objective of this project is to create a web
In recent years, there has been a growing interest in application as a visualization tool. A web application built
developing web-based tools for learning about path finding using modern JavaScript technology that will visualize the
algorithms [5]. These tools often use interactive flow and logic of various graph and recursive algorithms. The
visualizations and activities to make the learning process User Interface will contain options to select one of the graph
more engaging and enjoyable. Some examples of these tools algorithms or recursive algorithms which were implemented
include Maze Solver, Path finding Visualizer, and Graph and control buttons to start, pause, and navigate to previous
Playground. While these tools have proven to be effective in or next steps along with an option for understandable speed
improving understanding and motivation, there is still a need and color mode. The main objective of this project is to help
for further research and development in this area [4]. In programmers to be able to visualize the complex algorithms
particular, there is a need for tools that can handle more and get a better understanding of the underlying operations.
complex algorithms and larger datasets, as well as for Additional feature is that one can add fresh Algorithms and
techniques that can improve the aesthetics and interpretability visualization of their choice too. This paper is for educational
of the visualizations [4]. purpose. Extract the required feature and classify among
others. It requires the following procedures.
1. Graph Visualization:
To address these challenges, we have developed a web-
based tool that uses HTML5, React, JavaScript, and CSS to For graph visualization, our paper will need to
visualize the various path finding algorithms. Our tool allows represent the graph data structure and have a way to draw
users to experiment with different algorithms and scenarios, nodes and edges on the screen. Paper can use data
and to compare their performance on a variety of datasets. In structures like adjacency lists or matrices to represent
this paper, we will describe the design and implementation of graphs.
our tool and evaluate its effectiveness in improving 2. Animation Framework:
understanding and motivation.[6] We will also discuss the
challenges and opportunities for future research in the field of Choose a method for creating animations. This
graph visualization. Algorithm visualizers are tools that use could involve using timers or animation libraries that
visualizations to help understand algorithms. update the screen at a specific frame rate. For JavaScript,
request Animation Frame is commonly used.
[2] They are increasingly being used in educational
settings and other contexts to help students and others learn 3. Interactive Interface:
and retain algorithms more effectively. This literary survey Create an interactive interface where users can
provides a summary and review of the existing research and input graph data or recursive algorithms. This could
literature on algorithm visualizers. involve providing options to add nodes, edges, and select
Previous research has shown that visualizations can be algorithm inputs.
effective for teaching and learning algorithms. For example, 4. Algorithm Implementation:
studies have found that visualizations can help students better Implement the graph algorithms and recursive
understand complex algorithms, and can improve their programs paper want to visualize. For graph algorithms,
performance on tasks such as writing and debugging code. common choices are BFS, DFS, Dijkstra's algorithm, etc.
There are various types of visualizations that have been For recursive programs, select those that have a clear
used for algorithm visualization.[7] These include static visual representation, such as fractals or recursive sorting.
images, such as flowcharts and diagrams, which can provide Here, we focused with A* algorithm.
a high- level overview of an algorithm. Interactive 4.1 A* Search
animations, on the other hand, can provide a step-by-step
simulation of an algorithm, allowing the user to see how it A* (pronounced "A-star") is a popular path finding
works in real- time. Other approaches, such as code algorithm utilized to search the shortest path between two
animations and data visualizations, can also be used to help nodes in a graph. It is particularly effective in situations
understand algorithms.[8] where the cost of moving between nodes varies or when
the graph contains obstacles. The A* algorithm combines
elements of both Dijkstra's algorithm and a heuristic

Authorized licensed use limited to: Zhejiang University. Downloaded on September 10,2024 at 04:12:51 UTC from IEEE Xplore. Restrictions apply.
search, making it more efficient in finding the optimal progresses towards finding the optimal path. Visualization
path. Features: The A* algorithm visualization in the project
Algorithm description: The A* algorithm takes a provides a clear representation of the algorithm's
graph, a start node, and a goal node as input and returns execution. It highlights the nodes that are being explored,
the shortest path between the start and goal nodes. It uses a as well as the current best path from the start node to the
priority queue to prioritize the nodes to explore based on goal node. The visualization also displays the estimated
their estimated total cost from the start node to the goal cost and the actual cost of reaching each node, allowing
node. The algorithm maintains two lists, the open list and users to understand the evaluation process. Users can
the closed list. The open list contains the nodes that are yet interact with the visualization by adjusting the speed at
to be explored, while the closed list stores the nodes that which the algorithm runs, pausing and resuming the
have been visited. The algorithm continues to expand visualization, and observing the algorithm's step.
nodes from the open list until the goal node is reached or 4.2 Dijkstra's algorithm
the open list becomes empty. This can be provided below Dijkstra's algorithm is a popular graph traversal
with the following steps: algorithm that finds the shortest path between a source
1. Start with the start node and add it to the open list. vertex and all other vertices in a weighted graph. It
2. While the open list is not empty, select the node operates by iteratively selecting the vertex with the
with the lowest estimated cost (based on a heuristic) smallest tentative distance and updating the distances of its
from the open list. neighbouring vertices until all vertices have been visited.
Dijkstra's algorithm is widely used in various applications,
3. If the selected node is the goal node, the algorithm
including route planning, network routing, and resource
terminates and returns the shortest path.
allocation. Algorithm: The Dijkstra's algorithm takes a
4. Otherwise, expand the selected node by considering weighted graph and a source vertex as input and computes
its neighbouring nodes. the shortest path from the source vertex to all other
5. For each neighbour, calculate the cost to reach that vertices in the graph. It uses a priority queue (such as a
neighbour from the start node and the estimated cost to min-heap) to maintain the vertices with their tentative
reach the goal node. distances. The algorithm begins by initializing the
6. If the neighbour is not in the open list or the cost to distances of all vertices as infinity, except for the source
reach it is lower than the previously calculated cost, vertex which is set to 0. It then iteratively selects the
update its cost and set its parent to the selected node. vertex with the smallest tentative distance from the priority
queue, visits its neighbouring vertices, and updates their
7. Add the neighbour to the open list if it is not already distances if a shorter path is found. This process continues
present. until all vertices have been visited or the destination vertex
8. Move the selected node from the open list to the has been reached. The Dijkstra's algorithm can be
closed list. summarized as follows:
9. Repeat steps 2-8 until the goal node is reached or the 1. Initialize the distances of all vertices as infinity, except
open list is empty. for the source vertex which is set to 0.
Algorithm Description: The A* algorithm 2. Create a priority queue and enqueue the source vertex
combines the breadth-first search of Dijkstra's algorithm with its tentative distance.
with a heuristic evaluation based on an estimated cost to 3. While the priority queue is not empty:
reach the goal. It uses a priority queue to select the node
with the lowest total cost, which is the sum of the cost 4. Dequeue a vertex with the smallest tentative distance.
from the start node and the estimated cost to the goal node. 5. Visit the vertex.
By considering the estimated cost, the algorithm prioritizes 6. For each neighbouring vertex:
exploring paths that are likely to be shorter, leading to
7. Calculate the tentative distance from the source vertex
more efficient path finding. A* has a time complexity that
to the neighbouring vertex.
depends on the heuristic used, but in the worst case, it is
generally considered to have a time complexity of O(b^d), 8. If the tentative distance is smaller than the current
where b is the branching factor and d is the depth of the distance, update the distance.
optimal path. Algorithm Implementation: In our paper, A* 9. Enqueue the neighbouring vertex with its updated
algorithm was implemented using React and other modern tentative distance.
JavaScript technologies. The implementation involved 10. Repeat step 3 until the priority queue becomes empty
creating a function that takes the graph, start node, and or the destination vertex is reached.
goal node as input and returns the shortest path. The
Algorithm Description:
algorithm utilizes a priority queue data structure to
efficiently select the nodes to explore. The implementation Dijkstra's algorithm is a single-source shortest path
also incorporates heuristics to estimate the cost from the algorithm that finds the shortest paths from a given source
current node to the goal node, enabling the algorithm to vertex to all other vertices in a weighted graph. It utilizes a
make informed decisions on which nodes to explore next. greedy strategy by selecting the vertex with the smallest
The visualization of the algorithm's execution includes tentative distance at each step. Dijkstra's algorithm
highlighting the nodes being visited and the current best guarantees finding the shortest path as long as the graph
path, allowing users to observe how the algorithm does not contain negative-weight edges. The time

Authorized licensed use limited to: Zhejiang University. Downloaded on September 10,2024 at 04:12:51 UTC from IEEE Xplore. Restrictions apply.
complexity of Dijkstra's algorithm is O((V + E) log V), to the recursion tracking data structure. Highlight the
where V is the number of vertices and E is the number of corresponding part of the visualization (e.g., a sub graph or
edges in the graph. Algorithm Implementation: In the a section of the fractal) that corresponds to the current call.
project, Dijkstra's algorithm was implemented using React Delay and Animation is introduced between each recursive
and other modern JavaScript technologies. The call animation step. This helps users follow the process
implementation involved creating a function that takes the and prevents the animation from progressing too quickly.
weighted graph and the source vertex as input and Updating Variables show how variables are changing
performs Dijkstra's algorithm to compute the shortest within each recursive call. If the variables have a visual
paths. The implementation utilized a priority queue data representation, like counters or changing graph states,
structure to efficiently select the vertex with the smallest animate their changes step by step. Displaying Call Stack
tentative distance. The algorithm also maintained data is a procedure and displays the current recursion stack on
structures to track the distances, previous vertices, and the screen. This could be a visual representation of the
visited vertices during the computation. The visualization active calls, showing their order and parameters.
of the algorithm's execution displays the visited vertices,
the current shortest path tree, and the tentative distances
Animating Backtracking is a process when a
being updated.
recursive call starts to backtrack, animate the process by
Visualization Features: gradually removing the call from the visualization and
The Dijkstra's algorithm visualization in the project updating variables accordingly .User Controls were
provides a visual representation of the algorithm's provided to control for users to pause, play, step through,
execution. It highlights the vertices that are being visited, and control the speed of the animation. This lets users
the current shortest path tree, and the tentative distances as explore the recursive process at their own pace. Clear
they are updated during the computation. This Visualization is also provided in the results section. As the
visualization allows users to observe the step-by-step recursive calls finish, we made sure to clear their
process of finding the shortest paths from the source vertex visualization representation. This keeps the screen clean
to all other vertices in the graph. Users can interact with and focused on the active calls.
the visualization by adjusting the speed at which the 7. User Controls:
algorithm runs, pausing and resuming the visualization,
Provide controls for users to start, pause, step
and exploring the computed shortest paths.
through, or speed up/slow down the animation. This gives
5. Visualization Logic: users the ability to explore the visualization at their own
Write the logic that ties the algorithm's steps to the pace.
visual representation. For instance, if our paper is
visualizing any algorithm, then need to highlight nodes as V. RESULTS
they're visited, show the queue, and animate the process. The potential benefits of using visualizations for
The same was discussed in results section. algorithm understanding are numerous. For example,
6. Animating Recursive Calls: visualizations can help students and others understand
algorithms more effectively, and can improve their
Animating recursive calls can be more challenging.
retention of algorithms over time. By thoroughly test your
The work of us need to track the state of each recursive
visualizer with various inputs and scenarios. Debug any
call, such as the current parameters and variables.
issues in the work encounter and ensure that the
Highlight the part of the visualization that corresponds to
animations and visualizations accurately represent the
the current call stack. Animating recursive calls can be
algorithms and recursive processes. Visualizations can also
complex, and it might take several iterations to refine the
help identify common mistakes and misunderstandings,
visualization and make it truly educational and intuitive.
and can provide a more engaging and interactive learning
Start with simpler algorithms and build up to more
experience.
complex ones as the work become more comfortable with
the animation process. Animating recursive calls can be However, there are also challenges and limitations
challenging, but it's a great way to visually understand to using visualizations for algorithm visualization. For
how recursive algorithms work. Here's a more detailed instance, creating effective visualizations can require
approach to animating recursive calls within our algorithm specialized skills and software, which may not be readily
visualizer: Visual Representation Setup is defined how the available to all educators and learners. Additionally,
work will visually represent the recursion stack and the presenting complex algorithms in a way that is accessible
current state of the algorithm. The work might use to a broad audience can be difficult, and may require
different colors or shapes to indicate active recursive calls, significant design and development effort.
base cases, and variables .Recursion Tracking is used to
set up a data structure to track the state of each recursive
call. This could be a stack or a list that keeps track of the
parameters and variables for each call. Base Case
Highlighting is a process of when a base case is reached,
make sure to highlight it distinctly. This helps users
understand when recursion is terminating. Animating
Recursive Calls made to visualize it by adding a new entry Fig 1 : A* Algorithm Visualization

Authorized licensed use limited to: Zhejiang University. Downloaded on September 10,2024 at 04:12:51 UTC from IEEE Xplore. Restrictions apply.
 Fig 1 is depicting the initial stage of A* algorithm TABLE 1 : CONSEQUENCES OF VISUALIZATION ALGORITHMS
visualization. The A* algorithm is a widely-used path Measures A* Dijkstra’s
finding algorithm that is commonly used in games and
robotics. In this image, we can see a two-dimensional grid- Accuracy (%) 89.00 72.15
like maze with a start and end point. The algorithm works
by searching through the maze to find the most efficient Precision (%) 84.92 73.46
path from the start point to the end point. The yellow line
represents the path that the algorithm has determined is the F- Measure (%) 93.64 79.39
most efficient route from the start point to the end point.
The A* algorithm uses a heuristic function to estimate the Precision (%) 94.92 69.46
cost of reaching the end point from each explored node.
RMSE (%) 69.039 69.51

VI. CONCLUSION
We have reviewed the existing research and
literature on algorithm visualizers. It has highlighted the
potential benefits of using visualizations to help
understand algorithms, as well as the challenges and
limitations of this approach. The findings of the survey
suggest that algorithm visualizers can be a valuable tool
for educators and learners, and can help improve
understanding and retention of algorithms. However,
Fig 2: A* Algorithm Visualization further research is needed to better understand the best
practices for using visualizations in this context, and to
Fig 2 depicting the A* algorithm visualization is a develop effective and accessible algorithm visualizers.
graphical representation at the end of level. It is also This is a high-level overview, and each step can involve a
graphical representation of the A* algorithm in action with significant amount of work. It also need to delve into more
steps. By considering both the estimated cost and the advanced topics such as data visualization techniques,
actual cost of reaching each node, the algorithm is able to recursive call tracking, and handling complex graph
quickly determine the most efficient path through the structures.
maze. Overall, the A* algorithm is a powerful tool for path
finding and is widely used in a variety of applications. REFERENCES
[1] Dijkstra, E. W. (1959). A note on two problems in connexion
with graphs. NumerischeMathematik, 1(1), 269-271.
[2] Sundararajan, G., & Perumalsamy, D. (2022). Proactive Routing
Mechanism for Removing Far Sensor in IoT using A Design of
B* Index. International Journal of Sensors Wireless
Communications and Control, 12(2), 132-141.
[3] Nilsson, N. J. (1971). Problem-solving methods in artificial
intelligence. New York, NY: McGraw-Hill.
[4] Geetha, S., Nanda, P., Joshua Samuel Raj, R., & Prince, T.
(2021). Early Recognition of Herb Sickness Using SVM. In
Intelligence in Big Data Technologies—Beyond the Hype:
Proceedings of ICBDCC 2019 (pp. 543-550). Springer
Fig 3 : Dijkstra’s algorithm Visualization Singapore.
[5] Geetha, S., & Deepalakshmi, P. (2019, April). Proactive
Fig 3 depicting the Dijkstra’s algorithm Mechanism of Replacing Void Sensor and Managing Cluster
visualization. It is a complete stage of graphical heads. In 2019 IEEE ,International Conference on Intelligent
representation of the Dijkstra's algorithm. It is a widely Techniques in Control, Optimization and Signal Processing
used graph algorithm that finds the shortest path between a (INCOS) (pp. 1-6). IEEE.
starting node and all other nodes in a weighted graph. It [6] Hart, P. E., Nilsson, N. J., & Raphael, B. (1968). A formal basis
for the heuristic determination of minimum cost paths. IEEE
maintains a priority queue of nodes, initially assigning a Transactions on Systems Science and Cybernetics, 4(2), 100-
distance value of infinity to all nodes except the start node. 107.
Dijkstra's algorithm greedily selects the node with the [7] Cormen, T. H., Leiserson, C. E., Rivest, R. L., & Stein, C.
smallest distance and relaxes the edges connected to it. This (2009). Introduction to algorithms (3rd ed.). Cambridge, MA:
process continues until all nodes have been visited, MIT Press
resulting in the shortest path from the tart node to all other [8] Kavraki, L. E., Svestka, P., Latombe, J. C., & Overmars, M. H.
(1996). Probabilistic roadmaps for path planning in high-
nodes in the graph. Dijkstra's algorithm is commonly used dimensional configuration spaces. IEEE Transactions on
in various applications, including routing protocols and Robotics and Automation.
network optimization. Table 1 shows the values of the
visualization algorithm against the different measures.

Authorized licensed use limited to: Zhejiang University. Downloaded on September 10,2024 at 04:12:51 UTC from IEEE Xplore. Restrictions apply.