11 V May 2023

https://doi.org/10.22214/ijraset.2023.51094
 International Journal for Research in Applied Science & Engineering Technology (IJRASET)
ISSN: 2321-9653; IC Value: 45.98; SJ Impact Factor: 7.538
Volume 11 Issue V May 2023- Available at www.ijraset.com

Visualization of Data Structure and Algorithm

Keerthana P1, Mohammed Afthab2 , Meghanath Shetty3, Arvind M4
1, 2, 3, 4
Computer Science &Engineering Reva University, Bengaluru

Abstract: Nowadays, Data Structure and Algorithms are an essential part of computer science because they help us to store,
process, and analyse large amount of data. In Data Structure we use serval technics to organize the data. We believe the best way
to understand Data Structure and Algorithms is to see them in action. We developed interactive visualization for a variety of
algorithms where human brain can easily understand and work on it. The purpose of developing this project is to make human
understand Algorithms easily. And this project helped us to understand, Data Structure and Algorithms efferently. The analysis
of data structures and algorithms has traditionally been theoretical and mathematical. This makes it time-consuming,
challenging to study, and lacking in comprehension of how a problem is implemented in real life. To assist students and
teachers in visualising data structures and algorithms with their actual execution, we have designed and provided an idea, data
structures, and algorithm.
Keywords: Visualization, Interface, Application layer

I. INTRODUCTION
Data structures offer productivity, reuse, and abstraction. Because storing and retrieving user data as quickly as feasible is a
programme's primary purpose, it plays a significant part in improving performance. The importance of data structuresand algorithms
in computer science cannot be overstated. We can organise and store data using data structures, and we can process it meaningfully
using algorithms.
Data structure courses in computer science are challenging for undergraduate students and beginning programmers to comprehend.
Numerous computing issues make use of common data structures. Furthermore, it is challenging to assist our pupils in properly
comprehending what ishappening inside a certain built-in implementation of a data structure. To give a more effective visualisation
of the collection of data pieces pertaining to the data structures being studied, our project's objective is to provide a dynamic
visualisation tool that takes little effort from learners. We can visualise the data pieces and the accompanying structures to improve
students' learning experiences by using run-time detection to the data structures.
Because they rebalance vision and cognition to better utilise brain functions, data visualisations are very effective. Algorithm
visualisation can help in algorithm design, algorithm debugging, and algorithm instruction for students. When the environment is
included in the visualization, the usefulness of the visualisation for understanding can increase. DSA is a subject that can be learned
via a variety of books, lectures, online classes, etc.; nonetheless, users may find it more engaging if they can visualise the data
structures and algorithms. By igniting their imagination, learners are better able to visualise topics with real-world applications. To
develop Visualization in web we implemented HTML Canvas which is basically used to draw graphics via JavaScript.
The main motivation of the project “VISDAA” is to understand Data structure and Algorithm by Visualization which human brain
can easily catch and implement. The project described in this project features the following features.
1) Full visualisation is provided for frequently used data structures including arrays, stacks, queues, lists, sorting and searching
methods, etc.
2) provides the animation of common data structure actions, like adding and removing items, amongmany others.
3) Animation of basic user-defined algorithms is provided..

II. OBJECTIVES
1) The main objective of this project is understanding the Data Structure and Algorithm easily and effectively through graphical
representations.
2) To give user some of the popular operations in Data structure to perform and visualize with animation because human brain can
understand visualization better than theory and pseudocode.
3) User friendly interface of the website makes it easier for user to utilize features.
4) Our project makes easier anyone to understand datastructures ADT through visualization and provide free access anywhere.
5) Making our project available throughout different kind of devices by developing both responsive Website and App.

©IJRASET: All Rights are Reserved | SJ Impact Factor 7.538 | ISRA Journal Impact Factor 7.894 | 526
 International Journal for Research in Applied Science & Engineering Technology (IJRASET)
ISSN: 2321-9653; IC Value: 45.98; SJ Impact Factor: 7.538
Volume 11 Issue V May 2023- Available at www.ijraset.com

III. PROPOSED RESEARCH

The proposed research aims to develop a visualization tool for data structures and algorithms to help learners better understand
these concepts. The tool will be designed to provide interactive visualizations that allow users to explore the behavior of different
data structures and algorithms in real-time.
The research will involve several stages, including a literaturereview of existing visualization tools for data structures and algorithms,
identification of the most effective visualization techniques, and the design and development of the visualization tool.
The expected outcome of the research is a user-friendly and effective visualization tool that can be used as a teaching aid in
computer science courses or by individuals looking to improve their understanding of data structures and algorithms. The tool could
also be used for research purposesto analyze the performance of different algorithms and data structures.

IV. BACKGROUND OF RESEARCH

Data structures and algorithms are essential concepts in computer science and software engineering. However, they can be complex
and difficult to understand, especially for beginners. Visualization tools have been found to be an effective way to help learners
understand these concepts.
JavaScript is a popular programming language that is widely used for web development. It is also a powerful language for creating
interactive and dynamic visualizations. There is a growing interest in using JavaScript to develop visualization tools for data
structures and algorithms due to its ease of useand accessibility.
Existing visualization tools for data structures and algorithms using JavaScript have shown promise in enhancing learners'
understanding of these concepts. However, there is still a need for research to identify the most effective visualization techniques for
teaching data structures and algorithms using JavaScript.
The proposed research aims to address this gap by developinga web-based visualization tool for data structures and algorithms using
JavaScript. The tool will provide an interactive and engaging learning experience for learners at different levels.
The research will also contribute to the broader field of computer science education by providing insights into the most effective
visualization techniques for teaching data structures and algorithms using JavaScript. The research findings could inform the
development of more effective teaching strategies for computer science educators and could lead to the development of more
advanced visualization toolsfor analyzing the performance of different algorithms and data structures.

V. HYPOTHESIS
The use of interactive and engaging visualization tools for data structures and algorithms using JavaScript can enhance learners'
understanding of these concepts.
The effectiveness of visualization techniques for teaching data structures and algorithms using JavaScript depends on factors such
as the type of data structure or algorithm being taught, the level of learners, and the context of the learning environment.
The development of a comprehensive and customizable web- based visualization tool for data structures and algorithms using
JavaScript can improve learners' engagement, motivation, and learning outcomes.
The use of 3D visualization techniques can provide a more immersive and effective learning experience for learners of data
structures and algorithms.
The incorporation of gamification techniques such as leaderboards, rewards, and badges can improve learners' motivation &
engagement in the learning process of data structures and algorithms visualization using JavaScript.
Overall, the hypotheses aim to explore the potential of visualization, 3D visualization, and gamification techniques in enhancing the
learning experience of data structures and algorithms using JavaScript. The research will evaluate thesehypotheses through empirical
evaluation and user testingwith learners at different levels.

VI. METHODOLOGY
The models that come to implement single data structure arevisualizers. We believe that a good, efficient, optimized codeis when we
write a code that is reusable and easily maintainable. So here we are trying to implement OPPs concept by creating a separate
package for the functions or code that can be used to create another data Structure and Algorithm visualizer. To implement any data
structure visualizer, first we need to understand that data structures or Algorithm properly. That’s why we are implementing the
Data structure or algorithm using java so that we can get an idea of how it can be implemented.

©IJRASET: All Rights are Reserved | SJ Impact Factor 7.538 | ISRA Journal Impact Factor 7.894 | 527
 International Journal for Research in Applied Science & Engineering Technology (IJRASET)
ISSN: 2321-9653; IC Value: 45.98; SJ Impact Factor: 7.538
Volume 11 Issue V May 2023- Available at www.ijraset.com

To make this project successful HTML5 Canvas plays a major role in drawing or animating each ADT’s graphical representation.
Methodology and approach to be adopted are follows: Literature Review: A thorough review of the literature will be done to
determine the best visualization methods for teaching JavaScript data structures and algorithms, as well as the best tools and libraries
for visualizing these types of systems, as well as the potential benefits of 3D visualization and gamification for improving the
learning process.
1) Tool Design and Development: A web-based visualization tool will be designed and developed using JavaScript, HTML, and
CSS. The tool will include interactive and engaging visualizations for different data structures and algorithms, user
customization options, and gamification features.
2) Empirical Evaluation: The developed tool will be evaluated through empirical evaluation with learners at different levels. The
evaluation will assess the effectiveness of the tool in enhancing learners' understanding, engagement, and motivation, and will
compare the effectiveness of different visualization techniques.
3) User Testing: The developed tool will be tested with a sample of learners to assess its usability, user satisfaction, and learning
outcomes. User testing will involve gathering data on users' performance, feedback, and preferences.
4) Data Analysis: The data collected through the empirical evaluation and user testing will be analyzed using descriptive statistics,
inferential statistics, and qualitative analysistechniques.
5) Results and Conclusion: The findings from the data analysis will be used to evaluate the research hypotheses, draw conclusions,
and provide recommendations for the development of more effective visualization tools for data structures and algorithms using
JavaScript.
Overall, this methodology or approach aims to combine literature review, tool design and development, empirical evaluation, and
user testing to evaluate the effectiveness of visualization techniques, 3D visualization, and gamification techniques in enhancing the
learning experience of data structures and algorithms using JavaScript.

A. Architectural Design
The presentation layer, the application layer, and the data layer are the three primary levels that make up the suggested architecture
for the data structure and algorithm visualizationplatform.

Figure 2 Architectural design.

1) Presentation Layer: To engage with the platform, a user- friendly interface must be provided via the presentation layer. This
layer includes the user interface components, such as the web page layout, visualizations, and interactive elements. The
presentation layer is built using HTML, CSS, and JavaScript. The visualizations are created using D3.js, a powerful JavaScript
library for data visualization.
2) Application Layer: User requests are processed, and relevant replies are produced at the application layer. It contains the
business logic that regulates how the platform behaves. This layer is built using JavaScript and runs on the server-side using
Node.js, a platform for building scalable network applications.
3) Data Layer: The data layer oversees looking after the data that the application layer uses. It contains any user data as well as
the data structures and algorithms employed by the application layer. The data layer is built using a combination of JavaScript
and JSON.

©IJRASET: All Rights are Reserved | SJ Impact Factor 7.538 | ISRA Journal Impact Factor 7.894 | 528
 International Journal for Research in Applied Science & Engineering Technology (IJRASET)
ISSN: 2321-9653; IC Value: 45.98; SJ Impact Factor: 7.538
Volume 11 Issue V May 2023- Available at www.ijraset.com

4) Class Diagram

Figure 3 Class Diagram.

The class diagram illustrates the key classes and their relationships within the proposed architecture. The User Interface class is
responsible for interacting with the user and displaying the appropriate menus and visualizations. The Visualizer class generates the
visualizations of the data structures and algorithms, while the Controller class processes user requests and generates appropriate
responses.
TheDataNode represent the nodes and edges of the data structures, respectively.They include properties such as value, next, prev,
start, end, and weight,which are used to define the structure and behavior of the data structures.
The DataNode and DataEdge classes represent the nodes andedges of the data structures, respectively. They include properties such
as value, next, prev, start, end, and weight, which are used to define the structure and behavior of the datastructures.

5) Sequence Diagram:

Figure 4 Sequence Diagram.

This sequence diagram illustrates the interaction between thekey classes of the platform, including the UserInterface, Controller, and
Visualizer classes.
The user begins by interacting with the UserInterface class, which displays a menu of available data structures and algorithms. The
user selects an option from the menu, whichtriggers a call to the processRequest() method of the Controller class.
The Controller class processes the user request, generating an appropriate response by calling the generateResponse() method. The
response is then passed back to the UserInterface class, which displays the appropriate visualization by calling the visualizeData()
method of the Visualizer class.

©IJRASET: All Rights are Reserved | SJ Impact Factor 7.538 | ISRA Journal Impact Factor 7.894 | 529
 International Journal for Research in Applied Science & Engineering Technology (IJRASET)
ISSN: 2321-9653; IC Value: 45.98; SJ Impact Factor: 7.538
Volume 11 Issue V May 2023- Available at www.ijraset.com

The Visualizer class generates the appropriate graph visualization of the selected data structure or algorithm by calling the
generateGraph() method. The resulting visualization is then passed back to the UserInterface class, which displays it to the user.

VII. MODULES IDENTIFIED

1) Visualizer: For visualizing purposes, we used Canvas which is used to draw a 2D and 3D diagram through graphical
representation.
2) Operations: Each Data structure and Algorithm is going to have its own operations where the user can envision each of them
through a visualizer.
3) Controllers: Controllers contain options for users to control the height and width of the visualizer and animation speed.

Figure 2 Singly Linked List

Figure 3 Doubly Linked List

VIII. RESULT
Overall output's snip diagram is shown in below Figureshows the end result

Figure 1 Home Page

©IJRASET: All Rights are Reserved | SJ Impact Factor 7.538 | ISRA Journal Impact Factor 7.894 | 530
 International Journal for Research in Applied Science & Engineering Technology (IJRASET)
ISSN: 2321-9653; IC Value: 45.98; SJ Impact Factor: 7.538
Volume 11 Issue V May 2023- Available at www.ijraset.com

Figure 4 Stack

IX. CONCLUSION
After completion of this project user can access our web application from any device and will be able to visualize most popular Data
Structures ADT’s. It will be useful for the teacher who want to teach their student through visualization and learner who want a
better understanding of DSA or a developer who want to revise his forgotten DSA skills quickly. Best part of this project is that it’s
going to be an open source and freely available in GitHub anyone can contribute or read the implementation.

REFERENCES
[1] Tao Chen and Tarek Sobh, “A Tool for Data Structure anduser-defined Algorithm”, University of Bridgeport, London,2019.
[2] Yoram Moses, Zvi Polunsky, Ayellet Tal, “Algorithm Visualization for Distributed Environments”, The Weizmann Institution of Science, USA,2015.
[3] Andrea Stocco, Maurizio Leotta, Filippo Ricca, Paolo Tonella, “A tool for Migrating DOM based Visual Web Tests”, University of Genova, Italy,2014.
[4] Juan Lin, , Hui Zhang, “Data Structure Visualization on the web”, University of Louisville, USA,2020.
[5] Ahmed Roshdy, Nada Sharaf, Madeleine Saad and Slim Abdennadher, “Generic Data Visualization platform”, The German University in Cairo, Egypt,2018.
[6] Shraddha Ghadge, Virajas Mane, “A Survey paper on Data Structures and Algorithm Visualization”, University of Mumbai, India,Volume:04, Issue:04, April
2022.
[7] Edy Budiman, Nataniel Dengen and Ummul Hairah , “Visualization Tools of Data Structure Course to Support Learning Students”, University Mulawarman
Samarinda,Indonesia, 2011.

©IJRASET: All Rights are Reserved | SJ Impact Factor 7.538 | ISRA Journal Impact Factor 7.894 | 531