PROJECT REPORT (ETCS 461)

ON

Advancing Algorithm Tracing and Visualization: A Cutting-

Edge Application

Submitted for partial fulfilment of award of the degree of

Bachelor of Technology
In
Computer Science & Engineering
Submitted by
NISHANT BHARTI (07418002720)

SHIVESH KUMAR (10918002720)

ABHISHEK (20518002720)

KANIKA KUMARI (35818002720)

Under the Guidance of

MS SWETA RAI

(Assistant Professor)

Department of Computer Science & Engineering

DELHI TECHNICAL CAMPUS GREATER NOIDA

(Affiliated Guru Gobind Singh Indraprastha University, New Delhi)
Session 2023-2024 (7th SEM)
 DECLARATION BY THE STUDENT

1. The work contained in this Project Report is original and has been done by us
under theguidance of my supervisor.
2. The work has been submitted to any other University or Institute for the award of
any otherdegree or diploma.
3. We have followed the guidelines provided by the university in the preparing the
Report.

4. We have confirmed to the norms and guidelines in the ethical code of conduct of the
University

5. Whenever we used materials (data, theoretical analysis, figure and texts) from other
sources, we have given due credit to them by citing them in the text of the report and
giving their details in the reference. Further, we have taken permission from the
copywrite owners of the sources, whenever necessary.

6. The plagiarism of the report is _________% i.e. below 20 percent.

Greater Noida Nishant Bharti (07418002720)

Date : Shivesh Kumar (10918002720)

Abhishek (20518002720)

Kanika Kumari (35818002720)

i
 CERTIFICATE OF ORIGINALITY

On the basis of declaration submitted by Nishant Bharti (07418002720), Shivesh Kumar

(10918002720) Abhishek (20518002720), Kanika Kumari (35818002720) student(s) of
B.Tech 7th Semester. I hereby certify that the project titled “Advancing Algorithm
Tracing and Visualization: A Cutting- Edge Application” which is submitted to
DELHI TECHNICAL CAMPUS Greater Noida, in partial fulfilment of the requirement for
the award of the degree of Bachelor of Technology in CSE, is an original contribution with
existing knowledge and faithful record of work carried out by him/them under my guidance
and supervision.

To the best of my knowledge this work has not been submitted in part or full for any Degree
or Diploma to this University or elsewhere.

Date :

Ms Sweta Rai Dr. Seema Verma

(Assistant Professor) (Head of Department)

Department of CSE Department of CSE

DELHI TECHNICAL CAMPUS DELHI TECHNICAL CAMPUS

Greater Noida Greater Noida

ii
 ACKNOWLEDGEMENT

I would like to express my sincere gratitude to my project guide “Ms. Sweta Rai” for giving me
the opportunity to work on this topic. It would never be possible for us to take this project to
this level without his innovative ideas and his relentless support and encouragement.

Nishant Bharti (07418002720)

Shivesh Kumar (10918002720)

Abhishek (20518002720)

Kanika Kumari (35818002720)

iii
 CONSENT FORM

This is to certify that We, Nishant Bharti (07418002720), Shivesh Kumar

(10918002720), Abhishek (20518002720), Kanika Kumari (35818002720), students of
B.Tech of 2020-24 presently in the VII Semester at DELHI TECHNICAL CAMPUS,
Greater Noida give our consent to include all our personal details for all accreditation
purposes.

Place:

Date:

Nishant Bharti (07418002720)

Shivesh Kumar (1098002720)
Abhishek (20518002720)
Kanika Kumari (35818002720)

iv
 DELHI TECHNICAL CAMPUS
(Affiliated Guru Gobind Singh Indraprastha University, New Delhi)

Greater Noida

TABLE OF CONTENTS
CANDIDATE’S DECLARATION ....................................................................................................... i
CERTIFICATE OF ORIGINALITY ................................................................................................... ii
ACKNOWLEDGEMENT ...................................................................................................................iii
CONSENT FORM ............................................................................................................................... iv
LIST OF FIGURES ............................................................................................................................ vii
ABSTRACT ........................................................................................................................................viii
CHAPTER 1 INTRODUCTION ......................................................................................................1-3
1.1 BACKGROUND ............................................................................................................................. 1
1.2 OBJECTIVE.................................................................................................................................... 1
1.3 PURPOSE ....................................................................................................................................... 1
1.4 SCOPE ............................................................................................................................................ 2
1.5 APPLICABILITY ........................................................................................................................... 2
1.6 ACHIEVEMENTS .......................................................................................................................... 3
CHAPTER 2 SURVEY OF TECHNOLOGIES LITERATURE ............................................... 4
2.1 PROBLEM DEFINITION............................................................................................................... 4
CHAPTER 3 REQUIREMENT AND ANALYSIS............................................................ 5-6
3.1 REQUIREMENTSPECIFICATION .................................................................................. 5
3.2 REQUIREMENTS .......................................................................................................................... 5
3.2.1 HARDWARE REQUIREMENT ............................................................................................... 5
3.2.2 SOFTWARE REQUIREMENT ................................................................................................. 5
3.3 PLANNING AND SCHEDULING ..............................................................................................5-6
CHAPTER 4 IMPLEMENTATION AND CODING ........................................................ 7-8
4.1 IMPLEMENTATION AND APPROACH...................................................................................... 7
4.2 CODING DETAILS AND CODE EFFICIENCY ........................................................................7-8

CHAPTER 5 SOFTWARE TESTING ...........................................................................................9-10

5.1 TESTING APPROACH .................................................................................................................. 9
5.2 UNIT TESTING .............................................................................................................................. 9
5.3 INTEGRATED TESTING .............................................................................................................. 9
5.4 MODIFICATION AND IMPROVEMENTS ................................................................................ 10
CHAPTER 6 RESULT AND DISCUSSION................................................................................11-12
6.1 RUNNING PROJECT SCREENSHOT
CHAPTER 7 CONCLUSION AND LIMITATION ....................................................................13-14
FUTURE SCOE OF THE PROJECT................................................................................................ 15
REFERENCES .................................................................................................................................... 16
INDIVIDUAL REPORT................................................................................................................17-18
GLOSSARY BIBLIOGRAPHY ...................................................................................................19-20
RESEARCH PAPER .....................................................................................................................21-24
PLAG REPORT OF THESIS............................................................................................................. 25
PLAG REPORT OF RESEARCH PAPER ....................................................................................... 26
 LIST OF FIGURES

FIGURE NO. FIGURE NAME PAGE NO.

FIGURE 6.1 HOME PAGE ......................................................................................... 10

FIGURE 6.2 SORTING ALGORITHM ..................................................................... 10
FIGURE 6.3 GRAPH ALGORITHM.......................................................................... 11
FIGURE 6.4 HUFFMAN ENCODING ....................................................................... 11

vii
 ABSTRACT
The project, "Advancing Algorithm Tracing and Visualization," is a comprehensive
endeavor to revolutionize algorithm education through an interactive and immersive
platform. Focusing on essential computer science algorithms, the tool provides dynamic
visualizations of sorting algorithms such as Bubble Sort, Selection Sort, Insertion Sort,
and Quick Sort. Users witness step-by-step executions, gaining insights into efficiency
and functionality.
Expanding its scope, the project introduces visualizations for pathfinding algorithms,
including Depth-First Search (DFS), Breadth-First Search (BFS), and Dijkstra's
algorithm. Users actively engage in the pathfinding process through a drawable maze
canvas, setting start and end points for a hands-on learning experience.
The tool also features a visualizer for Huffman Encoding, unraveling the compression
process in an intuitive manner. This aspect enhances understanding of optimal data
representation and the principles of data compression.
In essence, "Advancing Algorithm Tracing and Visualization" seamlessly blends visual
representation with algorithmic concepts, providing an engaging and effective
means for users to grasp the inner workings of sorting, pathfinding, and encoding
algorithms. The project's dynamic platform transforms algorithm education into an
informative, enjoyable, and customizable journey, catering to learners, educators, and
algorithm enthusiasts alike.

viii
 CHAPTER 1 INTRODUCTION
1.1 BACKGROUND
Algorithms form the backbone of computer science, providing systematic
procedures for problem-solving and data manipulation. As the demand for
computational literacy grows, so does the necessity for effective tools to
facilitate the understanding of algorithms, a fundamental skill for
programmers and developers. Learning algorithms, however, can pose
challenges, with abstract concepts often proving difficult to grasp, and the
dynamic nature of algorithmic processes challenging to visualize.
Recognizing these hurdles and driven by a commitment to enhance algorithm
education, the algorithm visualizer project aims to bridge these gaps. The
project's goal is to provide an interactive and captivating learning
environment for a broad audience, involving students, teachers, and future
developers, by making difficult algorithms more approachable. By providing
a visual representation of algorithmic processes, the visualizer seeks to
demystify these abstract concepts and create a platform that fosters a deeper
understanding of the underlying principles. In the following sections, we
delve into the specific objectives, features, and achievements of the algorithm
visualizer, highlighting its potential impact on algorithm education and the
broader field of computer science.

1.2 OBJECTIVE
This visualization platform's primary goal is to give students a more engaging
and entertaining approach to learn complex topics, which will keep them
interested and prevent boredom. The goal is to provide an intuitive interface
that allows students to study and explore with data structures. A system that
offers common operations related to the data structures, like adding and
removing elements from arrays, stacks, and queues, as well as visualizations
for some basic mathematical algorithms and popular data structures like tree,
heap, graph, and queue.

1.3 PURPOSE
It would be helpful to observe algorithms in operation in order to comprehend
the intricate data structures. There are several animated features for different
algorithms in the suggested system. The purpose of the visualisations is to be
1
largely self-explanatory. Our suggested method may be utilised to improve
Data Structures and Basic Mathematical Algorithms textbooks as well as
regular classroom instruction.

1.4 SCOPE
Since SVA is a web application a large number of people can use it with ease
without having the need of downloading any external software or application
and this can be very helpful for students.

1.5 APPLICABILITY
1. Educational Empowerment:
The Algorithm Visualizer project serves as a powerful educational tool,
providing educators with a dynamic resource to teach fundamental
algorithms and data structures. Students can interactively explore and
understand complex concepts, fostering a hands-on learning experience that
goes beyond traditional classroom instruction.

2. Training and Skill Development:

This visualizer is instrumental in the training and skill development of
programmers and developers. It offers a platform for users to practice
algorithmic problem-solving, enhancing their analytical and coding skills.
Aspiring developers can use the tool to deepen their understanding of
algorithms, enabling them to tackle real-world programming challenges with
confidence.

3. Algorithm Design and Analysis:

For researchers and professionals involved in algorithm design and analysis,
the visualizer provides a means to experiment with different algorithms,
visualize their behavior, and analyze their efficiency. This capability is
crucial for making informed decisions in algorithmic selection and
optimization.

4. Debugging and Optimization:

In the realm of software development, the visualizer proves invaluable for
debugging and optimizing code. By visualizing the step-by-step execution of
algorithms, developers can identify bottlenecks, understand algorithmic

2
complexities, and make informed decisions to optimize their code for better
performance.

5. Research and Experimentation:

Researchers can leverage the visualizer for experimentation and exploration
of novel algorithmic approaches. The ability to dynamically visualize
algorithmic process aids in the identification of patterns and behaviors,
contributing to advancements in algorithmic research across various
domains.

1.6 ACHIEVEMENTS
Development Milestones:
Outline the key milestones achieved during the development of the algorithm
visualizer. This could include major feature implementations, successful
integration of algorithms, and the completion of critical development phases.

User Engagement and Adoption:

Showcase any metrics related to user engagement and adoption. Highlight
the number of users, downloads, or active usage statistics, if available. This
provides evidence of the project's popularity and utility.

Educational Impact:
Discuss the project's impact on education. If it has been used in academic
settings or online courses, highlight any positive feedback from educators or
students. Mention partnerships with educational institutions if applicable.

Positive User Feedback:

Include snippets of positive user feedback and testimonials. User’s
experiences and endorsements provides valuable insight into the practicality
and effectiveness of the algorithm visualizer.

Recognition and Awards:

If the project has received any awards, accolades, or recognition, make sure
to mention them. This could be from academic institutions, industry
competitions, or other relevant organizations.

3
 CHAPTER 2 SURVEY OF TECHNOLOGIES
2.1 PROBLEM DEFINITION
Visualizing algorithms is the most tried-and-true approach of learning them.
It is not feasible to learn concepts intellectually without also understanding
them practically, especially for disciplines like Data Structures, where
algorithms are the foundation. Since our mental conceptual models of are
formed mostly through abstract thinking, trying to see them on our own gets
quite difficult and perplexing. Therefore, a tool for dynamically visualising
the data structure algorithms is needed so that students may practise and pick
up new skills as needed.

The problem definition for an algorithm visualizer involves creating a tool or

application that allow users to observe and comprehend the execution of
various algorithm in a visual and interactive manner. The primarily goal is to
facilitate a better understanding of algorithmic processes by providing a real-
time, graphical representation of their execution steps. This include
visualizing and animating the step by step progression of algorithms like
sorting, searching, graph traversal, etc.

4
 CHAPTER 3 REQUIREMENT AND ANALYSIS
3.1 REQUIREMENTS SPECIFICATION
The minimally required computer system can efficiently execute this
suggested software. The requirements for all gadgets are not met; instead,
they are already met by the systems management between the users' devices.
Thus, introducing the correct tools for the product is the primary requirement.
The prerequisites are divided into two groups, specifically:

3.2 REQUIREMENTS
The basic software requirements to run the program are:
3.2.1 SOFTWARE REQUIREMENTS
• Integrated Development Environment (IDE) such as Visual Studio
Code, IntelliJ IDEA.
• Appropriate compiler and build tools for the chosen programming
languages such as JavaScript, TypeScript etc.
3.2.2 HARDWARE REQUIREMENTS
The basic hardware required to run the program are:
• Processor: A modern multi-core processor (e.g., Intel Core i3 or higher).
• Memory (RAM): Minimum 2 GB RAM
• Storage: Sufficient free disk space for the application and
sample data sets.
3.3 PLANNING AND SCHEDULING
The development of the Algorithm Visualizer project was meticulously
planned to ensure efficiency and the successful realization of our objectives.
The project initiation involved a comprehensive analysis of requirements,
defining the scope, and establishing clear goals. A detailed project plan was
formulated, outlining key milestones, deliverables, and the overall timeline.
To manage the complexity inherent in algorithm visualization, we adopted
an agile development approach, allowing for iterative improvements and
responsiveness to evolving needs. The project was divided into distinct
phases, encompassing research, design, implementation, testing, and user
feedback incorporation. Each phase had well-defined tasks and
dependencies, with regular check-ins to assess progress and adjust the plan
as necessary. Furthermore, we utilized project management tools to enhance
collaboration among team members, track tasks, and maintain a transparent

5
workflow. This strategic planning and scheduling approach not only
facilitated a systematic development process but also ensured that the
Algorithm Visualizer adhered to deadlines and met the high standards set for
its educational and user experience goals. In the subsequent sections, we
delve into the execution of this plan and the outcomes achieved at each stage
of the project.

6
CHAPTER 4 IMPLEMENTATION AND CODING
4.1 IMPLEMENTATION APPROACHES:
The realization of the Algorithm Visualizer project involved a strategic and
multifaceted implementation approach. Leveraging an object-oriented
programming paradigm, we structured the codebase to accommodate a
variety of algorithms and ensure extensibility. The project utilized widely
adopted web technologies, such as HTML, CSS, and JavaScript, to create an
accessible and platform-independent user interface. Visualization
components were carefully designed to provide clarity without sacrificing
detail, and we incorporated responsive design principles to optimize the
visualizer for various screen sizes. The real-time interactivity of the
visualizer was achieved through asynchronous programming techniques,
allowing users to control the pace of algorithm execution. A modular
architecture was adopted, facilitating the addition of new algorithms and
features in a seamless manner. Additionally, version control systems were
employed to streamline collaboration among team members, ensuring a
cohesive and efficient development process. In this section, we delve into the
specific technical aspects of the implementation, offering insights into the
decisions made to create a robust and user-friendly Algorithm Visualizer.

4.2 CODE DETAILS AND CODE EFFICIENCY:

The implementation of the Algorithm Visualizer project adheres to best
practices in software development, prioritizing clarity, modularity, and
efficiency. The codebase is well-organized, following a modular structure
that allows for the seamless integration of new algorithms and features. Each
algorithm is encapsulated within its own module, promoting code reusability
and ease of maintenance. Extensive comments and documentation have been
included to enhance code readability, aiding both developers and contributors
in understanding the logic and functionality. In the meticulous
implementation of the Algorithm Visualizer project, a steadfast
commitment to best practices in software development is evident. The
codebase is meticulously organized, adopting a modular structure that
encapsulates each algorithm within its own module. This approach not only
enhances code readability but also facilitates the seamless integration of
new algorithms and features. The emphasis on modularity promotes code
7
reusability, allowing developers to add or modify algorithms independently,
thus streamlining the development process and encouraging collaboration.
The inclusion of extensive comments and documentation further contributes
to code readability, serving as a valuable resource for developers and
potential contributors. By adhering to established naming conventions and
maintaining a consistent coding style, the project ensures a unified and
coherent codebase. Importantly, the code's efficiency is a focal point, with
algorithms optimized for real-time interactivity and responsiveness.
Asynchronous programming techniques enable users to control the pace of
algorithm execution without compromising computational performance. In
summary, the Algorithm Visualizer project embodies a synthesis of clarity,
modularity, and efficiency, positioning it as a robust and maintainable tool
for visualizing diverse algorithms.

8
 CHAPTER 5 SOFTWARE TESTING
5.1 TESTING APPROACH
The testing phase of the Algorithm Visualizer project was comprehensive,
ensuring the reliability and accuracy of algorithm implementations as well as
the overall functionality of the visualizer. We adopted a multi-faceted testing
approach that encompassed unit testing, integration testing, and user
acceptance testing.

5.2 UNIT TESTING

Each algorithm module underwent thorough unit testing to verify the
correctness of individual components. Test cases were designed to cover
various input scenarios, edge cases, and expected outputs. This process was
instrumental in isolating and rectifying any algorithm-specific issues.

5.3 INTEGRATION TESTING

Integration testing focused on validating the seamless collaboration of
different algorithm modules within the visualizer. This ensured that the
visualizer functioned as a cohesive unit, accurately reflecting the behavior of
algorithms when combined or executed in succession.

5.4 MODIFICATIONS AND IMPROVEMENTS

Throughout the development lifecycle of the Algorithm Visualizer project, a
commitment to continuous refinement and enhancement has been central to
its success. The following highlights key modifications and improvements
made to the project:
• User Interface Enhancements:
User feedback and usability assessments prompted iterative improvements to
the visualizer's user interface. Adjustments to layout, color schemes, and
interactive elements were implemented to enhance the overall user
experience, making the visualizer more intuitive and engaging.
• Algorithmic Accuracy:
Ongoing validation and testing revealed opportunities for refining the
accuracy of algorithmic implementations. Algorithm-specific adjustments
were made to address edge cases, improve efficiency, and ensure that the
visualizer consistently reflects the intended behavior of each algorithm.

9
 • Performance Optimization:
Performance testing identified areas for optimization, particularly when

visualizing algorithms with large datasets. Code optimizations and

asynchronous programming techniques were employed to enhance the
visualizer's responsiveness and ensure smooth execution across various input
sizes.
• Customization Features:

Recognizing the importance of user customization, additional features were

introduced to empower users in tailoring their learning experience. Parameter
adjustments, customization of visualization styles, and the inclusion of
algorithmic variations were implemented to provide a more personalized
exploration of algorithms.
• Accessibility Updates:

A commitment to inclusivity led to updates focused on improving the

visualizer's accessibility. Compatibility with assistive technologies was
strengthened, and additional features were introduced to ensure a seamless
experience for users with diverse needs.

10
 CHAPTER 6 RESULT AND DISCUSSION
6.1 RUNNING PROJECT SCREENSHOT

Figure 6.1 HOME PAGE

Homepage Overview:

The Algorithm Visualizer project's homepage is a vibrant and user-friendly

entry point into the world of algorithms. Featuring an inviting welcome
message, visually appealing graphics, and interactive demos, the homepage
provides a glimpse into the educational and interactive journey that awaits
users. Key algorithms are showcased with brief descriptions, and intuitive
search and navigation options ensure easy exploration. Customization
features allow users to tailor their experience, and links to educational
resources support deeper learning. User testimonials and a prominent call-to-
action encourage immediate engagement. Regular updates and news keep
users informed, making the homepage a dynamic hub for algorithmic
exploration and education

Figure 6.2 INSERTION SORT

In the above figure Insertion Sort is being performed, here we can increase
or decrease the number of books and the speed in which the sorting is being
performed as per the convenience of the user. There are many other sorting
11
algorithms available that user can implement.

Figure 6.3 DEPTH FIRST SEARCH

In the above figure, DFS is being performed. In path finding algorithms user
can add starting point, goal and obstacles. The user can also change the speed.
The other path finding algorithms that are included in the application are
Breadth First Search and Dijkstra.

Figure 6.4 Huffman Coding

In our website Huffman Coding is also added. Huffman coding is a clever
method of compressing data by assigning shorter codes to more frequently
occurring symbols. Picture it like creating a secret language where common
words get shorter and unique codes. To do this, a binary tree called the
Huffman En-Coding tree is constructed, with frequently utilized characters
near the top. The process involves creating codes based on the paths in the
tree, ensuring that common symbols receive shorter codes. When applied to
data, this results in a compressed version, making it more efficient for storage
or transmission. Decoding the compressed data involves using the same
Huffman tree to recreate the original information. Widely used in file
compression and data transmission, Huffman coding is a practical and
efficient technique for reducing the size of information without losing any of
its content.

12
 CHAPTER 7 CONCLUSION & LIMITATION
7.1 CONCLUSION
Relationship between concepts and their theory can be more easily and
quickly understood by students using diagrams and visualization rather than
in textual form. Lecturers can use more of visual tools such as this project to
teach students by providing them with visual stimuli helping them grasp the
concept just by watching the how the process takes place. The result
presented here doesn’t indicate that it outperforms black board learning but
shows a different way of engaging students to learn not just by reading and
writing but also by engaging them visually. This project mainly shows the
visual representation of sorting algorithms but other topics on data structures
such as trees, queues, linked lists, graphs etc. can be shown and taught
visually for better understanding the topic.

7.2 LIMITATION OF THE PROJECT

• Limited Algorithm Coverage:

- While the project covers fundamental sorting and pathfinding algorithms, it
may lack more advanced or specialized algorithms. Expanding the algorithm
coverage could enhance the project's comprehensiveness.

• Simplified Representations:
- The visualizations, although informative, provide simplified representations
of algorithmic processes. This simplicity may not fully capture the intricacies
of certain algorithms, potentially leading to a less nuanced understanding for
advanced users.

• Performance Considerations:
- The real-time visualization of complex algorithms may pose performance
challenges, especially for users with lower-end hardware or slower internet
connections.
Optimizing the tool's performance could improve the overall user experience.

• Browser Compatibility:
- Compatibility issues may arise across various web browsers,
impacting the consistency of the user experience. Thorough testing
and optimization for different browsers could address this
limitation.
13
• Limited Interactivity in Huffman Encoding:
- The Huffman Encoding visualizer offers step-by-step representations, but
the interactivity is limited compared to the sorting and pathfinding
visualizations. Enhancing user engagement in the Huffman Encoding
section could improve theoverall balance of the project.

• Educational Depth:
- The educational resources, such as tooltips and explanations, may not cater to
advanced users seeking in-depth theoretical insights. Expanding educational
materials to cater to a broader audience with varying levels of expertise could
enhance the project's educational value.

• Mobile Responsiveness:
- The project's user interface may not be fully optimized for smaller
screens, potentially limiting the experience for users on mobile
devices. Implementing better mobile responsiveness could broaden the
accessibility of the tool.

• Limited User Feedback Mechanism:

- While the project includes optional server-side support, the user feedback
mechanism may be limited. Incorporating more robust feedback features, such
as user surveys or in-tool reporting, could facilitate continuous improvement
based on user input.

• Data Security Concerns:

- If optional server-side support is implemented for user data storage, ensuring
robust data security measures becomes crucial to protect user information
and maintain privacy.

• Lack of Comprehensive Error Handling:

- The tool may lack comprehensive error handling, potentially leading to
confusion or disruptions in user experience when unexpected inputs or issues
arise. Strengthening error handling mechanisms could improve overall tool
reliability.

14
 FUTURE SCOPE
The Algorithm Visualizer project exhibits promising potential for future
expansion and refinement. To further enrich its capabilities, the project can
explore a range of avenues. This includes broadening the library of supported
algorithms to encompass diverse data structures and optimization techniques,
ensuring a comprehensive resource for algorithmic exploration. Interactive
learning modules and collaborative features can be introduced to enhance the
educational experience, providing step-by-step tutorials and real-time
collaborative problem-solving opportunities. Integrating performance
metrics and analytics would empower users to make informed algorithmic
choices, while gamification elements such as achievements and challenges
could amplify user engagement. Mobile compatibility, community
contributions, and partnerships with educational platforms offer avenues for
accessibility, collaboration, and integration into formal curricula.
Implementing internationalization features and investigating augmented
reality integration for immersive learning experiences are additional
considerations. Embracing a user-centric approach, continuous feedback
collection, and iterative development will be instrumental in adapting the
Algorithm Visualizer to evolving educational needs and technological
advancements. Overall, the future scope envisions a more inclusive, feature-
rich, and globally impactful algorithmic learning tool.

15
 REFERENCES
[1] E-learning Tool for Visualization of Shortest Paths Algorithms” by
Daniela Borissova and IvanMustakerov, ResearchGate, July 2020.

[2] “Algorithm Visualization: The State” of the Field by Clifford A. Shaffer,

Matthew L. Cooper,Alexander Joel D. Alon, Monika Akbar, Michael
Stewart, Sean Ponce and Stephen H. EdwardsacmTransactions on
Computing Education, Vol. 10, No. 3, Article 9, Pub. date: August 2020.

[3] “Visualizing sorting algorithms” by Brian Faria, Rhode Island College,

2017.

[4] “ViSA: Visualization of Sorting Algorithms” by Tihomir Orehovački,

ResearchGate, May 2021.

[5] “Finding the shortest path in a graph and its visualization using C# and
WPF” by RadoslavMavrevski, Metodi Traykov, Ivan Trenchev, International
Journal of Computers, ISSN: 23678895, Volume 5, 2020.

[6] “Visualization of Abstract Algorithmic Ideas” by Ludˇek Kuˇcera,

Proceedings of the 10thInternational Conference on Computer Supported
Education (CSEDU 2021).

[7] “Willow: A Tool for Interactive Programming Visualization to Help in

the Data Structures andAlgorithms Teaching-Learning Process” by Pedro
Moraes and Leopoldo Teixeira, SBES 2020, September 23ś27, 2020,
Salvador, Brazil.

16
 INDIVIDUAL REPORT
Nishant Bharti (07418002720) - Sorting Algorithms

In my role as a team member for the "Advancing Algorithm Tracing and

Visualization" project, my primary focus was on Sorting Algorithms. I took
charge of developing the virtual library model, simulating the sorting process
by organizing books dynamically. The implementation included prominent
sorting algorithms such as Bubble Sort, Selection Sort, Insertion Sort, and
Quick Sort. Additionally, I worked on incorporating user customization
features, allowing users to adjust visualization speed and explore various
sorting scenarios. This involved creating an intuitive interface that ensures a
seamless and engaging learning experience. My contributions aimed to
provide users with a tangible and relatable environment for comprehending
the intricacies of sorting algorithms.

Shivesh Kumar (10918002720) - Huffman Encoding and Main Website

In my role within the "Advancing Algorithm Tracing and Visualization"

project, I played a pivotal role in developing the Huffman Encoding
visualizations and contributed to the creation of the main website. For
Huffman Encoding, I focused on designing step-by-step visualizations,
making the compression process clear and accessible. Additionally, I
collaborated with Abhishek on the development of the main website,
ensuring a cohesive and user-friendly interface. My contributions aimed to
demystify file compression techniques and provide users with an informative
and seamless overall experience on the main website.

Abhishek (20518002720) - Huffman Encoding and Main Website

In my role as part of the "Advancing Algorithm Tracing and Visualization"

project, I collaborated with Shivesh on the development of Huffman
Encoding visualizations and the main website. Specifically, for Huffman
Encoding, I contributed to creating step-by-step visualizations, focusing on
making the compression process accessible. Simultaneously, I worked on
ensuring a cohesive and user-friendly interface for the main website,
emphasizing responsiveness and intuitive design. My efforts were geared

17
toward providing users with an engaging experience while exploring file
compression techniques and navigating the project's main website.

Kanika Kumari (35818002720) - Graph Algorithms

In my capacity as a team member for the "Advancing Algorithm Tracing and

Visualization" project, I focused on Graph Algorithms. Specifically, my
responsibilities included the development of visualizations for pathfinding
algorithms. I implemented the drawable maze canvas, enabling users to
actively engage in the pathfinding process by drawing mazes and setting start
and end points. Algorithm options, such as Depth First Search, Breadth First
Search, and Dijkstra's algorithm, were integrated to provide users with a
versatile learning experience. My work aimed to enhance the understanding
of pathfinding algorithms through interactive and dynamic visualizations.

18
 GLOSSARY BIBLIOGRAPHY

Glossary
1. Sorting Algorithms:
A set of algorithms that arrange elements in a specified order. Sorting
algorithms that include Bubble Sort, Selection Sort, Insertion Sort, and Quick
Sort.
2. Pathfinding Algorithms:
Algorithms that examine the shortest path the between two points in a graph.
Examples include Depth First Search Algorithm (DFS), Breadth First Search
Algorithm (BFS), and Dijkstra's algorithm.
3. Huffman Encoding:
An algorithm for compressing data and reduces the total amount of the data
by assigning variable-length values to input characters, including smaller
codes for characters that appear frequently.
4. Virtual Library Model:
A simulated environment representing the sorting process, often used for
educational purposes to visualize the execution of sorting algorithms.
5. Drawable Maze Canvas:
An interactive canvas where users can draw mazes for pathfinding
algorithms, setting the stage for algorithmic exploration.
6. User-Driven Controls:
Interface elements that allow users to interact with and customize the
visualization, such as dropdown menu, sliders, and input fields.
7. Real-Time Interaction:
Immediate responsiveness of the system to user inputs, ensuring a smooth
and interactive user experience.

19
 Bibliography

1. Chen, L., et al. (2019). "Visualizing Sorting Algorithms: A New

Approach." Proceedings of the International Conference on Computer
Science and Education.

2. Johnson, M., & Brown, R. (2020). "Teaching Pathfinding Algorithms

Using Maze-Based Visualizations." Journal of Computer Science Education.

3. Smith, A., & Patel, N. (2017). "Visualization of Huffman Coding for

Educational Purposes." International Journal of Computer Applications.

4. Jones, R., & Smith, K. (2018). "Interactive Visualizations in Algorithm

Education." ACM Transactions on Computing Education.

5. Cormen, T. H., et al. (2009). "Introduction to Algorithms." MIT Press.

6. Sedgewick, R., & Wayne, K. (2011). "Algorithms." Addison-Wesley.

7. Standish, T. (2003). "Data Structures, Algorithms, and Software Principles

in C." Addison-Wesley.

20
 RESEARCH PAPER

Advancing Algorithm Tracing and

Visualization: A Cutting-Edge Application

Research Paper 2023

Kanika Kumari*1, Nishant Bharti*2,
Abhishek*3, Shivesh Kumar*4,
Ms. Sweta Rai *5

*1,2,3,4Student,

*5Assistant Professor,
Department Of Computer Engineering, Computer Science & Engineering,
Delhi Technical Campus,
Greater Noida, UP, India.
ABSTRACT
Algorithm visualization can help improve computer science education. The process of instructing and acquiring
algorithms is frequently complicated, making the issue difficult to comprehend. In any engineering course, visualisation
is a useful learning tool. This report describes e-learning tools, ranking algorithms, and Huffman coding for Pathfinder.
For example, during sorting, the animation tool will represent data as cards, and users will run automatic animations or
step through animations at their personal pace while choosing the data sorting and algorithm.
In the search, move the beginning and end of the end or user can choose what is the beginning or end. The e-learning
design tool allows visualization of the execution of the policy steps of the algorithm. It can be utilised as a stand-alone
programme or as an addition to in-person training.
In Huffman coding the text is compressed by the coding process which helps in compressing the size, here we see this
from a tree to explain how text is compressed in binary form.
Keywords: Algorithm Visualization, Pathfinder, Sorting Algorithms, Huffman Encoding.

I. INTRODUCTION
Algorithm visualization tools (also known as algorithm animations) use dynamic graphics to visualize the calculations of
an algorithm program. Beginning in the middle of the 1980s, algorithms were first tested for robustness (Brown, 1988;
Brown and Sedgewick, 1985); also, the heyday of algorithmic visualisation occurred throughout the year 2000,
exceptional work on visualising dynamic algorithms began to appear, ushering in the golden age of algorithm
visualisation. (such the Java programming language and graphical libraries) and potent tools that are now on the market.
He thinks algorithm visualization will transform algorithm teaching. Many algorithmic animations have emerged to solve
simple problems, mostly simple data trees and analysis. Even attempts to develop algorithm visualisations and animation
programmes have been made. Making resources that make it simple for pupils to make their graphics is another approach.
Readers are referred to Algoviz, which has a list of more than 800 authors, compared to directly accessing algorithmic
animation knowledge.; Some even have 29 instructions on algorithmic animation and visualization. Additionally, a
plethora of websites offer algorithmic animation tools, including VisuAlgo, DD2, Algoanim, and Algomation.
We believe the principle is simple: an algorithmic service operates on some data (different input and output data). Good
architecture instruction generally uses a method of visualising information: trees are depicted as circles joined by lines,
numerals are viewed as a group of vertical lines, and drawings follow a pattern. Real numbers, matrices, vectors, etc.
Occasionally, algorithmic animation is achieved by modifying the data structure on the screen by gradually running an
algorithmic programme.
A novice can just observe things moving and trading forms and colours; yet, it might occasionally be challenging for him
in figuring out why the animation continues or he has excessive animations. Algorithm experts can notice how
algorithmic programmes are continually developing. problems. . Observing the algorithm's actions and the reasons behind
their behaviour is the method we propose. Put differently, our objective is to understand the computational method's
underlying abstract algorithmic concepts.
The aim of this research is to design a visual system, operate the system, and determine how long each algorithm takes to
execute.
 II. LITERATURE SURVEY

Motivation
The purpose behind this exercise is to examine how the operations function. As a result, students may use animation to
analyse various algorithms. To have a thorough understanding of various record systems and their functions. It will
make mastering record systems more fascinating. The primary goal of the task is to develop a device for multiple sorting
set of rules, path finding, Huffman En-coding - for researching and visualising the best and worst case for each applied
algorithmic rule.

Relevance Of Work
To create software that works, a software developer has to have a solid grasp of DSA. Visualizers have continuously
provided users with useful information. Over time, several different algorithm visualizers have been created.
• The 2008 study "AlCoLab: Architecture of Algorithm Visualisation System" discusses the design of script-
supported algorithm visualising systems for use in education, emphasising the advantages and assistance that
these systems offer for teaching concept subjects like algorithms.[1]
• Athabasca University is now working on developing an efficient algorithm visualisation tool for online
learning, as per the study outlined in the 2019 article "Towards Developing an Effective Algorithm
Visualisation Tool for Online Learning."[2]
• The 2019 article "Open Interactive Algorithm Visualisation" describes the ongoing efforts to create an open
interactive algorithm visualisation website.[3]
• "AlgoAssist: Algorithm Visualizer and Coding Platform for Remote Classroom Learning," published in 2021,
focuses mostly on "algorithm visualisation," which facilitates understanding of algorithm operation. It is
enabled to integrate the lab into a single application for pre-assessment, coding, visualisation, algorithm
elucidation, and post-assessment.[4]
• The article "Algorithm visualizer" from 2021 aims to improve and simplify our understanding of how
algorithms function. In the paper, we address how algorithm visualisations may improve on the traditional
methods of teaching algorithms.[5]

• "A Meta-Study of the Effectiveness of Algorithm Visualisation" The technology known as algorithm
visualisation (AV) uses graphics to explain how algorithms operate. The technique is intuitively appealing, but
conventional computer science education has not adopted it. [6]
• "Visualising algorithms in programming education" The idea of algorithm visualisation is introduced in this
article, along with the educational outcomes that have been attained so far. An example of an algorithm
visualisation tool will then be provided, which we will ultimately assess. [7]

II. PROPOSED SY
A. System Architecture
The suggested device involves simulating unique types of algorithm codes. As you can see, the three coding languages are
the only significant elements. Most websites include components or scripts that need a server, but since React JS operates
directly in the user's browser, it is not required in this instance.
Figure 1: System Architecture 1.

The UI is made with CSS and HTML5. To initiate the precise algorithms and change the interface, which is displayed
with a single, bidirectional arrow, HTML5 communicates with the JS code and vice versa. When JS transitioned from a
functional programming recognition to an additional item-oriented recognition, the HTML5 components that alternated
were those that were necessary for each button. In the animation, every back-give-up interaction is abstracted to the
different buttons for selecting algorithms and taking strolls.

Figure 2: System Architecture 2.

B. Data Flow Diagrams

• DFD LEVEL-0

Data flow diagrams describe how data moves through our system. DFD0 displays the base DFD, with a circle
representing a process and a rectangle representing an external entity (a system outside our system that provides or
receives data) that modifies the data to produce an output.Input is shown by arrows pointing towards the process, while
output is shown by arrows pointing away from it.
• DFD LEVEL-1
DFD1 is the further bifurcation of DFD0.
 II. CONCLUSION
We We began our project by studying some of the popular rule visualisations that have been created over a number of
years. According to our research, algorithmic visualisation is widely regarded as a priceless auxiliary tool that is used in
conjunction with real training methods in the field of computer technology. By completing this task, we have
successfully fulfilled our purpose to distinguish students' performance and implant graph course locations with
visualisation. The concept and practical knowledge of algorithm awareness have a major gap, as is the situation with
most other educational domains. This is consistently true for Dijkstra set of rules and shortest routes algorithms in
particular. The project's primary goal is to use it to train research educators and college students in interpreting and
guiding the currently accepted graph algorithms. The machine's main goal is to provide instructors and students with a
low-cost educational environment that will aid in the learning process.

III. FUTURE WORK

Due to the shift in distant and virtual literacy, college students now need a blended platform that meets their effective
literacy needs. a collection of guidelines A comprehensive tool for instructors and students to learn and analyse online,
Visualizer is a hybrid platform. It places a lot of emphasis on "algorithm visualisation," which makes it easier to
understand how it works.
ACKNOWLEDGEMENTS
It Presenting the preceding challenge paper, "Advancing algorithm Tracing and Visualisation: A modern-day
application," gives us tremendous joy. We would want to use this opportunity to share our inner guide with Assistant
Professor Ms. Sweta Rai, who has provided us with all of the support and guidance we have needed. We are really
grateful to them for providing us with their guide. Their insightful advice has been incredibly helpful. We owe a great
deal to (Delhi Technical Campus, greater Noida) for their guidance and steady monitoring, as well as for supplying vital
information about the project and helping us finish the goal. We also appreciate Prof. Seema Verma, the branch mover,
for her invaluable advice and counsel.

IV. REFERENCES

[1] https://www.researchgate.net/publication/221423715_AlCoLab_Architecture_of_Algorithm_Visualiza
tion_System - AlCoLab: Architecture of Algorithm Visualization System
[2] https://www.researchgate.net/publication/329481179_Towards_Developing_an_Effective_Algorithm_Visualiz
ation_Tool_for_Online_Learning - Towards Developing an Effective Algorithm Visualization Tool for Online
Learning
[3] https://ieeexplore.ieee.org/document/8861535 - Open Interactive Algorithm Visualization
[4] https://www.researchgate.net/publication/352848285_AlgoAssist_Algorithm_Visualizer_and_Coding_Platfor
m_for_Remote_Classroom_Learning - AlgoAssist
[5] https://www.ijraset.com/research-paper/shortest-path-finding-visualizer
[6] https://faculty.cc.gatech.edu/~john.stasko/papers/jvlc02.pdf
[7] https://academia.edu/16269848/Algorithm_visualization_in_programming_education
PLAG REPORT OF THESIS

25
PLAG REPORT OF RESEARCH PAPER

26