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 learning and the increasing sophistication of
algorithms.
Our group developed an algorithm
visualization (AV) tool with the goal of One of the such new approaches in teaching
increasing student interest and learning algorithms is the use of algorithm visualisation
performance in computer science education. (AV) technologies. These tools visually depict
We set out to produce engaging animations and algorithms in execution and provide moving
pictures showing how different algorithms images that show multiple states of the exposed
work. The objective of this paper is to describe algorithm during the latter’s course of
our work in designing AV tools, more execution. There are many adherents of AV
specifically, their online versions and evaluate tools who believe that these tools can be an
their effectiveness in enhancing learning. effective way of concretizing abstract ideas and
While analyzing existing AV tools, we will therefore help in teaching. As noted by
articulate the key design goals that influenced research, algorithm visualization not only
our project, incorporating educational engages students but also provides them with
principles and usability standards into it. better comprehension of intricate ideas
presented in a complicated form by describing
concepts through seeing rather than reading.
These instruments facilitate active learning
Introduction whereby the learners can try out varying inputs
and parameters and modify the learning
Data structures and algorithms are key
according to individual preferences. It should
components of computer science education that
be noted that, researchers have proved time and
are always in the syllabus of any computer
again that, the use of interactive algorithms is
scientist or programmer in the making. Having
far better than non-interactive ones[2].
these concepts is important as they are the
building blocks of software development and Much attention was paid to the terminology
computational problem solving. In recent and the practice apparatuses and techniques
decades, however, with higher education applications of AV tools in the last few
systems, particularly in Central Europe, decades. One can note such systems as BALSA
witnessing an increase in enrollment of by Brown and Sedgewick in the ’80s as the
students, there has been a growing demand to first steps in this direction. Further, with
embrace new teaching techniques to engage technological advancement, many systems
students and enhance their learning including TRAKLA2, ANIMAL, JAWAA, and
outcomes[1]. There are some traditional Algorithms in Action have come up with better
practices, such as using whiteboards and slides graphics and interaction[3]. So these remained
to teach the algorithms, which have been in the computer science education systems as
working but may now be outdated and essential and much practical methods rather
ineffective for so many students today, than just reading textbooks.
particularly because of the rise of online
Les outils AV interactifs s’inscrivent Factors such as interactivity, ease of use, and
également dans le cadre de l’apprentissage the opportunity to personalize individual
autonomisé, une approche qui fait beaucoup de learning experiences have all been cited as
progrès dans l’enseignement de sciences critical in the success of such tools [5]. Indeed,
informatiques. Un autre avantage des empirical studies have shown that features such
visualisations interactives est qu’elles as interactive prediction facilities, which enable
permettent aux étudiants de contrôler leur a learner to predict the next step in the
rythme d’apprentissage, d’aborder les execution of the algorithm, make the process
algorithmes avec des points de vue divers et to more attractive due to active learning and
shuttle between complex ideas whenever they critical thinking, make actual contributions to
feel complicated. It is a common fact that the didactical impact.
use of visual materials improves the retention
of complex subjects amongst students, Indeed, the method has its advantages but it
allowing them to elaborate intricate ideas with introduces implementation challenges by
ease. These tools provide more than just breaking algorithms down into steps that might
tracking the steps in an algorithm using static make them too simple to execute. In practice,
pictures; they enable students to conduct the step-by-step breakdown may sometimes
algorithms and see how they work in principle, deviate from the standard techniques used in
resulting in more effective learning of the real implementations of algorithms— striking a
algorithms. note of potential confusion for learners if and
when they confront the real-world complexity
Furthermore, the integration of ICT tools has of coding algorithms. Hence, AV tools should
resulted in the emergence of e learning be seen as a supplement to, and not a
applications with these interactive features replacement for, traditional teaching methods,
making them available to a wider audience. In especially when it comes to teaching the
this way, the AV tools have been simplified practical aspects of algorithm implementation.
and focused on learners, offering opportunities
for formative assessment and enabling learners We discuss the ability of Algorithm
to participate in the learning processes rather Visualization tools to transform Computer
than be mere recipients of information [9]. In Science education, especially under online
addition, the scope of educational AV aids is teaching conditions. We consider the
not restricted to algorithms but includes other pedagogical and technical prerequisites for
areas such as data structures, trees, graphs, and building useful AV tools. This project extends
software engineering. the existing work and tools to add features that
suit beginners and advanced learners. We
The educational benefits of algorithm intend to build a system that promotes not only
visualization are well proven through many algorithm visualization but also active student
empirical evaluations. For example, a meta- engagement through interaction and
study comprising 24 experimental studies exploration. Developing suitable interactive
confirms that AV tools significantly improve visualizations for the algorithms therefore
learning outcomes when used effectively. equips the body of professionals now standing
in need of more effective pedagogical solutions availability of the quality learning
for a rapidly changing computer science field. environments.

In another example, the Dynamic Algorithm

Visualization Environment (DAVE) was
Related Work developed by Vrachnos et al. DAVE is a
framework that enables students to choose
Over the last ten years, the creation of different algorithms and visualize them at the
algorithm visualization (AV) tools has same time[6]. First, DAVE is implemented in
continued to attract increased interests from such a way that students can change parts of
practitioners and scholars alike. Several factors the algorithm’s code while it is running and can
can account for this increase in interest and one see the related effect on the screen straight
of them is the progress in technology, more so away. This is a dynamic feature allowing
the uptake of HTML5[6]. This particular students to view algorithms in a more hands-on
technology allows to leverage the potential of approach; it assists in comprehending the
high-quality graphics through a web browser as necessary logical steps and algorithmic forms.
there are fully functional AV tools, that are Since changes and observations are done in
web-centric, and can be accessed through real time in DAVE, AV tools including DAVE
personal computers, tablets, and use real time learning and allow learners to test
smartphones[7]. In as much as web browsers algorithms as opposed to simply observing
become more advanced, functioning as a their performance.
gateway for applications, so do web-based
learning environments in the context of Other acknowledged audio-visual tools include
education[6]. They have become more JSAMBA, Animal, Jawaa, Jeliot, JHavé,
important in providing interactive and more Trakla2, and Alvis, who design tools for
engaging learning environments which are presenting basic actions associated with
easier to access. algorithms and data structures rather than their
low-level program implementations [8]. This
One such tool is the Data Structure level of abstraction is useful in the first phases
Visualization (DSV), an open-source web- of the learning process where the learners are
based audio-visualization tool created by the more interested in understanding the
University of San Francisco[9]. Programming algorithm’s logic than the algorithm’s memory
in JavaScript and HTML5, DSV offers addresses or invocations.
interactive animations and complex data
structure visualizations over newer browsers However, the success of AV tools in education
and mobile platforms including iOS devices depends not only on their ability to represent
such as iphone and ipad. Because this algorithms but also on how students interact
technology is widely used, students are able to with these visualizations. Saraiya identifies
interact with many educational materials from several effective features that an ideal AV tool
different devices which increases the should possess, such as the ability to control
the pace of the visualization and provide a
comprehensive data set that covers all edge explanations of each visualization step, and the
cases for better understanding[10]. Saraiya incorporation of quizzes with feedback to both
further suggests that even a simple AV tool students and educators.[14] Such features
with minimal features can be sufficient for enhance active learning because students can
students to grasp the procedural understanding manage the speed of their learning and get
of an algorithm. To facilitate a more conceptual feedback in real-time, both of which have been
understanding, additional features like an found to enhance understanding and recall.
activity guide to encourage deeper analysis and
a pseudocode display of the algorithm can On top of that, Av tool effectiveness is greatly
prove invaluable. However, measuring the influenced by the usability goals. Important
effectiveness of these features is complex and factors in favor of the successful acceptance of
can vary across different learning contexts . AV tools are such as user friendliness, less
time to learn and adoption to the course
Another key consideration in AV tool content. Once AV tools are designed to be
development is student engagement. simple and intuitive, students will be able to
Hundhausen et al. [11]emphasize that the spend more time conceptualizing the
primary aim of AV should be to promote active algorithms rather than learning how to operate
experimentation and to support the the tool. Moreover, the ability to support
construction of mental models for abstract interaction with an IDE helps students to
programming concepts. This approach not only visualize how the work is done and how the
influences students’ algorithmic thinking but code is structured, hence, it promotes better
also aids in the development of problem- understanding of the subject content [15].
solving skills . Their meta-study of 24
investigations on AV tools concluded that the Recently, however, research into AV tools has
manner in which students engage with AV also suggested desirable but not obligatory
environments is more critical than the enhancement tools for improving AV tools’
visualizations themselves[12]. AV tools are pedagogical effectiveness. For example,
most effective when students are actively presenting efficient and effective execution
engaged with the learning process, such as information, different input parameters, and
through interactive elements, prediction explanatory texts are known to promote
features, and opportunities for hands-on learning . Such measures allow students to
experimentation. analyze the algorithm better as they receive
feedback from their performance on the
In addition to engagement, researchers have algorithm, which is important for problem-
highlighted the importance of pedagogical and solving ability development. [16].
usability requirements in the design of AV
tools[13]. For example, pedagogical Simple animations or passive visualizations
requirements, as outlined in studies like those may garner many criticisms dealing mainly
by Saraiya and Vrachnos et al., include features with the assumed small effect on learning.
like the ability to navigate forward and Hundhausen et al. [11] contend that unless
backward in the animation, hypertext-based subjected to active engagement, such tools
would be ineffective in being able to achieve animations so that users could
meaningful educational outcomes. This further comprehend the word.
emphasizes the importance of AV tool design
○ Learners of different
that conveys not pure visualizations, but rather
prompts interaction and development of critical capabilities: With our
thinking. Also, with the future developments of visualizer, students are able to
AV systems, care must be taken to include
experiment with different
features that promote interactivity,
personalized feedback, and real-time input complexities as well as different
from students to further engage them and offer datasets so that one can work at
a richer experience of learning.
his/her leveling learning style.

Methodology
● Usability Goals:
We took great care in designing our audio- ○ Ability To Learn and
visual tool with the goal of improving the Remember: We designed all of
interaction and experience of users as well as
our visualizations to have the
their enjoyment of the tool and its learning
materials. same comprehensible and
intuitive interface in order for
Design Considerations
students to quickly learn how to
● Pedagogical Goals: use the tool and remember its
○ Increased Understanding:
use.
Visual and textual information
○ Ease of Learning: For quick
was combined in our tool, which
understanding, common
also had context-based assists
elements such as play, pause
and user data input capabilities
and reset buttons were
to increase interaction.
incorporated. Visuals were in
○ Active Learning
perfect harmony with the
Encouragement: Animations
included pseudocode for all the
have a zoom in factor, enabling
animations showing how the
users to control animation fast,
real code would look.
animate in a reverse fashion, or
step into parts of algorithm

● Accessibility Goals:
 ○ Global Perspective: The tool automatically with the ongoing
was made to be compatible on algorithm.
any platform so that learners
would be able to use any device
and all the tools would still be
updated.

User Interaction Design: We equipped our Java

tool with input windows for manual data,
HT C
adjustable form visualizations, and color to
User Back-end
mark important places. We ensured that
following Schneiderman’s golden rules of user
interface design, the user interaction with the
tool is straightforward, straightforward, and 2. Visualization Engine: It is the
component that creates and animates
simple to manoeuvre.
the algorithms. It supplies colored
graphics that help to visualize the
Implementation: The AV tool was built with
swapping of elements for sorting
JavaScript and HTML5 for creating web-based, algorithms, which makes it easier to
interactive animations. The technologies comprehend state changes.
3. Backend: This is the component that
enabled us to deploy a cross-platform solution
manages data including that which is
availed from all devices. We also made certain input by users, as well as the algorithms
that the design engine was able to manage that are run. This lets commands
various levels of algorithms without any directed by test subjects to the tool to be
properly responded to thus facilitating
performance impact.
the learning process

Proposed System Architecture

The architecture of our AV tool is built around

three primary components:

1. User Interface: This interface gives

people the option to choose the
algorithms, have a look at the visual
representation and other things like
pushing play or pause. Furthermore, we
embedded visualizations that show
pseudocode which are updated
Results

Fig 3: Path Finding Visualizer

Figure 1:Website front page

Fig 4: N-Queen Visualizer

Conclusion

From trouble, we learned that our AV tool

assists students in understanding algorithmic
concepts more efficiently, particularly when
stacked against other modes of learning.
Instead of passively viewing presents,
encouraged tools foster more interaction and
learning that is likely to be remembered.
Manipulating parameters and witnessing
changes as they occur made the entire learning
experience less boring and robotic to students.

From our observations, algorithm visualization

(AV) can be considered as an extra useful tool
in the teaching of computer science. Other
Figure 2: Sorting Visualizer means of teaching algorithms such as lectures,
reading through books, and practicing writing
code are still important, but making use of AV
tools makes the learning process easier for
students, as they are able to see and understand
how the algorithm resolves the problem at development, probably in a more integrated
hand. This work, for example, provided an AV tool that has focused vision on the teaching
overview of the VizAlgo platform, an AV tool of algorithms.
that enables this kind of learning and shared
practical experience with its use in educational Moreover, the further requirements for more
institutions. The findings from the student thorough evaluative studies of AV tools are
survey we conducted further substantiate that emphasized. Much of the evidence supporting
VizAlgo has a positive effect on the level of the use of algorithm visualization in education
education in this domain and assists in dealing is anecdotal or based on informal observations.
with some of the educational challenges faced While our questionnaire results are
in the higher learning institutions today. encouraging, more formal, large-scale studies
are needed to validate the pedagogical benefits
Nevertheless, the complete adoption of AV of AV tools like VizAlgo. Such studies could
tools into computer science education is also include longitudinal assessments of how AV
associated with some challenges and tools impact students’ ability to learn, retain,
limitations. While AV tools such as VizAlgo and apply algorithmic concepts, as well as their
can greatly help in understanding how problem-solving skills in practical settings.
algorithms operate, they should not be seen as
substitutes for real-world practice in the coding
and execution of those algorithms in the
References
language of choice. Students still need to work
with real code in order to develop the [1] C. A. Shaf er, M. Akbar, A. J. D. Alon, M.
appropriate problem- and error-solving Stewart, and S. H. Edwards, “Getting algorithm
techniques required of a computer scientist. visualizations into the classroom,” in
Proceedings of the 42nd ACM technical
An additional limitation we faced was the
symposium on Computer science education,
absence of any parametric AV tool,
2011
specialization of which would permit the user
to combine distinct visualization styles within
[2] Halim, S. (2011). VisuAlgo - visualizing
one interface and one platform. The majority of
data structures and algorithms through
AV tools, including VizAlgo, are too design-
animation. VisuAlgo. https://visualgo.net/e
specific and can be focused on only one-sided
tilted algorithms or data structures. This
[3] M. L. Cooper, C. A. Shaf er, S. H.
dispersion often makes it necessary for students
Edwards, and S. P. Ponce, “Open source
and educators to shift between different tools in
software and the algorithm visualization
order to visualize a particular algorithm, hence
community,” Sci. Comput. Program., vol. 88,
creating a disjointed learning regime. Although
pp. 82–91, 2014.
VizAlgo appears as an effective step already, it
appears that it does not bring the hope of being
[4] S. Šimoňák, “Using algorithm
the single stop shop for algorithm visualization.
visualizations in computer science education,”
This is, however, a potential area for further
Open Comput. Sci., vol. 4, no. 3, pp. 183–190, [12] C. D. Hundhausen and J. L. Brown, “What
2014. You See Is What You Code: A ‘live’ algorithm
development and visualization environment for
[5] D. Borissova and I. Mustakerov, “E- novice learners,” J. Vis. Lang. Comput., vol.
learning tool for visualization of shortest paths 18, no. 1, pp. 22–47, 2007.
algorithms,” Tren. J. Sci. Res., vol. 2, no. 3, pp.
84–89, 2015. [13] D. Hundhausen, S. Douglas, and J. Stasko,
“A metastudy of algorithm visualization
[6] E. Vrachnos and A. Jimoyiannis, "Design effectiveness,” Journal of Visual Languages
and evaluation of a web-based dynamic and Computing, vol. 3, no. 3, pp. 259–290,
algorithm visualization environment for 2002.
novices," Procedia Computer Science, vol. 27,
pp. 229-239, 2014. [14] E. Vrachnos and A. Jimoyiannis, “Design
and evaluation of a web-based dynamic
[7] S. S. A. Naser, “Developing Visualization algorithm visualization environment for
Tool for Teaching AI Searching Algorithms,” novices,” Procedia Comput. Sci., vol. 27, pp.
Information Technology Journal, vol. 7, no. 2, 229–239, 2014.
pp. 350–355, 2008.
[15] G. Robling and T. L. Naps, “A testbed for
[8] J. P. Guo, "Online Python Tutor: pedagogical requirements in algorithm
Embeddable Web-Based Program visualizations,” in Conference on Innovation
Visualization for CS Education," in SIGCSE and Technology in Computer Science
Technical Symposium on Computer Science Education, New York, USA, 2002.
Education, New York, USA, 2012.
[16] J. Urquiza-Fuentes and J. Á. Velázquez-
[9] E. Fouh, M. Akbar, and C. A. Shaffer, “The Iturbide, “Toward the effective use of
role of visualization in computer science educational program animations: The roles of
education,” Comput. Sch., vol. 29, no. 1–2, pp. student’s engagement and topic complexity,”
95–117, 2012. Comput. Educ., vol. 67, no. C, pp. 178–192,
2013.
[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.