Design and Implementation of a Web-Based Environment for

Dynamic Algorithm Visualization and Analysis

Research Paper

BACHELOR OF TECHNOLOGY IN

COMPUTER SCIENCE & ENGINEERING

(Session 2023-2024)

Under the supervision of

DR. Jolly Parikh

Submitted by:

Dhruv Gupta(06111502721)

Anukrit Goyal(06711502721)

Harshit Agarwal(06811502721)

Himanshu Uniyal(06911502721 )

Department of Computer Science & Engineering

Bharati Vidyapeeth’s College of Engineering

Paschim Vihar, New Delhi

(November 2024)

Abstract
Enhancement of Student Engagement and enhancing educational outcomes in audience of
interest (alignment with stated trends) computer science We focused on creating dynamic
animations and graphical representations to explain how different algorithms work. This paper
describes our design of AV tools, especially for online courses, and discusses their contribution
to the learning process and its efficiency. This survey of existing AV tools helps us find some
important design goals that theoretically should be considered for a more human-level
performance. influence in our work to keep it aligned with sound pedagogy and usability.

Introduction
Algorithms and data structures sit at the core of the computer science curriculum for every
computer scientist (or professional programmer), which makes it a foundational topic to gain an
understanding of. These are the concepts that build the foundations of development and
understanding how we solve problems on computers. In the last several decades, as systems of
higher education worldwide have changed and scaled–creating an ever-more diverse student
body (e.g. Central Europe)–there has been a demand for innovative new teaching strategies.
Growing number of students and complexities in algorithms have driven this demand.

Approaches with whiteboard/slides teaching algorithms have been effective but are not
necessarily aligned with the range of possible learning styles in modern classrooms setting.
Evidence of the urgent need for new approaches to foster student engagement and deepen
learning experiences has been further magnified by the switch to online learning.

One of the most used innovations to teach algorithms are algorithm visualization (AV) tools [2].
Usually provided by third-party developers, these tools provide a visual representation of an
algorithm in action that guides the audience through every stage the sorting process undergoes as
it works. AV Tools have shone prominently as educational visualizers in the learning space to
convert abstract concepts into immersive teaching aides.

Researchers have shown in significant numbers and with great variety that, through interactive
representations, algorithm visualization not only crystalizes students' attention but also enhances
their understanding of difficult concepts. By allowing students to try various inputs and
parameters, these tools promote exploratory learning where students can adjust their learning
experiences according to their specific requirements. Widespread research has demonstrated that
interactive algorithm visualizations interactively engage students more successfully and reinforce
learning outcomes than static visualizations [2]. Over the last several decades there has been a
significant amount of development and adoption in AV tools. This area of research was
pioneered in the 1980s with BALSA systems from Brown and Sedgewick. Then the following
two decades more sophisticated systems such as TRAKLA2, ANIMAL, JAWAA and
Algorithms in Action appeared on the scene providing richer visualization and interactivity [3].

Computer science is another area where interactive AV tools can greatly support the growing
movement for personalized, individualized learning. Unlike a standardized or generic approach,
interactive visualizations give students the freedom to learn at their own pace, explore algorithm
from different angles and if there is any part of a concept which they find difficult to understand
they can repeat the exploration multiple times. Visual cues have been known to improve your
analytical processing abilities since forever.

Instead of static diagrams that demonstrate algorithm flow, these tools allow students to interact
with algorithms and see them in action. This can inform a hands-on methodology behind giving
students surface knowledge of how algorithms actually work.

Moreover, the rise of information and communication technologies (ICT) all over the globe [6–
8] together with opening-up of access to education has enabled e-learning platforms embedding
these visualizations. AV tools integrated with these platforms make AV more engaging and
learner-oriented [4], enhancing end-users accessibility by utilizing real-time feedback and
interactivity with learning materials. Moreover, the use of AV tools is not limited to only
algorithm visualization but includes data structures, mathematical graphs and software
development processes.

Algorithm visualization has been studied for its educational benefits, with promising results. For
example, a meta-study of the 24 experimental studies has demonstrated that when used
appropriately AV tools lead to better learning outcomes Interactive, user-friendly tools that
facilitate personalized learning experiences have been shown to be the most effective type of
learning[5]. Research findings on other interactive features such as an interactive prediction
facility, which builds the meta-cognition of algorithm execution steps by allowing students to
predict the next step in an algorithm workflow, also suggest that such tools improve learning
through the framing effect of activating critical thinking skills.

This is not all that AV tools have to offer; so default is the cons of implementing such tools.
They break down the algorithms in easy-to-comprehend chunks, but sometimes that's also a case
of "too simple" to understand it deeply. This step by step breakup is very useful but can also
transition into various directions that are uncommon for building the algorithm, and thus gets
messy when students face the blues of coding their algorithms in practice. These AV tools only
augment or complement normal pedagogy and they cannot replace it—for ERTs, if for no other
reason than real algorithm learning is practical.

In this paper we describe an approach to leverage algorithm visualization tools for online
computer science education. We contextualize the pedagogical and technical requirements to
design effective AV tools. We constructed this project by taking advantage of previously
developed research and tools, we incorporated both novice features as well as advanced student
features. Our goal is to build a system that visualizes algorithms and engages students in the
learning process by allowing them to interact and explore. With the ever-changing landscape of
computer science, we hope to meet this increasing demand for effective and scalable educational
solutions by extending up on standard methods of teaching algorithms with interactive
visualizations.

Related Work
The last ten years saw the development of algorithm visualization (AV) tools receiving more and
more interest from both educators and researchers. The increasing importance of this subject is
mainly driven by the improvement of technology (especially, the spreading of HTML5[6]). The
recent advances in this technology have taken web AV tools from fully native solutions to high-
quality browser-dependent graphics capable of executing physical simulations across personal
computers, tablets and smartphones [7]. Web-based learning environments are establishing a
stronger presence in education as web browsers evolve into a universal interface for more and
more applications [6]. These settings have emerged as key elements in providing interactive, yet
accessible learning.

One of the tools related to AV is web-based, open-source Data Structure Visualization (DSV)
tool [9], which has been developed by University of San Francisco. DSV: Dynamic XML for
Javascript and HTML5 The DSV (Data Structure Visualization) is a javascript module which
allows the interactive animations or visualizations of complex data structures form this project
uses javascript and html5 to validate using modern browsers on land and other devices like
iPhone flash android mobile or the iPad. This helps learners to interact with learning material
across multiple devices, which in turn increases access to quality education.

In an additional example, Vrachnos et.al created the Dynamic Algorithm Visualization

Environment (DAVE) framework that enables students to choose and visualize multiple
algorithms in real time[6]. DAVE provides interactivity with student users by allowing
modification of some parts of the algorithm code on-the-fly while execution and seeing directly
the results on screen [7]. This function gives students the opportunity to actively test algorithms,
thus gaining practical insight into important logical steps and algorithmic structures. AV tools
like DAVE offer active learning, where students can make adjustments and observe the results in
real time; they enable learners to test, rather than just watch the algorithms they execute.

Other important AV tools include JSAMBA, Animal, Jawaa, Jeliot, JHavé, Trakla2 and Alvis
which focus on animations of high level abstractions of algorithms and data structures instead of
low level program structure[8]. That abstraction is especially useful in the initial stages of
learning, when students are more interested in understanding algorithmic reasoning than getting
bogged down by technical minutiae like memory addresses and function calls.

However, the success of AV tools in education depends not only on their ability to represent
algorithms but also on how students interact with these visualizations. Saraiya identifies several
effective features that an ideal AV tool should possess, such as the ability to control the pace of
the visualization and provide a comprehensive data set that covers all edge cases for better
understanding[10]. Saraiya further suggests that even a simple AV tool with minimal features
can be sufficient for students to grasp the procedural understanding of an algorithm. To facilitate
a more conceptual understanding, additional features like an activity guide to encourage deeper
analysis and a pseudocode display of the algorithm can prove invaluable. However, measuring
the effectiveness of these features is complex and can vary across different learning contexts .

Another key consideration in AV tool development is student engagement. Hundhausen et al.

[11] emphasize that the primary aim of AV should be to promote active experimentation and to
support the construction of mental models for abstract programming concepts. This approach not
only influences students' algorithmic thinking but also aids in the development of problem-
solving skills . Their extensive survey of twenty-four related reports on AV platforms concluded
that how students participate with virtual environments matters more than the visualizations
alone[12]. AV tools work best when learners actively engage with the educational process, such
as through interactive components, prediction attributes, and chances for hands-on
experimentation.

Additionally, researchers have underscored the significance of instructional and usability needs
in designing AV tools[13]. For instance, pedagogical prerequisites, as outlined in investigations
such as those by Saraiya and in the work of Vrachnos et al., involve features permitting forwards
and backwards navigation through the animation, hypertext-based explanations of each
visualization step, and integrating quizzes with feedback for both students and teachers[14]. Such
features facilitate active studying by allowing pupils to control their learning pace and get instant
replies, demonstrated to boost retention and comprehension.

Furthermore, usability goals significantly impact AV tools' efficacy. Features like

straightforwardness, reduced familiarization time, and incorporation with course curriculum are
essential to successful AV tools adoption. When AV instruments are intuitive and user-friendly,
students can focus more on comprehending the algorithms instead of expending time mastering
how to utilize the tool itself. Additionally, integration within an Integrated Development
Environment (IDE) permits students to seamlessly transition between visualizations and actual
code execution, cultivating a more holistic learning experience[15].

Recent years have also recommended extra characteristics for AV tools to better their
educational effectiveness. By way of example, the incorporation of performance and execution
data, customizable input datasets, and verbal explanations has been demonstrated to drastically
improve the learning method. These attributes allow pupils to delve deeper into algorithms' inner
workings by offering comprehensive feedback on their performance, which is crucial for
developing problem-solving skills[16].

While straightforward animations and static visualizations may captivate students visually, their
capacity to facilitate learning has been contested. As Hundhausen et al.[11] assert, without
hands-on participation, such resources struggle to realize significant instructional triumphs. This
underscores the necessity of planning audiovisual tools that offer perspectives and
simultaneously incite involvement and analytical pondering. As audiovisual advances progress,
forthcoming innovations would do well to integrate participatory traits, customized responses,
and live student contributions to craft a more engaging and fruitful place of study. Nonetheless,
even the most interactive designs cannot compel learning—students must voluntarily immerse
themselves in the experience and grapple with the concepts for insights to take root.

Methodology
We used a system thinking approach to design our AV tool, targeting the underlying principles
of interactivity, usability and accessibility in learning.

Design Considerations
 ● Pedagogical Goals:

○ Increase Understanding: Our tool deliberately combines textual with visual

representations, as well as context-sensitive help (and enables users to provide
their own data input) in order to promote interactivity.

○ Promote Active Learning: Users have the ability to change the animations:
adjust speeds, go backward in time and step through algorithms so that we can see
each step clearly.

○ Varied Skill Levels: You can learn this at your own pace using our visualizer,
which comes with different levels of complexity and datasets to play around with.

● Usability Goals:

○ Learnability and Memorability: By having a uniform, predictable interface

for all of our visualizations, we familiarize students with how to use the tool
without needlessly taxing their working memory.

○ User-Friendly: We focused on usability by using play, pause and reset buttons

that are familiar to everyone from other applications. The visual lay-out is well-
structured, and you have the immediate availability of synchronized pseudocode
which links each visualization to actual real code.

● Accessibility Goals:

○ Global Availability: The tool is platform-independent, making it easy for

learners around the globe to access it regardless of their devices.

User Interaction Design: The flexibility of our tool combines input windows for manual data
entry, resizable visualization windows, and color-coding to focus attention on important steps.
We followed Schneiderman’s golden rules of user interface design and designed the interaction
with the tool to be users intuitive, error-resistant, and easy control.

Implementation: The AV tool is implemented using web technologies like JavaScript and
HTML5, enabling interactive animations that can be viewed through a browser. This enabled us
to develop a cross-platform solution, which can be accessed from any device. We also made sure
that the visualization engine was agnostic of the algorithm complexity itself, without sacrificing
performance.

Proposed System Architecture

The architecture of our AV tool consists of 3 main components:
 1. The User Interface: The user interface is where you select algorithms, view
visualization, have Play & Pause buttons of the algorithms that run. We also included
pseudocode visualizations that are dynamic as the algorithm runs.

2. Visualization Engine: The component where the algorithms and possibly its animations
will be generated. It provides color coded graphs to illustrate the state changes e.g.
element swapping in sorting algorithms.

3. Backend: We can divide this model into two parts, frontend and backend- the back
handle data storage, user input and run the algorithm. So that the tool can respond to each
user command accurately and the learning flow is uninterrupted.

Results
Fig 1: Website front page
 Fig 2: Sorting Visualizer

Fig 3: Path Finding Visualizer

 Fig 4: N-Queen Visualizer

Conclusion
As a result, student comprehension of algorithmic ideas is superior with our Automated
Visualization (AV) tool than what they receive otherwise through traditional learning methods as
shown. In fact, unlike passive visualization, interactive tools support higher engagement and
retention of learning. In real-time, students learnt by having the ability to manipulate parameters
and watch changes so that their learning experience became more dynamic and tailor-made.

Our results indicate that algorithm visualization (AV) is a helpful complementary resource for
computer science education. Lectures, textbooks, and actual coding will always remain a primary
way of teaching algorithms but AV tools can certainly complement the learning experience by
providing students with a visual aspect that helps them understand the more complex algorithms
they encounter. In this paper, we have provided an overview of the VizAlgo platform (an AV
tool that promotes this type of supplementary learning) and a dissemination and discussion of our
experiences with using it in various educational settings. Our student questionnaire results
confirm that VizAlgo is effective in improving the quality of education within this domain as
specific instructions and guidelines, providing for some of the shortcomings endemic to current
higher education practices.

A full integration of AV tools to teach computer-related sciences, however, has its own
difficulties and restrictions. While I think that AV tools — such as VizAlgo, which are so
valuable and fulfill an important function in visualizing how algorithms work — have a place in
the learning process, these types of resources are often viewed as secondary or inferior to real-
world application of writing code and implementing algorithms in a preferred language. But real-
life computer scientists have to touch the code and practice on it to develop some basic skills for
problem-solving and debugging.
One more limitation we faced is the absence of parametric AV tools (i.e., a tool that enables
users to combine various visualization styles that are equipped with different combinations, both
from interface and platform perspectives). As noted earlier, most of the AV tools are design
based and tend to favor either In only or out only algorithms or data structures, including
VizAlgo. It is this pervasive restriction that requires students, and teachers alike, to switch
between different interfaces when trying to visualize a certain algorithm. Though VizAlgo looks
good and works well, it does not seem to be the end solution for algorithm visualization yet.

References
[1] C. A. Shaf er, 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 - visualizing data structures and algorithms through animation.
VisuAlgo. https://visualgo.net/e

[3] M. L. Cooper, C. A. Shaf er, 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] E. Vrachnos and A. Jimoyiannis, "Design and evaluation of a web-based dynamic algorithm
visualization environment for novices," Procedia Computer Science, vol. 27, pp. 229-239, 2014.

[7] S. S. A. Naser, “Developing Visualization Tool for Teaching AI Searching Algorithms,”

Information Technology Journal, vol. 7, no. 2, pp. 350–355, 2008.

[8] J. P. Guo, "Online Python Tutor: Embeddable Web-Based Program Visualization for CS
Education," in SIGCSE Technical Symposium on Computer Science Education, New York,
USA, 2012.

[9] E. Fouh, M. Akbar, and C. A. Shaffer, “The role of visualization in computer science
education,” Comput. Sch., vol. 29, no. 1–2, pp. 95–117, 2012.
[10] “Data Structure Visualization,” Usfca.edu. [Online]. Available:
https://www.cs.usfca.edu/~galles/visualization/Algorithms.html. [Accessed: 20-Oct-2024].

[11]P. Saraiya, C. A. Shaffer, D. S. McCrickard, and C. North, “Effective features of algorithm

visualizations,” SIGCSE Bull., vol. 36, no. 1, pp. 382–386, 2004.

[12] C. D. Hundhausen and J. L. Brown, “What You See Is What You Code: A ‘live’ algorithm
development and visualization environment for novice learners,” J. Vis. Lang. Comput., vol. 18,
no. 1, pp. 22–47, 2007.

[13] D. Hundhausen, S. Douglas, and J. Stasko, “A metastudy of algorithm visualization

effectiveness,” Journal of Visual Languages and Computing, vol. 3, no. 3, pp. 259–290, 2002.

[14] E. Vrachnos and A. Jimoyiannis, “Design and evaluation of a web-based dynamic algorithm
visualization environment for novices,” Procedia Comput. Sci., vol. 27, pp. 229–239, 2014.

[15] G. Robling and T. L. Naps, “A testbed for pedagogical requirements in algorithm

visualizations,” in Conference on Innovation and Technology in Computer Science Education,
New York, USA, 2002.

[16] J. Urquiza-Fuentes and J. Á. Velázquez-Iturbide, “Toward the effective use of educational

program animations: The roles of student’s engagement and topic complexity,” Comput. Educ.,
vol. 67, no. C, pp. 178–192, 2013.