Algorithm Visualizer: Its features

2021 IEEE 8th Uttar Pradesh Section International Conference on Electrical, Electronics and Computer Engineering (UPCON) | 978-1-6654-0962-9/21/$31.00 ©2021 IEEE | DOI: 10.1109/UPCON52273.2021.9667586

and working
1st Barnini Goswami 2nd Anushka Dhar 3rd Akash Gupta
Computer Science and Computer Science and Computer Science and Engineering
Engineering Department Engineering Department Department
Krishna Engineering Krishna Engineering Krishna Engineering
College College College
Ghaziabad, India Ghaziabad, India Ghaziabad, India
[email protected] [email protected] [email protected]

4th Antriksh Gupta

Computer Science and
Engineering Department
Krishna Engineering
College
Ghaziabad, India
[email protected]

Abstract— Design and Analysis of Algorithms is one of the Also, the visualizations would be self-paced, which
most important subjects in the field of Computer Science. We means, a learner can adjust the speed of learning according to
have observed that it is one of those typical subjects, which their comfort and level of expertise.
when understood well can be very interesting, but for learners Everyone must have experienced this at some point in
who are not able to understand the concepts clearly, it can their lives that learning becomes easier when engaged in the
become a burden. Through our work we intend to change the concepts or by practically implementing the concepts
perception of this subject from complex and hard to grasp, to ourselves. Keeping this in mind we have included fun filled
interesting and fun. Our work aims to engage the students by
activities like games in the form of mazes and patterns in our
providing self-paced hands-on experience, fun filled games
work to engage the users and serve as a source of enjoyment
through mazes and patterns and interactive, perceivable
visualizations for their better concept understanding of various for them. People belonging to different age groups can
algorithms. Our work presently focuses on path-finding, sorting interact with our platform, as we have games for engaging
and CPU scheduling algorithms as these are the most widely small kids or beginners in this field and also have time and
taught and used algorithms in the computer science domain. space complexity estimations for people seriously related to
Our idea would not only help the students and learners get a this field. Currently we have simple visualizations of basic
better hold on the concepts of algorithms but also provide an path-finding [5], sorting [6][7] and CPU Scheduling
innovative way for teachers and educators to portray their ideas algorithms [2] but we have plans to extend our work to all the
more clearly and interactively through to the students. types of algorithms out there and cover all possible variations
of algorithms under each topic.
Keywords— visualization, algorithms, e-learning, path
finding, sorting, CPU-scheduling II. PROPOSED METHODOLOGY
I. INTRODUCTION A. Architectural Design
All the subjects are necessary in a course or
The major components of our work are as follows:
specialization but there are certain subjects or topics which
build the foundation of the course. Algorithms or “Design • Welcome page
and Analysis of Algorithms”, is one of those important • Path finding Algorithm
subjects in the field of computer science. Besides the • Sorting Algorithm
requisite of being skilled in computational thinking and • CPU Scheduling Algorithm
programming skills, the topic of algorithms is often The “Fig. 1” represents the block diagram of our work.
perceived as complicated and difficult to understand.
Motivated by the age-old saying, “a picture speaks more than
a thousand words”, many researchers and educators assume
that students would learn an algorithm faster and more
thoroughly using algorithm visualization techniques [1]. To
solve this issue, we came up with an idea which would bring
together all the commonly used algorithms in one platform
and help understand those using visualizations and other
interactive techniques. The visualizations referred to in our
work are step-by-step implementation of each algorithm and
then representing it to the learner in a series of states in the
form of animations. This would help the user in imagining
the working of an algorithm and confirm it then through the
visualizations.
Fig 1. Block diagram

978-1-6654-0962-9/21/$31.00 ©2021 IEEE

Authorized licensed use limited to: Zhejiang University. Downloaded on September 10,2024 at 04:08:31 UTC from IEEE Xplore. Restrictions apply.
B. Workflow
On the landing page, the user will have three options to
choose from. The options available are as follows:-
1) Path-finding Algorithms
a) Algorithms included:
We have included the following algorithms in
this section as of now:
• Dijkstra’s Algorithm
• A* Search Algorithm
• Greedy Best-First Search Algorithm
Fig 3. Finding the shortest path
• Depth First Search Algorithm
• Breadth First Search Algorithm
The algorithms present in the navbar are chosen on the
basis of their popularity and difficulty level. Students
find it difficult to understand these algorithms
theoretically. The visualization of these algorithms can
help to understand them better. Users will be able to
differentiate between the functionalities of different
algorithms on the basis of time complexity after the
visualization is over.
b) Mazes and Patterns:
Maze and patterns are included to ensure better Fig 4. Shortest path found and highlighted
and clear understanding of algorithms. Presence of
walls or obstruction between the starting node and the Dijkstra’s Algorithm is used to find the shortest path
goal node, in the visualization can help users to relate between any two vertices of a graph. Implementation steps:
the algorithm with a real world like situation. Also,
Step 1. From the navbar select Dijkstra’s Algorithm.
users will be able to figure out which algorithm is better
Step 2. Click on Visualize.
based on algorithm time complexity. Especially for the
Step 3.Algorithm Start searching the goal node from the
users looking for a playful option to understand these
starting node by traversing all the adjacent nodes and coloring
complex topics, these fun filled options can turn out to
them with dark blue colour.
be the appropriate way. Step 4.After finding the goal node it will colour the
c) Speed: shortest path to the goal node with yellow.
The project contains a speed bar to maintain the
speed of visualization. This feature is included because
2) Sorting Algorithms
everyone has a different learning rate and therefore
each user can vary the speed of visualization according a) Algorithms included:
to their choice. The following sorting algorithms are currently
d) Designing: included in our work:
Grid structure has been used to represent each • Merge Sort
node. Computer generated starting and ending nodes • Quick Sort
will be displayed initially. Users can change the
• Heap Sort
positions of start and end nodes according to their will.
Structure of mazes and patterns can also be altered • Bubble Sort
according to the user’s will (i.e., pattern of addition of Users can pick any algorithm from the above list of
new walls). available algorithms. Algorithms are chosen on the basis
e) Example: of their popularity and importance according to the
We would like to demonstrate the suggestive existing curriculum.
working of the path-finding visualization with the help b) Navbar features:
of Dijkstra’s algorithm visualization as Dijkstra’s The navbar of sorting algorithm consists of the
Algorithm can be considered as the father of all following options: -
searching algorithms. Fig 2 is the initial representation
of the grid when no algorithm is selected. • Generate a new array
It will generate a new random array. Every
time we click on this tab it will generate a new random
array. Array elements will be displayed in the form of
bars with the height of each bar proportional to the
numerical value it represents. While sorting, different
colored bars would be used to represent the sorted,
unsorted and currently sorting numerical values from the
array of input numbers.
• Change array size and sorting speed
A slider will be provided so that users can
change the size of the array and accordingly the speed of
sorting will vary. Size of array will be directly
proportional to the sorting speed i.e. (larger the speed of
Fig 2. Initial
Authorized grid view
licensed array
use limited to: Zhejiang University. Downloaded on September greater
10,2024 will be
at 04:08:31 thefrom
UTC speed
IEEEof sorting).
Xplore. As mentioned
Restrictions apply.
earlier this feature has been implemented to ensure users
are able to learn at their own pace without any haste.
c) Designing: 3) CPU scheduling Algorithms
For better visualization we have used different There can be a number of processes running parallel
colours to differentiate between the sorted bars and in a system. So, the CPU (Central Processing Unit) must
unsorted bars and even for the bars which are under the come up with a way by which it can choose from the
process of comparison and sorting. After sorting, the waiting processes and complete their execution one by
colours of all the bars will be changed to the same colour one. In doing so, CPU must ensure the following things:
and that will be different from initial colours of the array • Maximum resource utilization
and the array elements will be arranged in an ascending • Minimum response time
order. • CPU allocation must be fair enough
d) Example: • Maximum throughput
Let’s see a suggested implementation of sorting a) Algorithms included:
algorithms taking examples of Quick sort algorithm. • First-Come, First-Served (FCFS) Scheduling
Implementation Steps: • Shortest-Job-First (SJF) Scheduling
Step 1. Initially all the Unsorted Data will be • Priority Scheduling
represented by Purple Colour. After Selecting Quick • Round Robin (RR) Scheduling
sort, Sort Tab will appear. b) Designing:
Step 2. On clicking the Sort tab, the algorithm Imagining and understanding something which is
will start sorting the data. not physically visible to us can be difficult at times.
Step 3. Array is divided into sub arrays by Visualization of the processes based on their overall time
selecting the first element as pivot element. required for CPU execution (i.e., burst time) and
Step 4. When comparing the colour of the two selection of various processes on the basis of the
bars it will change to green. algorithm one by one, can be used to provide a clear
Step 5. When the two values interchange their understanding of how the algorithm is working in the
actual scenario. Thus, we can add this feature of
place, colour changes to red. scheduling algorithm visualization and other topics to
Step 6. After the overall sorting completes, the expand the knowledge base of our application.
colour of the bars change to blue.
c) Example:
The following series of images indicating the
visualization are shown below: We will now see the visualization of FCFS
algorithm into action.

Fig 5. Initial State of bars

Fig 8.Process table generated

III. MODELLING AND ANALYSIS

Fig 6. Values under comparison

Fig 9. Proposed Model

The first step after deciding the idea of the project was to
analyze the requirements and model the architecture we aim
to develop. We were clear that we wanted to keep the
Fig 7. Values after completion of sorting implementation simple and flexible. After a bit of research,
we unanimously
Authorized licensed use limited to: Zhejiang University. Downloaded on September agreedUTC
10,2024 at 04:08:31 that ’JavaScript’
from IEEE Xplore. is the mostapply.
Restrictions suitable
language as it is versatile and lightweight at the same time. relevant in the actuality, we have the following ideas:
Thus, our work uses ’Vanilla JavaScript’ and ’React JS’ both
frameworks as we found each of them preferable in different 1) Delivery and logistics management:
scenarios. Discussing in depth about what we wanted we The key to satiate and withhold the
came up with the above model as the most suitable for our customers during the course of this ruthless e-commerce
reference. The main components of the above model are competition is on-time (preferably one day delivery). It has
visualization factor, enjoyment factor and the learning factor. proved to be one of the most decisive factors of current e-
This modal made the implementation of our idea quite easier. commerce applications/companies. It has become the need of
the hour for the e-commerce industry to find out the best
IV. FUTURE SCOPE possible amenities to reach their customers on time and assert
ideal resource utilization simultaneously. Thus, this
We already have a thriving application with existing application to find solutions to their problems can be utilized
operability of basic algorithm visualization of both path- by not only the students but the companies also to reach their
finding, sorting and CPU scheduling algorithms, mazes and customers on time and assert ideal resource utilization
patterns and displaying time complexity [3]. Now, to make simultaneously. Thus, this application to find solutions to their
the visualizations all the more compelling and easier to problems can be utilized by not only the students but the
perceive we decided to include a few supplementary features companies also.
in our application in the future. The suggestive features to be
included are as follows: 2) Real time geo-location and navigation maps:
Maps and route trackers have managed to make
A. Tree based visualization of algorithms: our lives and travelling around every nook and corner of the
world a child’s play. Thus, establishing how shortest route-
It has been noticed that in the majority of the
finding algorithms are being put into action in maps and other
prevalent books for algorithms, the functionality of
services might captivate the students’ yearning for curiosity.
algorithms is exhibited in regard to tree data structure. So as
to ensure a phased switch from books or black-board routine V. RESULT AND DISCUSSION
to e-learning, this attribute can be established in our A. We conducted a survey with a group of
application and then gradually as the levels progress the undergraduates belonging to the computer science domain and
flourishing, potent form of algorithm visualization can be we observed that 60 percentage of the students would prefer
made known to the students. to learn the topic of algorithms through such movie-like
representations rather than only books and Bosch teaching
B. Visualization assisted by line-by-line code
methods
execution:
B. Indication of time complexity makes our
The algorithms conventionally are presented by work suitable to be used to compare different algorithms
the means of pseudo code or step wise routine in the majority proposed for the same topic.
of the books and websites. It is envisioned that the students C. The feature of mazes and patterns
would draft the working of algorithms in the like manner incorporated in our work not only provides better user
during their exams. So as to ensure there is no lapse amidst engagement but also helps them retain the concepts better as
the understanding and presentation of the notion in exams in they would see real life related scenarios making use of the
virtue of the students, we can induct an attribute in the algorithms.
application which can guide students comprehend the D. Our work can serve out to be a great
working through step-by-step visualization of a distinct teaching aid. Teachers and educators, with the help of our
algorithm. One feasible way of execution of this feature is to work, can keep the students interested and engaged for longer
partition the perceptible area of the screen into two parts, one periods of time.
part projecting the visualization and second portraying the E. Our solution can easily be incorporated
algorithm, wherein the line of code parallel to the ongoing alongside our education system by promoting different ways
segment of visualization is prominent, thus enhancing of learning rather than the age-old blackboard method as we
students’ tenacity and presentation skills in the discipline. just need to access a website hosted on the internet to use the
application.
C. Pause and Play: F. With unstable times like this, it is always
better to have robust backup plans available with us. In these
We are all too well accustomed with this situations, when classroom learning is not feasible, we should
scenario wherein while watching a video, we have to pause try to make the best use of available resources, our work being
the video owing to a work emergency or while on call with one of them.
someone when there is disruption, we ask the person to
reconnect and carry on with our conversation later when we G. Our work facilitates the saying “Age is just
seem to think the disruption is not there. In such a number” as people belonging to any age group would find it
circumstances, we usually continue to watch the video or easy and alluring to engage with our solution and learn at their
converse on the phone from where we left off rather than own pace.
starting all over again. Likewise, we have no intention of
having our users suffer owing to obstructions. On that VI. RELATED WORK
account, we wish to inculcate a pause function, which allows Visualizations have become a buzzword in
the user to momentarily halt the visualization and later on today’s research world. But something in terms of a
recommence from where he/she/they had left it. By any foundational algorithm’s visualization, as put forward by us
chance the user intends to visualize once more from the has not been implemented earlier. During our research we
beginning, that possibility would always be accessible to the came across research papers in this field which served as the
user despite the existent state of application. basis of the implementation of our work.
To start with, it was found that a software
D. Simulation of real world scenarios: program developed for ciphering of Shortest Path by
Dijkstra’s algorithm using C sharp [3], substantially advances
Our quest has been to put forward optimum the application of this algorithm on any connected, undirected
manner of visualization by means of our application, but graph and sanctions for simpler illustration of the result. This
possibility of improvement is ever present. Consequently, to software program may be used as a tool to give a distinctive
Authorized
enable licensed use
the students to limited
view to: Zhejiang
how theseUniversity.
algorithms Downloaded
would onbeSeptember 10,2024 at 04:08:31 UTC from IEEE Xplore. Restrictions apply.
intelligibility, concerning the algorithm and programming.
 We conferred that Algorithm visualization has [5] Pedro Moraes and Leopoldo Teixeira(2019) ’Willow: A Tool for
been a dominant theme in Computer Science edification for a Interactive Programming Visualization to Help in the Data Structures
long time now, but it had not debuted yet as the mainstream and Algorithms Teaching-Learning Process’, SBES 2019
tool used by instructors to teach in a classroom [8]. This [6] Q. Gao and X. Xu(2014) ’The analysis and research on computational
research paper investigates the distinct vital circumstances complexity’, The 26th Chinese Control and Decision Conference (2014
that algorithm visualization must satiate in order to become CCDC),pp.3467-3472. TihomirOrehovaˇcki (2012) ’ViSA:
impactful enough: “general availability of used software, and Visualization of Sorting Algorithms’, Research Gate.
visualization of why an algorithm solves the problem rather [7] Clifford A. Shaffer, Matthew L. Cooper, Alexander Joel D. Alon,
Monika Akbar, Michael Stewart, Sean Ponce and Stephen H.
than what it is doing. One possible method of “why”
Edwardsacm (2010) ’Algorithm Visualization: The State of the Field’,
algorithm visualization is using algorithm invariants rather
ACM Transactions on Computing Education,Vol. 10, Issue No. 3.
than showing the data transformations only” as quoted in this
[8] LudekKuˇcera(2019)’Visualization of Abstract Algorithmic Ideas’,
base paper.
Proceedings of the 10th International Conference on Computer
It was inferred that tools such as graphics can Supported Education (CSEDU 2018) .
help bring benefits to the students and the instructors as well
[5]. The most regular scheme for instructors to substantiate
the attributes of Data Structures and Algorithms is the use of
resources like slides and whiteboard sketches to induce
program depictions. The tools created here are fabricated to
work with any genuine program input but do not allocate
exclusive visualization for peculiar algorithms.

VII. CONCLUSION
In a nutshell, we observed some legitimate issues
in the prevalent preaching techniques by experiencing them
ourselves and tried to provide an alternate, rather
complementary solution to help overcome those issues. The
issue we faced was that we found it a bit difficult to relate
and understand the practical implementation of Algorithm
Visualizer, the algorithms owing to the difficulty in
communication of the concepts from the teachers to the
students. We found that there were no proper means that the
teachers could adopt to portray their ideas in a better and
easy manner in front of the students. So, our work could help
in the following ways: -
A. Our work exploits and makes use of the
fact that humans tend to learn better through visuals in the
form of images, animations or videos.

B. Anyone, starting from small kids to aged

individuals can easily interact with our work owing to its
great user experience.
C. Our work assures great user engagement
due to various fun-filled, real-world implementations of
various algorithms.
D. Time complexity feature of our work can
serve as a great tool to compare between various algorithms
belonging to the same domain.

E. Most frequently used algorithms associated

with path-finding, sorting and CPU scheduling algorithms
have been incorporated with our work making it a one stop
shop for anyone interested in algorithms.

F. With the inclusion of the proposed

features, the algorithm would not only help in better
visualization and retention of concepts by students, but also,
enable the students to have a gradual and smooth transition
from school level to college level of education, thus,
enhancing their knowledge and productivity.

REFERENCES
[1] Daniela Borissova and Ivan Mustakerov(2015) ’Elearning Tool for
Visualization of Shortest Paths Algorithms’, Research Gate.
[2] Neetu Goel and Dr. R.B. Garg(2012) ’A Comparative Study of CPU
Scheduling Algorithms. ’, International Journal of Graphics and Image
Processing, Vol. 2, No. 4
[3] Radoslav, Metodi and Ivan(2020) ’Finding the shortest path in a graph
and its visualization using C# and WPF’, International Journal of
Computers, Vol. 5
[4] Brian Faria(2017) ’Visualizing sorting algorithms’, Rhode Island
College

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