Design and Implementation of a Web-Based Environment for
Dynamic Algorithm Visualization and Analysis
Minor Project
submitted by:
Dhruv Gupta(06111502721)
Anukrit Goyal(06711502721)
Mentor :- Dr. Jolly Parikh Harshit Agarwal(06811502721)
Himanshu Uniyal(6911502721)
Contents
● Introduction (Slide 3)
● Problem Statement (Slide 4)
● Detailed Literature Review
● Objectives (Slide 5)
● Proposed Methodology (slide 6)
● Result (Slide 7-9)
● References
Introduction
● Importance of Programming: Computer programming is essential for students to grasp modern technologies, develop
problem-solving, and critical thinking skills.
● Role of DSA: Data structures and algorithms (DSA) form the foundation of computer science, crucial for academic
and career success, and help create advanced technologies.
● Challenges in Learning DSA: Traditional methods like textbooks and diagrams make DSA difficult to understand, as it
is abstract and dynamic, leading to student disinterest.
● Algorithm Visualizers (AV): AVs use animations and transitions to visualize algorithms, improving student
engagement and comprehension compared to traditional methods.
● Improving Teaching Efficiency: AVs allow educators to modify and customize visualizations for different algorithms,
making teaching more flexible and effective.
● Project Aim: The project focuses on enhancing AVs' flexibility, enabling greater customization, which improves both
teaching and learning experiences in DSA education.
Problem Statement
● Challenges in Traditional Teaching: Traditional methods like textbooks and diagrams are hard to understand, making it
difficult for students to stay engaged with algorithms.
● Interactive Learning through Visualizations: Visualizations help students learn algorithms by using animations that
make complex ideas easier to follow.
● Impact on Computational Thinking: Visualization tools improve problem-solving and logical thinking by allowing
students to see and interact with algorithm processes.
● Integrating Visualization in Education: Using visual tools in teaching can make learning algorithms more engaging and
help students better understand abstract concepts.
Literature Review
Author(s) Title Description Problems Future Scope
Shaffer, C. A., Akbar, M., Getting algorithm A community-based platform Limited to the algorithms Expand the community base
Alon, A. J. D., Stewart, M., & visualizations into the for algorithm visualization, contributed by the community. to include more diverse
Edwards, S. H. [1] classroom promoting learning through algorithms and enhance user
forums, discussions, and user engagement through
feedback. additional interactive features.
Dr. Steven Halim [2] VisuAlgo - visualising data A platform to help students Lack of compatibility with Improve compatibility with
structures and algorithms understand the fundamentals small devices. mobile devices to enhance
through animation. of algorithms. Includes accessibility.
various advanced algorithms
as mentioned in the book
‘Competitive Programming’.
Cooper, M. L., Shaffer, C. A., Open source software and the Discussed the importance of No specific platform; Encourage more community-
Edwards, S. H., & Ponce, S. P. algorithm visualization community involvement in theoretical discussion on driven platforms and tools for
[3] community developing algorithm community impact. broader and diverse algorithm
visualization tools to improve visualization development.
their future.
Literature Review
S. Šimoňák [4] E-learning tool for Focuses mainly on the Limited to sorting Extend the platform to
visualization of shortest visualization of sorting algorithms. include other types of
paths algorithms algorithms. Contains two algorithms beyond sorting
segments: code execution to provide a more
and visualization. comprehensive
visualization tool.
Jonathan, F. C., Karnalim, Integrating program and Discussed algorithm General discussion; no Develop tools that not only
O., & Ayub, M. [5] algorithm visualisation for visualization and the specific tool or platform. visualize algorithms but
learning data structure selection of algorithms also provide
implementation based on performance and recommendations based on
problem-specific the problem context and
effectiveness. algorithm performance.
A. A. Supli and N. Designing algorithm Focused on designing Limited focus on mobile Create more versatile
Shiratuddin [6] visualization on mobile algorithm visualization on UI design; lacks broad mobile platforms that cover
platform: The proposed mobile platforms, algorithm coverage. a wide range of algorithms
guidelines emphasizing UI layout and and improve user
user interaction. interaction through
intuitive design.
Literature Review
Romanowska, K., Singh, G., Towards developing an Discussed the features of Theoretical framework; no Implement practical tools
Dewan, M. A. A., & Lin, F. effective algorithm an algorithm visualizer specific implementation. based on these pedagogical
[7] visualization tool for online based on pedagogical and and usability guidelines to
learning usability goals. enhance algorithm
education through
visualization.
Bruno, P. [8] Recursion Tree Visualizer A tool to visualize Focused solely on Broaden the scope to
recursion trees for recursion; lacks broader include other tree-related
recursion code using the algorithm visualization. algorithms and enhance
Reingold-Tilford algorithm visualization techniques for
to position tree nodes various recursive data
effectively. structures.
Borissova, D., & Using algorithm An e-learning tool for Limited to shortest path Expand to include various
Mustakerov [9] visualizations in computer visualizing shortest path algorithms. graph algorithms and
science education algorithms, providing step- provide more interactive e-
by-step execution learning features.
visualization for different
graph structures.
Objectives
● Engaging Learning Platform: Create an interactive platform for real-time visual demonstrations of various algorithms.
● Simplifying Complex Concepts: Break down complex algorithms into easy-to-understand components for clearer
learning.
● Interactive Experimentation: Allow users to adjust parameters like array size and speed to see how these changes affect
algorithm behavior.
● Linking Theory and Practice: Integrate code snippets with visualizations to connect theoretical concepts with practical
implementation.
● Accessible for All Learners: Make algorithm learning available to both beginners and advanced students.
● Improving Problem-Solving Skills: Boost computational thinking and problem-solving abilities through hands-on
practice and visualization tools.
Proposed Methodology
Result
Bubble Sort vs Selection Sort
Result
DFS A*
References
[1] C. A. Shaffer, M. Akbar, A. J. D. Alon, M. Stewart, and S. H. Edwards, “Getting algorithm visualizations into the classroom,” in Proceedings of the
42nd ACM technical symposium on Computer science education, 2011
[2] Halim, S. (2011). VisuAlgo - visualising data structures and algorithms through animation. VisuAlgo. [Link]
[3] M. L. Cooper, C. A. Shaffer, S. H. Edwards, and S. P. Ponce, “Open source software and the algorithm visualization community,” Sci. Comput.
Program., vol. 88, pp. 82–91, 2014.
[4] S. Šimoňák, “Using algorithm visualizations in computer science education,” Open Comput. Sci., vol. 4, no. 3, pp. 183–190, 2014.
[5] D. Borissova and I. Mustakerov, “E-learning tool for visualization of shortest paths algorithms,” Tren. J. Sci. Res., vol. 2, no. 3, pp. 84–89, 2015.
[6] R. A. Nathasya, O. Karnalim, and M. Ayub, “Integrating program and algorithm visualisation for learning data structure implementation,” Egypt.
Inform. J., vol. 20, no. 3, pp. 193–204, 2019.
[7] A. A. Supli and N. Shiratuddin, “Designing algorithm visualization on mobile platform: The proposed guidelines,” in AIP Conference Proceedings,
2017.
[8] K. Romanowska, G. Singh, M. A. A. Dewan, and F. Lin, “Towards developing an effective algorithm visualization tool for online learning,” in 2018
IEEE SmartWorld, Ubiquitous Intelligence & Computing, Advanced & Trusted Computing, Scalable Computing & Communications, Cloud & Big Data
Computing, Internet of People and Smart City Innovation (SmartWorld/SCALCOM/UIC/ATC/CBDCom/IOP/SCI), 2018.
[9] Bruno, P. (2021). Recursion Tree Visualizer. [Link]
THANK YOU