4 PF - Algorithm Visualizer - Visualization and Comparative Simulation of Pathfinding, Searching and Sorting Algorithms
4 PF - Algorithm Visualizer - Visualization and Comparative Simulation of Pathfinding, Searching and Sorting Algorithms
10.16920/jeet/2024/v38i2/24193
Subhash Rathod1, Abhinav Mishra2, Akshay Patil3, Ashutosh Dhanawade4, Gaurav Dalvi5
1,2,3,4,5
Computer Department, Marathwada Mitramandal's Institute of Technology, Maharashtra, India
1
[email protected]
2
[email protected]
3
[email protected]
4
[email protected]
5
[email protected]
Abstract :This study addresses the need for enhanced Algorithm Visualizer e-learning application serves as
algorithms learning through the utilization of a valuable resource for learners, enhancing
comparative simulation and visualization. Motivated algorithmic comprehension through comparative
by the challenge of comprehending complex simulation and visualization techniques.
algorithms, we emphasize the efficacy of
visualization tools. Our research explores the real- Keywords: algorithm visualization; searching;
time rendering of algorithms in a visual format, sorting; pathfinding; digital learning; heuristic
facilitating a deeper understanding of their underlying algorithms; educational technology.
mechanisms. In addition, we introduce a novel
comparative simulation feature within our Algorithm 1. Introduction
Visualizer e-learning application, enabling learners to
contrast the performance of diverse algorithms, In the vast landscape of computer science, the
discern their strengths and weaknesses, and evaluate study of algorithms is often encapsulated as the
their applicability to different data sets. Specifically, "Design and Analysis of Algorithms." Proficiency in
this application accommodates various algorithms, computational thinking and programming is a
including Dijkstra's algorithm, DFS, BFS, Binary prerequisite for excelling in this field. Nevertheless,
Search, and more. Learners can employ this tool to the intricate nature of algorithms can pose a
scrutinize algorithmic differences and efficiency, formidable challenge, even to seasoned programmers.
exemplified through scenarios like comparing Conventional pedagogical methods employed to
Dijkstra's algorithm and A* algorithm for pathfinding teach algorithms can often be tedious, failing to
on a map. Furthermore, this feature extends to the provide the essential tools required for efficient and
evaluation of sorting algorithms, such as Quick Sort effective learning. As such, there exists a conspicuous
and Merge Sort, allowing users to visualize their gap, waiting to be bridged by a visualization-centric
performance on large data sets. In conclusion, the approach to algorithm learning.
features. This demand has sparked our enthusiasm for algorithms to calculate the shortest route between
a novel project that leverages contemporary tools such designated start and end nodes. The visual
as ReactJs, its associated frameworks, and libraries to representation of this process proved instrumental in
craft a much-needed educational tool. Our fostering an intuitive understanding of these
overarching objective is the creation of a cutting-edge algorithms, underscoring the value of visualization as
algorithm visualization platform, designed to an educational tool.
facilitate efficient and effective learning.
(Goswami et al. 2021) made a significant stride in
By manifesting algorithms in a visual format, this the field by creating an innovative algorithm
software implementation promises to elevate visualization tool. Their tool encompassed a diverse
students' understanding of these intricate constructs. range of path-finding, sorting, and CPU scheduling
With dynamic visual representations of algorithms in algorithms. Notably, their research revealed a pivotal
action, we aim to revolutionize the pedagogical statistic: 60% of students preferred learning
landscape, ushering in a more comprehensive and algorithms through visualization rather than
effective approach to teaching. The paramount traditional textbooks. This insight shed light on the
importance of visualization in comprehending growing appetite for interactive and visually engaging
complex concepts, including algorithms, is learning tools to facilitate comprehension of intricate
championed by an array of prominent experts and algorithms.
educators, all of whom underscore the adage that "a
picture is worth a thousand words." Indeed, extensive (Senger et al. 2021) focused their efforts on the
research underscores the profound impact of development of a visualizer aimed at BFS and
visualization in enhancing our grasp of intricate Dijkstra's Algorithm, accentuating the need for
subject matter. comparisons and analysis between these two
algorithms. (B. Nagaria et al 2021) stressed the
In summation, our commitment is unwavering in necessity for an interactive teaching tool catering to
the development of an algorithm visualization visually inclined students. Their tool allowed students
platform that stands as a formidable asset for learners to submit path-finding formulas and receive visual
of all backgrounds and skill levels. By harnessing the feedback, further emphasizing the efficacy of
formidable power of visualization and comparative visualization in the learning process.
simulation, our application is poised to democratize
algorithmic comprehension, making it more Ghandge et al. 2021) presented AlgoAssist, a
accessible, enjoyable, and understandable to learners comprehensive platform with integrated features that
across the spectrum. enhanced students' coding abilities and facilitated
teachers' assessments of student work. A notable
2. Literature Review feature of AlgoAssist was its emphasis on "Algorithm
Visualization" to elucidate the flow and operations of
The realm of algorithm visualization has witnessed algorithms, consolidating lab functionality into a
several notable contributions by researchers and single accessible platform.
developers in recent years, underscoring the profound
impact of visualization in the understanding and (Jain 2021) contributed to the landscape of
learning of complex algorithms. algorithm visualization with a Sorting Algorithms
Visualizer. This tool facilitated the visualization of
(Prabhakar et al. 2022) embarked on the various sorting algorithms, such as Insertion Sort,
development of an algorithm visualizer using the Bubble Sort, and Selection Sort. It provided users with
Tkinter Module in Python. Their creation was a the ability to generate random arrays for visualization
desktop application, readily accessible through a user- and to control the sorting speed and array size,
friendly website. While their work laid the foundation enhancing user engagement and understanding.
for algorithm visualization, it also highlighted the
growing need for more interactive and accessible (Abedalrahim et al. 2020) focused their efforts on
learning tools. a desktop-based application developed using Java,
which centered on the simulation of various sorting
(Yadav et al. 2021) introduced a path-finding algorithms. However, this application had limitations
visualizer that harnessed A*, Dijkstra, and DFS as it could only be used on standalone PCs.
98 Journal of Engineering Education Transformations , Volume 38, No. 2 , October 2024 , ISSN 2349-2473, eISSN 2394-1707
The selection of searching and sorting algorithms 5. Implementation of a modern and intuitive user
for this system is grounded in extensive literature interface that allows users to personalize their
research and prior research findings. Researchers experience, making the platform accessible and
such as (Prabhakar et al. 2022), (Yadav et al. 2021), enjoyable for learners, researchers, students, and
(Goswami et al. 2021), (Senger et al. 2021), and developers alike.
(Ghandge et al. 2021) have demonstrated the value of
algorithm visualization in enhancing understanding. The motivation for this research is rooted in the
These studies provide a strong justification for the desire to make algorithmic concepts more accessible
inclusion of specific algorithms, including linear and enjoyable. Existing literature, exemplified by the
search, binary search, bubble sort, insertion sort, work of Prabhakar et al. [1], Yadav et al. [2], Goswami
merge sort, quicksort, and heapsort. These algorithms et al. [3], and Ghandge et al. [6], underscores the
have proven their significance in both educational and effectiveness of algorithm visualization in enhancing
practical contexts, and their selection is informed by the understanding of algorithms. This work also
the broad applicability and relevance they hold. addresses the challenge of understanding and
comparing pathfinding algorithms, such as Dijkstra's
The central research question guiding this work is: algorithm and A*, without visual aids. The web-based
"How can we provide a comprehensive and accessible application aims to bridge this gap by providing
platform for users to visualize, simulate, and compare interactive simulations and visualizations of different
searching and sorting algorithms to facilitate pathfinding algorithms.
algorithmic comprehension and evaluation?"
In conclusion, this web-based application seeks to
A. Objectives provide a user-friendly platform for comparative
simulation and visualization of various searching,
The primary objectives of this research project sorting, and pathfinding algorithms. It leverages
encompass several key facets: modern web development technologies and tools to
ensure a responsive and interactive user experience,
1. The development of a user-friendly web-based empowering users on their journey to master and
platform that offers dynamic visualizations and evaluate these algorithms effectively.
simulations of searching and sorting algorithms.
The aim is to make these algorithms more B. Features
engaging and comprehensible to a diverse
audience. The system will have the following features:
2. Enabling side-by-side comparisons of different 1. Auto-Generation and User Input: The system will
algorithms under various conditions, empowering allow users to auto-generate data or enter their data
users to assess the relative performance of these for visualization.
algorithms. This feature is vital in allowing users
to make informed choices in algorithm selection 2. Side-by-Side Comparison: The application allows
for their specific tasks. users to run two algorithms simultaneously for a
side-by-side comparison. This feature enables
3. Providing customization options that allow users users to compare the performance of different
to adjust algorithm parameters and observe their algorithms under various conditions.
impact on algorithm performance. Customization
fosters deeper insights into algorithm behavior 3. Algorithm Selection: The system will include the
Journal of Engineering Education Transformations , Volume 38, No. 2 , October 2024 , ISSN 2349-2473, eISSN 2394-1707 99
8. User Interface: The system will have a modern and The visual representation of the major components
intuitive user interface that is easy to navigate. of our application, depicted in Fig. 1, provides an at-a-
Users will be able to choose from several color glance overview of the system's architecture,
schemes and themes to customize the appearance highlighting the core functionalities that have been
of the application. carefully designed to provide an intuitive and user-
friendly experience.
The proposed system will be an excellent tool for
100 Journal of Engineering Education Transformations , Volume 38, No. 2 , October 2024 , ISSN 2349-2473, eISSN 2394-1707
4. Results
Fig. 3 : Sorting Visualization Comparison Page
The implementation of our project has yielded
In Fig. 3, we can see the Sorting Visualization
significant results, which we are excited to share with
Comparison Page, which includes the following
you. Following are the results achieved after the
elements:
implementation of the project.
• Array Text field: shows the array to be visualized.
• Generate Button, which generates a random array • Two Drop-Downs: select two algorithms of the
of random lengths when clicked. selected type to be visualized and compared.
• Speed Slider, used to set the speed of Visualization. • Two Visualization Areas: consist of bars that
represent the values of the array.
• Algorithm Drop Down, used to select the
Algorithm to be Visualized.
The Searching Visualization Page, shown in Fig. 4, • Speed Slider, used to set the speed of Visualization.
comprises the following elements:
• Algorithm Drop Down, used to select the
• Add Node Button to add a new Node. Algorithm to be Visualized.
• Add Edge Button to add a new Edge. • Visualize Button, which initiates the visualization.
• Delete Button to delete an edge or a node. • Reset Button, used to reset the visualization.
• Generate Button, which generates a random tree • Timer, that counts the time required for
when clicked. visualization to be completed.
• Speed Slider, used to set the speed of Visualization. • Visualization Area, comprising of a Grid that
shows a maze.
• Algorithm Drop Down, used to select the
Algorithm to be Visualized. Our project's advanced visualization features and
algorithmic capabilities enable users to easily analyze
• Visualize Button, which initiates the visualization. and compare various pathfinding, searching, and
sorting algorithms. With the ability to visualize and
• Reset Button, used to reset the visualization. compare algorithms, users can gain a deeper
understanding of their functions and operations,
• Timer, that counts the time required for enabling them to make more informed decisions when
visualization to be completed. selecting algorithms for specific tasks. This
functionality is especially useful in the field of
• Visualization Area, consisting of Nodes and Edges educational technology in higher education, where
that represent a Tree. algorithmic understanding and proficiency are
essential for success.
Bolivariana: A Bibliometric Analysis. Journal of Pinto, C. A. S., & Reis, A. C. (2023). Characteristics of
Engineering Education Transformations, 37(4), Education 4.0 and its Application in Industry
102–110. 4.0. Journal of Engineering Education
Transformations, 37(1), 51–61.
Dol, S. M., Jawandhiya, P. M., & Satav, P. R. (2024).
Use of Microsoft Excel for Data Collection and Dol, S. M., & Jawandhiya, P. M. (2022). A Review of
Processing to Predict Students’ Performance in Data Mining in Education Sector. Journal of
EDM. Journal of Engineering Education Engineering Education Transformations,
Transformations, 37(Special Issue 2), 22–43. 36(Special Issue 2), 13–22.