Sorting Visualizer

Report submitted in partial fulfillment of the requirement for the

degree of

[Link]

in
Artificial Intelligence & Data Science

by

Arpita Rawat
20520811922

Department of AI&DS
Bhagwan Parshuram Institute of Technology
PSP-4, Sec-17, Rohini, Delhi-89

August 2025

i
 DECLARATION

This is to certify that the report titled “Sorting Visualizer”, is submitted by me in partial
fulfillment of the requirement for the award of degree of [Link] in Artificial Intelligence
& Data Science to BPIT Rohini Delhi affiliated to GGSIP University, Delhi. It comprises
of my original work. The due acknowledgement has been made in the report for using
other’s work.

Date: 20-08-25 Arpita Rawat, 20520811922

ii
 TRAINING COORDINATOR CERTIFICATE

This is to certify that Report titled “Sorting Visualizer” is submitted by Arpita Rawat
(20520811922) under the guidance of Ms. Priya Panchal in partial fulfillment of the
requirement for the award of degree of [Link] in Artificial Intelligence & Data Science to
BPIT Rohini affiliated to GGSIP University, Delhi. The matter embodied in this Report is
original and has been dully approved for the submission.

Date: Training Coordinator

iii
 ACKNOWLEDGEMENT

I wish to express my deepest gratitude to Bhagwan Parshuram Institute of Technology for

providing me with the opportunity to pursue my summer training at ‘Coding Blocks’. My
sincere thanks to ‘Ms Priya Panchal, my training coordinator, for her constant guidance and
support.
I am profoundly grateful to ‘Mr. Kartik Mathur’, my trainer at Coding Blocks, for his expert
mentorship and invaluable insights throughout the course of my training. His guidance
significantly contributed to my professional development. I thank him for his cooperation
and support, which greatly enriched my learning experience.
Finally, I am thankful to the esteemed faculty of Bhagwan Parshuram Institute of
Technology for equipping me with the necessary skills and knowledge that enabled me to
make the most of this training opportunity.

Date: 20 August, 2025 Arpita Rawat (20520811922)

iv
 TABLE OF CONTENTS

List of Figures…………………………..………………………………….. vi

Abstract………………………………..……………………………………..vii

Page No

Chapter 1 : Introduction……………………………………………………..1

Chapter 2 : Problem Statement……………………………………………….2

2.1 : Problem Statement

2.2 : Objectives

Chapter 3 : System Analysis and Design…………………………………….3

3.1 : Software Requirement Specifications (H/W and S/W

requirements)………………………………………………….4

3.2 : Use Case Diagrams/DFD/ERD………………………………..5

3.3 : Flow Chart…………………..…………………………………8

Chapter 4 : Methodology /Implementation…………………………...……...9

Chapter 5 : Results/Comparison……….…………………………………….16

Chapter 6 : Conclusion & Future Work……………………………………...17

REFERENCES ……………………………………………………………...19

v
 LIST OF FIGURES

Fig 3.1: Use Case Diagram…………………………….………………………………….6

Fig 3.2.1: DFD level 0…………………………………..…………………………………6

Fig 3.2.2: DFD level 1……………………………………..………………………………7

Fig 3.3: ER Diagram …………………………………………..…………………………..7

Fig 3.4: Flowchart of workflow…………………………………………………………..8

Fig 5.1: Before sorting…………………………………………….………...….......16

Fig 5.2: After sorting…………...……...………………………………………..…..16

vi
 ABSTRACT

The Sorting Visualizer is an interactive web-based project developed using HTML, CSS,
and JavaScript to demonstrate the working of various sorting algorithms in a visual and
engaging manner. Sorting is a fundamental concept in computer science, and understanding
its step-by-step process can often be challenging when studied only through theory. This
project bridges the gap by providing dynamic visual representations of popular sorting
techniques such as Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, and Quick Sort.

The visualizer allows users to generate random data sets and observe how the algorithms
rearrange elements in real-time. HTML and CSS are used to design the interface and bars
representing array elements, while JavaScript handles the implementation of sorting logic
and animation. This project not only enhances the user’s conceptual understanding of
sorting but also provides an interactive platform for experimentation and learning. It is
especially useful for students, educators, and enthusiasts to grasp the efficiency and
differences of various sorting algorithms through visual comparison.

vii
 CHAPTER 1
INTRODUCTION

In the field of computer science, sorting plays a fundamental role as one of the most widely
used algorithms in problem-solving and data organization. Sorting algorithms are used to
arrange data in a particular order (ascending or descending) to make searching, analyzing,
and processing more efficient. From simple arrays to complex datasets, sorting serves as
the foundation for various applications such as database indexing, data analysis, and
optimization problems.

A Sorting Visualizer is an interactive tool designed to demonstrate how different sorting

algorithms work in real time. Instead of learning sorting algorithms purely through code or
theoretical explanations, the visualizer helps users understand the internal working of
algorithms by visually representing each step of the sorting process. By providing
animations of element comparisons, swaps, and movements, it bridges the gap between
theory and practice.

This project focuses on building a Sorting Visualizer web application that allows users to
see the execution of algorithms like Bubble Sort, Selection Sort, Insertion Sort, Heap Sort,
Linear Sort,Merge Sort,CockTail Sort and Quick Sort. The tool provides options to control
the speed of visualization, adjust the size of the input array, and observe the efficiency of
algorithms in terms of time and complexity.

The primary goal of this project is to enhance the learning experience of students and
developers by offering an intuitive platform to analyze and compare different sorting
algorithms. It helps in developing a clear understanding of how algorithms function step by
step, highlighting their strengths, weaknesses, and real-world applications.

-1-
 CHAPTER 2

PROBLEM STATEMENT

2.1 Problem Statement

Sorting is one of the most essential operations in computer science, forming the basis of
many algorithms and applications. However, for beginners, understanding the internal
working of sorting algorithms such as Bubble Sort, Merge Sort, or Quick Sort can be
difficult when explained only through code or text. The lack of a clear, step-by-step
representation often leads to confusion in differentiating algorithmic efficiency and
behaviour. Therefore, there is a need for an interactive tool that visually demonstrates how
different sorting algorithms operate on a dataset, making the learning process easier and
more engaging.

2.2 Objectives

Movie recommendation system provides the mechanism and classifying the users with the
same interest and searches for the content that would be so much interesting belonging to
different set of users and then creating different kind of lists and providing interesting
recommendations to the individual based on the content the love. The main objective of the
recommender system is to used approaches suggest demographic filtering, content based
filtering, collaborative filtering to find the set of movies with every user likes for specific
set of users.

Key objectives:

• Improving the Accuracy of the recommendation system

• Improve the Quality of the movie Recommendation system
• Improving Scalability.
• Enhancing the user experience

-2-
 CHAPTER 3

SYSTEM ANALYSIS AND DESIGN

3.1 Requirement Specifications

This section will cover all the requirements including hardware and software needed for
the project and the detailed explanation of the specifications.

3.1.1 Hardware Requirements

• A laptop or PC with windows/Linux OS

• Processor: Dual-core or higher (e.g., Intel i3/i5 or equivalent) for handling the
execution of sorting algorithms and animations.
• RAM: Minimum 4 GB (8 GB recommended) for smooth execution of the web
browser and development tools.
• Storage: At least 256 GB HDD/SSD for saving project files and development tools.
• Network: Internet connection for accessing libraries, documentation, and browser-
based testing.

3.1.2 Software Requirements

• Operating System: Windows / Linux (Ubuntu) / macOS.
• Text Editor: VS Code (preferred) or Sublime Text / Atom
• Programming Languages:
HTML5: For structuring React components.
CSS3: For styling and visual effects.
JavaScript (ES6+): Core logic for sorting algorithms and React components.
• Frameworks and Libraries (as per [Link]):
[Link]: Core library for building user interface and handling component-based
architecture.
React-DOM: For rendering React components into the browser DOM.

-3-
 • Web Browser: Any modern browser (e.g., Chrome, Firefox) for users to access the
application.

SOFTWARE REQUIREMENT SPECIFICATIONS

Visual Studio Code

Visual Studio Code is a lightweight but powerful source-code editor developed by

Microsoft. It is the primary development environment used in this project. VS Code
provides features such as syntax highlighting, IntelliSense (auto-completion), debugging
support, integrated terminal, version control integration (Git/GitHub), and extensions for
React, JavaScript, and CSS. These features make it efficient for developing and testing the
Sorting Visualizer project.

Programming Languages

HTML

HTML (HyperText Markup Language) is the backbone of the project, used to define the
structure of the Sorting Visualizer. It organizes elements like bars, buttons, and input fields
on the webpage. HTML ensures that the interface is well-structured and provides the
necessary skeleton for implementing visual animations.

CSS

CSS (Cascading Style Sheets) is used to style the Sorting Visualizer, making the interface
interactive and visually appealing. It defines the color schemes, bar heights, spacing, and
overall design aesthetics. CSS also enables responsive design, ensuring the project runs
smoothly across different devices and screen sizes.

JAVASCRIPT

JavaScript is the core programming language for this project. It is responsible for
implementing sorting algorithms such as Bubble Sort, Selection Sort, Insertion Sort, Merge
Sort, and Quick Sort. JavaScript also manages the animations, DOM manipulations, and
user interactions like generating new arrays or adjusting sorting speed.

-4-
Framework and Libraries

[Link]

[Link] is the core JavaScript library used in this project for building the user
interface. It follows a component-based architecture, which allows developers
to break the application into smaller, reusable components. This improves
code organization, maintainability, and scalability. React efficiently updates
and renders only the components that change, making the Sorting Visualizer
responsive and fast.

React-DOM

React-DOM is a package that provides DOM-specific methods used at the top level of a
React application. It is responsible for rendering React components into the actual browser
Document Object Model (DOM). In this project, React-DOM ensures that the sorting bars,
buttons, and animations are properly displayed and updated inside the browser window.

3.2 DIAGRAMS
3.2.1 USE CASE DIAGRAM
A movie recommendation system can be illustrated through a use case
diagram that highlights interactions between users, the recommendation
engine, and the database. This diagram includes:
• Actors: Users, Admins and the Recommendation Engine.
• Use Cases: Register, Login, Rate Movies, Get Recommendations, Provide
Feedback and Update User Profiles.

-5-
 Fig 3.1: Use Case Diagram

3.2.2 DATA FLOW DIAGRAM

Fig 3.2.1: DFD level 0

-6-
 Fig 3.2.2: DFD level 1

3.2.3 ER DIAGRAM

Fig 3.3: ER Diagram

-7-
3.3 FLOWCHART

Fig 3.4: Flowchart of workflow

-8-
 CHAPTER 4

METHODOLOGY AND IMPLEMENTATION

4.1 METHODOLOGY
The Sorting Visualizer project follows a structured methodology to ensure smooth functioning
and accurate visualization of sorting algorithms. The methodology is outlined below:

1. Data Generation and Preprocessing

• Random Array Creation: The system generates a random array based on the size
selected by the user.
• User Input Options: Users can choose array size, speed of visualization, and bar
colors for better distinction.
• Reset Functionality: The randomization button allows generating new unsorted
arrays anytime.

2. Algorithm Selection
The core of the system is the implementation of multiple sorting algorithms, such
as:
• Bubble Sort
• Selection Sort
• Insertion Sort
• Merge Sort
• Quick Sort

Users can select the desired algorithm from the dropdown menu.

3. Visualization Mechanism
The sorting visualization is achieved using JavaScript animations and DOM
manipulation:

• Each array element (bar) is represented visually on the screen.

-9-
 • During sorting, comparisons and swaps are highlighted using different colors
(processing bar color, sorted bar color).
• Speed control allows users to adjust how fast or slow the sorting process is
visualized.
4. Input and Control System
• Users interact with the system through a graphical interface:
• Algorithm Selection: Choose the sorting technique to visualize.
• Speed Control: Adjust the animation speed (Slow, Medium, Fast).
• Array Size Control: Select how many elements should be in the array.
• Color Customization: Choose colors for bars during processing, final sorted
state, etc.
• Start Sorting Button: Executes the chosen algorithm on the dataset.
5. Implementation Tools
• Frontend: HTML, CSS for layout, styling, and animations.
• Logic & Visualization: JavaScript for implementing algorithms and animating
bar movements.
• Frameworks/Libraries: [Link] for component-based UI structure, Bootstrap
for styling, and additional libraries for smooth interaction.

- 10 -
4.2 IMPLEMENTATION

Code:

- 11 -
- 12 -
- 13 -
- 14 -
- 15 -
 CHAPTER 5
RESULTS

The pictures below show the sorting visualiser before and after sorting a random array
with unsorted elements:

Fig 5.1: Before Sorting

Fig 5.2: After Sorting

- 16 -
 CHAPTER 6

CONCLUSION AND FUTURE WORK

CONCLUSION

The Sorting Visualizer project successfully demonstrates the practical implementation and
working of fundamental sorting algorithms. By converting abstract algorithmic logic into
an interactive visual experience, the project makes it easier for learners to understand how
comparisons, swaps, and recursive steps take place during sorting.

Through the visualizer, users can observe the performance of different algorithms, analyze
their efficiency, and compare their execution. The project not only enhances conceptual
clarity but also highlights the importance of algorithm selection in real-world problem
solving.

Developing this project also provided hands-on experience in front-end development using
HTML, CSS, JavaScript, React, and algorithm design, thereby improving both
programming and analytical skills. Overall, the Sorting Visualizer serves as an effective
educational tool that bridges the gap between theoretical learning and practical
understanding of sorting algorithms.

FUTURE WORK

The Sorting Visualizer project can be further enhanced with the following improvements:

1. Addition of More Algorithms: Include advanced sorting algorithms such as Heap

Sort, Radix Sort, and Counting Sort.
2. Algorithm Analysis: Display time and space complexity dynamically during
execution for better learning.
3. Comparison Mode: Allow users to run two algorithms side by side to compare their
speed and efficiency.
4. Performance Metrics: Show number of swaps, comparisons, and execution time for
detailed insights.

- 17 -
5. Responsive and Mobile Friendly: Make the application fully optimized for mobile
and tablet devices.
6. Integration with Backend: Store user preferences, history, or performance analysis
for personalized learning.
7. Gamification: Add quiz mode or challenges to make learning sorting algorithms
more interactive and engaging.

- 18 -
 REFERENCES

[1] MDN Web Docs. [Online]. Available: [Link]

[2] Bootstrap Documentation. [Online]. Available: [Link]

[3] Font Awesome. [Online]. Available: [Link]

[4] React Documentation. [Online]. Available: [Link]

- 19 -