Hi There, This Synopsis report is Implemented by Umang Saxena,Sakshi Sharma and Ronit Shrivastava of IT Branch,SVVV Indore.This will help for those students who wants to make a good and effective report regarding to any topic. Thank you Warm regards

1. Minor Project Report
on
DATA STRUCTURE VISUALIZER
In partial fulfillment of requirements for thedegree
of
BACHELOR OF
TECHNOLOGY IN
INFORMATION TECHNOLOGY
Submitted by:
RONIT SHRIVASTAVA [1710DMBIT01552]
UMANG SAXENA [1710DMBIT01566]
SAKSHI SHARMA [1710DMBIT01554]
Under the guidance of
PROF. MANOJ DHAWAN
PROF. GAURAV VINCHURKAR
PROF. SUJIT BADODIA
DEPARTMENT OF INFORMATION
TECHNOLOGY
SHRI VAISHNAV VIDYAPEETH VISHWAVIDYALAYA
INDORE, JAN-JUNE 2020

2. SHRI VAISHNAV VIDYAPEETH VISHWAVIDYALAYA
INDORE, JAN-JUNE 2020
CERTIFICATE
This is to certify that Mr. Ronit Shrivastava(1710DMBIT01552), Mr. Umang
Saxena(1710DMBIT01566) and Ms. Sakshi Sharma(1710DMBIT01554) students of
Bachelor of Technology at Shri Vaishnav Vidyapeeth Vishwavidyalaya, Indore have
undertaken a research project entitled “Data Structure Visualizer” under my guidance and
supervision for the fulfillment of the requirement of the degree of Bachelor of Technology.
The work has been carried out to my satisfaction and they have given exhaustive information
regarding project work. The true guider of this project is.
Prof. Manoj Dhawan Date:
Sign………………….
Prof. Sujit Badodia
Sign………………….
Prof. Gaurav Vinchurkar
Sign………………….
SVVV, Indore Place: Indore
________________ _________________
Internal Signature External Signature
I

3. ACKNOWLEDGEMENT
I express my deep gratitude to Prof. Manoj Dhawan, Prof. Sujit Badodia and Prof. Gaurav
Vinchurkar, for his constant guidance, help and cooperation in this project. We are also
grateful to all the known and unknown persons, specially our classmates and friends who
provided proper views and feedbacks during the project. We are also thankful to all the teachers
till date and for the extreme care and guidance which made us capable of writing this project.
SUBMITTED BY:
Name: Ronit Shrivastava
Enrollment no.: 1710DMBIT01552
Class: Bachelor of Technology (IT), SEM 6 ,3rd year
Sign. ……………………..……………
Name: Umang Saxena
Enrollment no.:1710DMBIT01565
Class: Bachelor of Technology (IT), SEM VI, 3rd year
Sign……………………………….........
Name: Sakshi Sharma
Enrollment no.: 1710DMBIT01554
Class: Bachelor of Technology (IT), SEM VI,3rd year
Sign………………………………….
II

4. TABLE OF CONTENT
Sr no. Title Page
1 INTRODUCTION 1
2 LITERATURE SURVEY 1
3 PROBLEM IDENTIFIED 2
4 SOLUTION PROPOSED 2
5 METHODOLOGY USED 3
6 HARDWARE AND SOFTWARE REQUIREMENT 3
7 TOOLS AND TECHNOLOGY USED 4
8 UML DIAGRAMS 4-12
9 RESULT 12
10 CONCLUSION 13
11 SCREENSHOTS OF OUR PROJECT 13-19
12 REFERENCE 20
III

5. TABLE OF FIGURES
Sr no. Title of the figure Page No.
1 Use Case Diagram 5
2 Class Diagram 6
3 Sequence Diagram 7
4 Collaboration Diagram 8
5 State Chart Diagram 9
6 ActivityDiagram 10
7 Component Diagram 11
8 Deployment Diagram 12
9 Interface of Queue 14
10 Enqueue of 1st
in Queue 14
11 Enqueue of 2nd
in Queue 15
12 Dequeue in Queue 15
13 Home page of DSV 16
14 Interface of Binary Search Tree 17
15 Insertion of root node 17
16 Insertion of 2nd
element 18
17 Insertion of 3rd
element 18
18 Deletion of element 19
19 Complete Binary Tree 19
IV

6. 1
1. ABSTRACT
In this Application, a software application that features the visualization of commonly used
data structures and their associated insertion and deletion operation is introduced. This project
is intended to create an exploration environment, in which student can learn through
experimentation.
2. INTRODUCTION
Data Structures and Algorithms is a fundamental course in Computer Science. However, many
students find it difficult because it requires abstract thinking. The best way to understand
complex data structures is to see them in action.
It would be very helpful if there was a visualization tool of data structures such as arrays,
queues, stacks, trees and graphs for students to experiment with. This project is intended to
create such an exploration environment, in which students can learn through experimentation.
We've developed interactive animations for a variety of data structures and algorithms.
This tool provides complete animation of common operations associated with the data
structures, such as inserting an element into and deleting an element from stack and queue. It
includes the animation of insertion, deletion and finding operation in binary search
tree. Ultimate gain of this project is that this tool can be used as an effective supplement to the
traditional classroom education and textbooks for Data Structures and Algorithms courses.
3. LITRATURE SURVEY
In the area of computer science education, Algorithm visualization is the most popular tool
used, while teaching data structure to undergraduate students. Using this tool student can easily
understand concept of data structure and see visually how various operations performed on
these data structure. Various technologies used to develop it, their benefits in learning data
structure, limitations, year of publication and their authors.
We have come with the idea when we ourselves were trying to understand the algorithms and
data structure and found the solution could be a tool that let the user understand the concept
with ease and not only with the animation but also user interactive environment.
So, we explored many online sites and tools like
visualgo.net
algorithm-visualizer.org
animejs.com
onlinetutorialsweb.com
and perform study about their features and what the tool and sites were providing, their
effectiveness and we found some flaws. In some we encountered that although the animation
was good but there was lack of accuracy. Some took the input in the form of string instead of
integer value so if user enters 5 it shows 0005 which is a string.
In one tool we encountered that after entering certain levels of the binary tree shape of the tree
got distorted.

7. 2
Some used animations and techniques which were good for someone who is already good in
this subject but the main focus of any such tool should be to keep in mind that it is for someone
who is new or weak in this subject. So, all these points encouraged us to take the task and try
to improve or correct what we found in the existing sites and tools.
Since our software is intended to the aid first year Computer Science students learning Data
Structures and Algorithms, ease of use becomes our main consideration. The only effort the
user needs to make is to instantiate the data structures he/she wants to observe using the
observable data types provided by the software.
4. PROBLEM IDENTIFIED
 The problems that the tool focuses on are lack of understanding of data structures and their
working, complexity being involved in implementation of data structures and their direct
application in the real world.
 As it is one of the most fundamental subjects that every computer science student should
have a good grasp on. It is generally found that they are unable to think about its concepts
just because of lack of visualization.
5. SOLUTION PROPOSED
This tool solves the basic problem which nearly every Computer Science student face, that is,
lack of understanding and visualization regarding data structures and algorithms. This tool
provides a platform where a data structure and all the operations associated with it are presented
in visual motion with the interactive animations that in a lucid manner show each and every
step involved in the complex problem of designing, implementing and working of data
structures. This tool uses JavaScript and JQuery for animation purpose and to provide a smooth
experience and interactivity to the user. Ultimate gain of this project is that this tool can be
used as an effective supplement to the traditional classroom education and textbooks for Data
Structures and Algorithms courses.
6. METHODOLOGY USED
Software Model Used
This project is based on Incremental Process Model. Incremental process model is also
known as Successive version model.
First, a simple working system implementing only a few basic features is built and then that is
delivered to the customer. Then thereafter many successive iterations/ versions are
implemented and delivered to the customer until the desired system is released.
Requirements of Software are first broken down into several modules that can be incrementally
constructed and delivered. At any time, the plan is made just for the next increment and not for
any kind of long-term plans. Therefore, it is easier to modify the version as per the need of the
customer. Development Team first undertakes to develop core features (these do not need
services from other features) of the system.

8. 3
Once the core features are fully developed, then these are refined to increase levels of
capabilities by adding new functions in Successive versions. Each incremental version is
usually developed using an iterative waterfall model of development.
As each successive version of the software is constructed and delivered, now the feedback of
the Customer is to be taken and these were then incorporated in the next version. Each version
of the software has more additional features over the previous ones.
This project is intended to create an exploration environment, in which students can learn
through experimentation. We've developed interactive animations for a variety of data
structures and algorithms.
Because of the time limitation, only the most commonly used data structures are implemented
in this version of the software package, which include queues and binary search tree.
In future, we will include some another data structures in this project so that students can learn
through experimentation.
7. HARDWARE & SOFTWARE REQUIREMENTS
Hardware Specification: -
The minimum hardware specification for this web application is:
Processor : Pentium IV or higher, (PIV-300GHz recommended)
RAM : 256 MB RAM
Hard disk : 1GB hard free drive space
Software Specification: -
The minimum Software specification for this web application is:
Operating System : Window XP/Window vista /Window 7 ultimate or newer /
AC 8.0 or Newer / Linux distribution i.e.; Ubuntu / Fedora /
Linux Mint /Debian or more / Android
Front-End Language : HTML, CSS, Java Script
Back-End Language : Java Script, JQuery.
Web Browser : Microsoft Internet Explorer, Mozilla, Google Chrome or
later, Bing, Yahoo and more
Keyboard type : PS2,USB

9. 4
8. TOOL AND TECHNOLOGY USED
For this web application the tools and technologies which we are using for building this app
more interesting and visually appealing is:
Sublime (Text Editor tool used for both backend and frontend)
Java script (contains Main algorithm of the following data structure)
HTML (For front end development and Visualization of data structure)
CSS (For front end development and Visualization of data structure)
JQuery (For Visualization and Interactive User interface)
This web application will be run on any environment and totally platform independent
It means it will run on any platform such as Windows OS, Mac OS, etc. Because we are
using efficient and Optimize algorithm the rendering process of this web application is very
quick in any browser.
9. UML DIAGRAMS
Unified Modelling Language:
The Unified Modelling Language allows the software engineer to express an analysis model
using the modelling notation that is governed by a set of syntactic-semantic and pragmatic
rules.
A UML system is represented using five different views that describe the system from a
distinctly different perspective. Each view is defined by a set of diagrams, which is as follows:
User Model View
This view represents the system from the user’s perspective. The analysis representation
describes a usage scenario from the end-user’s perspective.
Structural model view
In this model the data and functionality are arrived from inside the system. This model views
models the static structures.
Behavioral Model View
It represents the dynamic of behavior as parts of the system, depicting the interactions of
collection between various structural elements described in the user model and structural
model view.
Implementation Model View
In this the structural and behavioral part of the system are represented as they are to be built.
Environmental Model View
In this the structural and behavioral aspect of the environment in which the system is to be

10. 5
implemented are represented.
9.1. Behavioral Diagrams:
UML Behavioral Diagrams depict the elements of a system that are dependent on time and that
convey the dynamic concepts of the system and how they relate to each other. The elements in
these diagrams resemble the verbs in a natural language and the relationships that connect them
typically convey the passage of time. For example, a behavioral diagram of a vehicle
reservation system might contain elements such as Make a Reservation, rent a Car, and Provide
Credit Card Details. Experienced modelers will show the relationship to structural elements on
these diagrams.
9.1.1. Use Case Diagram
To model a system, the most important aspect is to capture the dynamic behaviour. Dynamic
behavior means the behaviour of the system when it is running/operating.
Only static behavior is not sufficient to model a system rather dynamic behavior is more
important than static behavior.
Purpose of Use Case Diagrams
The purpose of use case diagram is to capture the dynamic aspect of a system. Use case
diagrams are used to gather the requirements of a system including internal and external
influences. These requirements are mostly design requirements. Hence, when a system is
analysed to gather its functionalities, use cases are prepared and actors are identified.
Below is the Use case diagram of Data Structure Visualizer tool. This Use case Diagram is a
graphic depiction of the interactions among the elements of Data Structure Visualizer tool. It
represents the methodology used in system analysis to identify, clarify and organise system
requirements of Data Structure Visualizer tool.
Figure – 9.1.1

11. 6
9.2. Structure Diagrams
A structure diagram is a development tool used in modelling the different parts of a system,
from the overview on how the individual parts interact to create the whole, to modelling the
details of the smallest parts themselves such as the different objects and classes being used in
programming the system.
A structure diagram visualizes how a system works from the initial input, to processing and,
finally, to the desired output. It is especially useful in determining all of the interfaces involved
between the different parts and helps developers agree on how each part should be connected
based on the models being shown on the structure diagram.
9.2.1. Class Diagram
A class diagram in the Unified Modelling Language (UML) is a type of static structure
diagram that describes the structure of a system by showing the system's classes, their
attributes, operations (or methods), and the relationships among objects.
Below is the class diagram of Data Structure Visualization system. A class diagram can show
the relationships between each object in a Data structure visualization system. The diagram
below provides a useful overview of the Data structure visualization system.
Figure – 9.2.1

12. 7
9.1.2. Sequence Diagram
Sequence diagrams describe interactions among classes in terms of an exchange of messages
over time. They're also called event diagrams. A sequence diagram is a good way to visualize
and validate various runtime scenarios. These can help to predict how a system will behave
and to discover responsibilities a class may need to have in the process of modelling a new
system.
Figure – 9.1.2
9.1.3. Collaboration Diagram
A collaboration diagram, also known as a communication diagram, is an illustration of the
relationships and interactions among software objects in the Unified Modelling Language
(UML). These diagrams can be used to portray the dynamic behavior of a particular use
case and define the role of each object.
Collaboration diagrams are created by first identifying the structural elements required to carry
out the functionality of an interaction. A model is then built using the relationships between
those elements. Several vendors offer software for creating and editing collaboration diagrams.

13. 8
Figure – 9.1.3
9.1.4. State Chart Diagram
A state diagram is used to represent the condition of the system or part of the system at finite
instances of time. It’s a behavioral diagram and it represents the behavior using finite state
transitions. State diagrams are also referred to as State machines and State-chart Diagrams.
These terms are often used interchangeably. So simply, a state diagram is used to model the
dynamic behavior of a class in response to time and changing external stimuli. We can say that
each and every class has a state but we don’t model every class using State diagrams. We prefer
to model the states with three or more states.
Uses of state chart diagram –
 We use it to state the events responsible for change in state (we do not show what
processes cause those events).
 We use it to model the dynamic behavior of the system.
 To understand the reaction of objects/classes to internal or external stimuli.

14. 9
Figure – 9.1.4
9.1.5. Activity Diagram
Activity diagram is another important diagram in UML to describe the dynamic aspects of the
system. Activity diagram is basically a flowchart to represent the flow from one activity to
another activity. The activity can be described as an operation of the system. The control flow
is drawn from one operation to another. This flow can be sequential, branched, or concurrent.
Activity diagrams deal with all type of flow control by using different elements such as fork,
join, etc
Purpose of Activity Diagram
The basic purposes of activity diagrams are similar as it captures the dynamic behavior of the
system. Other four diagrams are used to show the message flow from one object to another
but activity diagram is used to show message flow from one activity to another.
Activity is a particular operation of the system. Activity diagrams are not only used for
visualizing the dynamic nature of a system, but they are also used to construct the executable
system by using forward and reverse engineering techniques. The only missing thing in the
activity diagram is the message part.

15. 10
Figure – 9.1.5
9.2.2. Component Diagram
Component diagrams are different in terms of nature and behavior. Component diagrams are
used to model the physical aspects of a system. Physical aspects are the elements such as
executables, libraries, files, documents, etc. which reside in a node.
Component diagrams are used to visualize the organization and relationships among
components in a system. These diagrams are also used to make executable systems.
Purpose of Component Diagrams
Component diagram is a special kind of diagram in UML. The purpose is also different from
all other diagrams discussed so far. It does not describe the functionality of the system but it
describes the components used to make those functionalities.
Thus, from that point of view, component diagrams are used to visualize the physical
components in a system. These components are libraries, packages, files, etc.
Component diagrams can also be described as a static implementation view of a system. Static
implementation represents the organization of the components at a particular moment.

16. 11
Figure – 9.2.2
9.2.3. Deployment Diagram
Deployment diagrams are used to visualize the topology of the physical components of a
system, where the software components are deployed.
Deployment diagrams are used to describe the static deployment view of a system.
Deployment diagrams consist of nodes and their relationships.
Purpose of Deployment Diagrams
The term Deployment itself describes the purpose of the diagram. Deployment diagrams are
used for describing the hardware components, where software components are deployed.
Component diagrams and deployment diagrams are closely related.
Component diagrams are used to describe the components and deployment diagrams shows
how they are deployed in hardware.
UML is mainly designed to focus on the software artifacts of a system. However, these two
diagrams are special diagrams used to focus on software and hardware components.
Most of the UML diagrams are used to handle logical components but deployment diagrams
are made to focus on the hardware topology of a system.

17. 12
Figure – 9.2.3
10. RESULTS
In Result, both the data structures which is Queue and Binary search Tree are successfully
implemented for the visualization of user so that the user can fully visualize what they want.
So, this are the outcomes of our project.
Queue
In Queue, the user will able to perform the following operations: -
Enqueue : In which user can insert the particular digit in the queue from the front end.
Dequeue : In which user can remove the particular digit in the queue from the rear end.
Empty : In which user can empty the whole queue if they want new queue to insert.
Binary Search Tree
In BST the user will able to perform the following operations: -
Insert : In which user can insert the new element in the tree.
Delete : In which user can delete the particular element from the tree.
Search : In which user can search the particular element from the tree.
Inorder : In which user can find the Inorder of the tree.
Preorder : In which user can find the Preorder of the tree.
Postorder : In which user can find the Postorder of the tree.

18. 13
11. CONCLUSION
In this synopsis, we present a Data Structure Visualizing Tool which helpful for those who
does not understand the concept of data structure easily. By the help of this web tool the
students who faces problem toward solving the data structure now can easily develop thinking
towards data structures in a more interesting and efficient way .
Due to their full visual and Graphical interface it will really helpful for those students who
really want to learn data structure in a fully different way .Since, Its really hard and boring to
grasp the particular thing in a textual form ,So by the help of this platform the user will get the
full Visual view of the data structure which is more appealing and easy to understand so that
anyone can understand and learn the basic concept of data structure in fun way.
Because of the time limitation only the most commonly used data structures are implemented
in this version of software tool which include Queue, Binary Search tree. In future, we add
more data structure if we can extend this project in the major Submission.
12. SCREENSHOTS OF OUR PROJECT
The screenshots on the following pages should give an idea of how the software runs.
Data Structure Visualization
The observable data structures currently available in this software packages include: queue and
binary search tree.
12.1. QUEUE
A queue is a data structure that restricts the access to the least recently inserted item. It is based
on the principle of FIFO (First in First Out). The basic operations supported by queues are
enqueue and dequeue, representing insertion to the rear (back) and removal of the item at the
(front). Figures 1-5 demonstrate the array-based queue structure and associated operations.

19. 14
Figure – 12.1.1:
Figure -12.1.2:

20. 15
Figure – 12.1.3:
Figure – 12.1.4:

21. 16
12.2. BINARY SEARCH TREE
Binary Search Tree is a node-based binary tree data structure which has the following
properties:
 The left subtree of a node contains only nodes with keys lesser than the node’s key.
 The right subtree of a node contains only nodes with keys greater than the node’s key.
 The left and right subtree each must also be a binary search tree.
Basic Operations
Following are the basic operations of a tree −
 Search − Searches an element in a tree.
 Insert − Inserts an element in a tree.
 Delete – Delete an element from a tree.
 Pre-order Traversal − Traverses a tree in a pre-order manner.
 In-order Traversal − Traverses a tree in an in-order manner.
 Post-order Traversal − Traverses a tree in a post-order manner.
Figures 1-7 demonstrate the binary tree data structure and associated operations.
Figure :12.2.1

22. 17
Figure :12.2.2
Figure :12.2.3

23. 18
Figure :12.2.4
Figure :12.2.5

24. 19
Figure :12.2.6
Figure :12.2.7

25. 20
12. REFERENCE
https://www.cs.usfca.edu/~galles/visualization
https://visualgo.net/en
https://algorithm-visualizer.org/
https://github.com/algorithm-visualizer/algorithm-visualizer
https://animejs.com/
https://www.geeksforgeeks.org/data-structures/
https://codepen.io/
http://www.onlinetutorialsweb.com/
https://www.w3schools.com/
https://kanaka.github.io/rbt_cfs/trees.htm