ALGORITHM VISUALIZER

A PROJECT REPORT

Submitted by-

Prateek Srivastava (21bcs1955)

Omkar Gavhane (21bcs1975)

Bibek Budhathoki (21bcs2034)

BACHELOR OF ENGINEERING

IN
COMPUTER SCIENCE & ENGINEERING

Chandigarh University

APR 2024
 BONAFIDE CERTIFICATE
Certified that this project “ALGORITHM VISUALIZER” is bonafide work of “Prateek Srivastava,
Omkar, Gavhane, Bibek Budhathoki” who carried out the project work under my/our supervision.

SIGNATURE SIGNATURE

Dr. Sandeep Singh Kang Er. Megha Sharma

HEAD OF THE DEPARTMENT SUPERVISOR

Computer Science & Engineering Computer Science & Engineering

Submitted for the project viva-voce examination held on

INTERNAL EXAMINER EXTERNAL EXAMINER

 Acknowledgement

We would like to express our special thanks of gratitude to Er. Mupnesh for giving us the golden
opportunity to perform this project of developing an “Sorting Visualizer” under the subject of
Project. The guidance and suggestions given played a very important role in the completion of this
project. We would also like to thank our subject teacher, Mrs. Mupnesh for teaching us the same
and providing us with enough resources required for our project. Our thanks and appreciation also
go to our classmates for helping us in the laboratory and class. At last, our words aren't enough to
express our gratitude for the support and appreciation given by our beloved parents who stood
along with us till the completion of our project.
 Abstract
This project report describes the development of a Sorting Visualizer, a web-based
application that animates and visualizes the sorting process of various sorting algorithms.
The Sorting Visualizer is designed to be an educational tool for students and anyone else
who wants to learn about sorting algorithms and how they work.

Background

Sorting is a fundamental operation in computer science, and there are many different
sorting algorithms that have been developed. Each sorting algorithm has its own strengths
and weaknesses, and the best algorithm to use depends on the specific data set and the
desired performance characteristics.
Objective

The objective of this project is to develop a Sorting Visualizer that will help users to
understand how different sorting algorithms work. The Sorting Visualizer should be easy
to use and should provide users with the ability to visualize the sorting process in real
Conclusion

The Sorting Visualizer is an effective educational tool for learning about sorting algorithms
and how they work. The application is easy to use and provides users with a variety of
features that allow them to explore and visualize the sorting process in detail.
 TABLE OF CONTENTS

CHAPTER 1. INTRODUCTION

1.1 Identification of Client/Need/Identification of relevant Contemporary issue………………

1.2 Identification of Problem……………………………………………………………………
1.3 Identification of Task………………………………………………………………………..
1.4 Organization of the report…………………………………………………………………...

CHAPTER 2. DESIGN FLOW/PROCESS

2.1 Evaluation & Selection of Specification/Features………………………………………….
2.2 Design Constraints………………………………………………………………………….
2.3 Analysis of Feature and finalization subject to Constraints………………………………...
2.4 Design Flow…………………………………………………………………………...........
2.5 Design selection…………………………………………………………………………….
2.6 Implementation plan/methodology…………………………………………………………

CHAPTER 3. RESULT ANALYSIS AND VALIDATION

3.1 Implementation of solution…………………………………………………………………
3.2 Final Result…………………………………………………………………………………

CHAPTER 4. CONCLUSION AND FUTURE WORK

4.1 Conclusion…………………………………………………………………………………
4.2 Future work………………………………………………………………………………..
 CHAPTER 1

INTRODUCTION

1.1 Identification of Client/Need/Relevent Contemporary issue:

Client: Students, computer science enthusiasts, anyone who wants to learn about
sorting algorithms.
Need: To understand how different sorting algorithms work and how they compare to
each other.
Relevant Contemporary Issue: The increasing importance of data science and machine
learning. Sorting algorithms are a fundamental tool in both of these fields, and
understanding how they work is essential for anyone who wants to pursue a career in
these areas.
Here are some specific examples of how the Sorting Visualizer can be used to address
the need and relevant contemporary issue:

• Students can use the Sorting Visualizer to learn about different sorting algorithms
in a more interactive and engaging way than traditional teaching methods. 
• Computer science enthusiasts can use the Sorting Visualizer to experiment with
different sorting algorithms and to compare their performance. 
• Anyone who wants to learn about sorting algorithms can use the Sorting Visualizer
to gain a better understanding of how they work and how they are used in real-
world applications.
Overall, the Sorting Visualizer is a valuable tool for anyone who wants to learn about
sorting algorithms and how they are used in the real world. It is especially relevant in
today's world, where data science and machine learning are becoming increasingly
important.

1.2 Identification of Problem:

Sorting algorithms are a fundamental concept in computer science, but they can be
difficult to understand and visualize. This is especially true for students who are new to
computer science or who have difficulty learning abstract concepts.

One problem with traditional sorting algorithm teaching methods is that they are often too
theoretical. Students may learn about the steps involved in a sorting algorithm, but they
may not have a good understanding of how the algorithm actually works in practice.
 The Sorting Visualizer addresses these problems by providing an interactive and visual
way to learn about sorting algorithms. The Sorting Visualizer allows users to select a
sorting algorithm and then watch the algorithm sort an array of elements in real time. The
Sorting Visualizer also provides users with the ability to pause and resume the
visualization, step through the visualization one step at a time, and view the code for the
sorting algorithm.
By using the Sorting Visualizer, students can gain a better understanding of how sorting
algorithms work and how they compare to each other. The Sorting Visualizer can also
help students to develop their problem-solving and critical thinking skills.

In addition to the general problems with teaching sorting algorithms, there are also some
specific problems that the Sorting Visualizer can address:
• Lack of hands-on experience: Many students do not have the opportunity to gain
hands-on experience with sorting algorithms. The Sorting Visualizer provides
students with a way to experiment with different sorting algorithms and to compare
their performance.
• Difficulty visualizing abstract concepts: Some students have difficulty
visualizing abstract concepts, such as sorting algorithms. The Sorting Visualizer
provides students with a visual way to understand how sorting algorithms work.

Overall, the Sorting Visualizer is a valuable tool for teaching sorting algorithms. It
addresses a number of problems with traditional teaching methods and provides students
with a more effective and engaging way to learn about sorting algorithms. 1.3
Identification of Task:

The Sorting Visualizer is a web-based application that visualizes the sorting process of
various sorting algorithms. The task of the Sorting Visualizer is to:
• Allow users to select a sorting algorithm and an array of elements to sort 
• Visualize the sorting process in real time
• Provide users with the ability to pause and resume the visualization 
• Provide users with the ability to step through the visualization one step at a time 
• Provide users with the ability to view the code for the sorting algorithm 

Here are some specific tasks that the Sorting Visualizer should be able to perform:
• Display the array of elements to be sorted: The Sorting Visualizer should display
the array of elements to be sorted in a clear and concise way. The elements should
be easy to distinguish from each other, and the order of the elements should be
clear.
 • Visualize the sorting process: The Sorting Visualizer should visualize the sorting
process in a way that is easy to understand. The visualization should show how the
elements of the array are moved and compared during the sorting process. 
• Allow users to control the visualization: The Sorting Visualizer should allow
users to control the visualization process. Users should be able to pause and
resume the visualization, step through the visualization one step at a time, and
change the speed of the visualization. 

By performing these tasks, the Sorting Visualizer can help users to understand how
sorting algorithms work and how they compare to each other. The Sorting Visualizer can
also be used to teach sorting algorithms to students in a more effective and engaging
way.

1.4 Organization of the Report:

This report will explain the detailed process of how we built this application. The report will
consist of all the requirements like background study, software & database requirements. There
will be various pictorial demonstrations of how things are happening in the background, and how
codes and functions fully working. We will add improvement/update descript descriptions All the
problem problems and the way we tackled them will also be mentioned in the conclusion of the
report. The following chapters will give an elaborate description of the project.

• Chapter 1 tells about the problem we identified and our task to solve the problem alsoabout
the timeline of the project.
• Chapter 2 Describes the design constraints and process we will follow towards that design. In
the same chapter data flow diagram, and various models will give a visual description of the
project details.

• Chapter 3 Gives the results Analysis and testing methods adopted for validation of the
project.
• Chapter 4 Gives a conclusion and future work related information that can be pursued to
improve the application
 CHAPTER 2

DESIGN FLOW/PROCESS

2.1 Evaluation & Selection of Specification/Features:

When evaluating and selecting specifications/features for a Sorting Visualizer, it is

important to consider the needs of the target users. The target users of the Sorting
Visualizer are likely to be students, computer science enthusiasts, and anyone who wants
to learn about sorting algorithms.
Based on the needs of the target users, the following specifications/features are essential
for a Sorting Visualizer:
Ability to select a sorting algorithm: The Sorting Visualizer should allow users to
select a sorting algorithm to visualize.
• Ability to visualize the sorting process in real time: The Sorting Visualizer
should visualize the sorting process in real time.
• Ability to control the visualization: Users should be able to pause and resume
the visualization, step through the visualization one step at a time, and change the
speed of the visualization.
• Ability to view information about the sorting algorithm: The Sorting Visualizer
should provide users with information about the sorting algorithm that is being
visualized.
• Ability to view the code for the sorting algorithm: The Sorting Visualizer should
provide users with the ability to view the code for the sorting algorithm that is being
visualized. This will allow users to learn more about how the algorithm works and to
experiment with the algorithm.
In addition to these essential specifications/features, the following features are also
desirable for a Sorting Visualizer:

• Ability to select the size and type of data set to sort: The Sorting Visualizer
should allow users to select the size and type of data set to sort.

• Ability to compare the performance of different sorting algorithms: The

Sorting Visualizer should allow users to compare the performance of different
sorting algorithms on the same data set.
• Ability to save and load sorting visualizations: The Sorting Visualizer should
allow users to save and load sorting visualizations.
• User-friendly interface: The Sorting Visualizer should have a user-friendly
interface. The interface should be easy to navigate and should be clear and
concise.

When selecting specifications/features for a Sorting Visualizer, it is important to consider

the trade-offs between different features.
Overall, the goal of evaluating and selecting specifications/features for a Sorting
Visualizer is to create a Sorting Visualizer that is useful, informative, and engaging for the
target users.

2.2 Design Constraint:

When designing a Sorting Visualizer, there are a number of constraints that need to be
considered. These constraints include:
• Performance: The Sorting Visualizer should be able to visualize the sorting
process in real time, even for large data sets.
• Accuracy: The Sorting Visualizer should accurately visualize the sorting process.
• Usability: The Sorting Visualizer should be easy to use.
• Accessibility: The Sorting Visualizer should be accessible to users with
disabilities.
• Resources: The Sorting Visualizer should be developed within the available
resources. This includes the time, budget, and development expertise that is
available.
In addition to these general constraints, there are also a number of specific constraints
that need to be considered when designing a Sorting Visualizer. These constraints
include:
• Screen size: The Sorting Visualizer should be designed to work on a variety of
screen sizes, including desktop computers, laptops, tablets, and smartphones.
• Browser compatibility: The Sorting Visualizer should be compatible with all major
web browsers.
• Programming languages and technologies: The Sorting Visualizer should be
developed using programming languages and technologies that are familiar to the
developer.
• Budget: The Sorting Visualizer should be developed within the available budget.

By carefully considering the different design constraints, it is possible to design a Sorting

Visualizer that is useful, informative, and accessible to a wide range of users.
2.3 Analysis of Features and finalization subject to Constraints:

When designing a Sorting Visualizer, it is important to analyze the different features and to
finalize the design subject to the available constraints. This will help to ensure that the
Sorting Visualizer is useful, informative, and engaging for the target users.

Analysis of Features
The following are some of the key features of a Sorting Visualizer:

• Ability to select a sorting algorithm: It allows users to compare the performance of

different sorting algorithms and to learn about how different sorting algorithms work.
• Ability to visualize the sorting process in real time: This feature allows users to see
how the sorting algorithm works step-by-step.
 • Ability to control the visualization: This feature allows users to pause, resume, and step
through the visualization.
• Ability to view information about the sorting algorithm: This information can include
the name of the algorithm, a brief description of the algorithm, and the time complexity of
the algorithm.
• Ability to view the code for the sorting algorithm: This feature allows users to view the
code for the sorting algorithm that is being visualized. This is important because it allows
users to learn more about how the algorithm works and to experiment with the algorithm.

When analyzing the different features of a Sorting Visualizer, it is important to consider the
needs of the target users. For example, students may be more interested in the ability to
visualize the sorting process in real time, while computer science enthusiasts may be
more interested in the ability to view the code for the sorting algorithm.

Finalization Subject to Constraints

Once the different features of a Sorting Visualizer have been analyzed, it is necessary to
finalize the design subject to the available constraints. This may involve sacrificing some
features or simplifying the design in order to meet the constraints.

Here are some examples of how the design of a Sorting Visualizer can be finalized
subject to the constraints listed above:

• Performance: If the Sorting Visualizer needs to be able to visualize the sorting process of
large data sets in real time, then it may be necessary to sacrifice some accuracy or detail
in the visualization. This can be done by using a simpler visualization algorithm or by
reducing the number of elements in the data set.
• Accuracy: If the Sorting Visualizer needs to be able to accurately visualize the sorting
process, then it may be necessary to use a more complex visualization algorithm. This
may reduce the performance of the Sorting Visualizer, but it will improve the accuracy of
the visualization.

• Usability: If the Sorting Visualizer needs to be easy to use, then it is important to keep the
interface simple and intuitive. The interface should avoid using technical jargon and should
use clear and concise labels.
• Accessibility: If the Sorting Visualizer needs to be accessible to users with disabilities,
then it is important to make sure that it is compatible with screen readers and other
assistive technologies. The Sorting Visualizer should also use high-contrast colors and
large fonts to make the visualization easy to see.
• Resources: If the Sorting Visualizer needs to be developed within limited resources, then
it may be necessary to limit the scope of the project. For example, the Sorting Visualizer
may need to support only a limited number of sorting algorithms or data types.

By carefully considering the different constraints and analyzing the needs of the target
users, it is possible to finalize the design of a Sorting Visualizer that is useful, informative,
and accessible.
2.4 Design Flow:
The following is a design flow for a Sorting Visualizer:

1. Identify the target users and their needs. What are the users' goals for using the
Sorting Visualizer? What features are most important to them?
2. Analyze the different sorting algorithms that will be supported. What are the
strengths and weaknesses of each algorithm? How can the algorithms be
visualized in a way that is both informative and engaging?
3. Design the user interface. The user interface should be easy to use and
understand.
4. Implement the visualization algorithm. The visualization algorithm should be
accurate and efficient. It should be able to visualize the sorting process for a variety
of sorting algorithms and data sets.
5. Test and debug the Sorting Visualizer. Test the Sorting Visualizer with a variety
of users and data sets to ensure that it is working as expected. Fix any bugs that
are found.
6. Deploy the Sorting Visualizer. Make the Sorting Visualizer available to users
through a web browser or other platform.

2.5 Design selection:

The following are some design considerations for a Sorting Visualizer:

Data structures: The Sorting Visualizer should be able to visualize the sorting process
for a variety of data structures, such as arrays, linked lists, and trees.

Sorting algorithms: The Sorting Visualizer should support a variety of sorting algorithms,
such as bubble sort, selection sort, insertion sort, merge sort, quick sort, and heap sort.

Visualization: The visualization of the sorting process should be accurate and

informative. It should be easy for users to see how the sorting algorithm works and how
the elements of the data structure are being moved and compared.

Usability: The Sorting Visualizer should be easy to use. The user interface should be
intuitive and the features should be easy to understand.

Accessibility: The Sorting Visualizer should be accessible to users with disabilities.

This means that the Sorting Visualizer should be compatible with screen readers and
other assistive technologies.
Performance: The Sorting Visualizer should be able to visualize the sorting process in
real time, even for large data sets.

2.6 Implementation plan/methodology:

The following is an implementation plan/methodology for a Sorting Visualizer:
 1. Choose a programming language and development framework. The Sorting
Visualizer can be implemented in any programming language, but it is important to
choose a programming language that is well-suited for developing graphical user
interfaces (GUIs).
2. Design the user interface. The user interface of the Sorting Visualizer should be
easy to use and understand.
3. Implement the visualization algorithm. The visualization algorithm should be
accurate and efficient. It should be able to visualize the sorting process for a variety
of sorting algorithms and data sets.
4. Integrate the user interface and the visualization algorithm. The next step is to
integrate the user interface and the visualization algorithm. This involves creating a
GUI that allows users to interact with the visualization algorithm.
5. Test and debug the Sorting Visualizer. This involves testing the Sorting
Visualizer with a variety of sorting algorithms and data sets to ensure that it is
working as expected. Any bugs that are found should be fixed.
6. Deploy the Sorting Visualizer. Once the Sorting Visualizer has been tested and
debugged, it is ready to be deployed. This involves making the Sorting Visualizer

Methodology

The Sorting Visualizer can be implemented using a variety of methodologies. One popular
methodology is the agile methodology. The agile methodology is an iterative and
incremental approach to software development. It involves breaking down the project into
small tasks and then developing and testing those tasks in short iterations.

The agile methodology is well-suited for developing the Sorting Visualizer because it
allows for flexibility and change.

Another popular methodology is the waterfall methodology. The waterfall methodology is a

sequential approach to software development.

The best methodology for developing the Sorting Visualizer will depend on the specific
needs of the project and the team.
 CHAPTER 3
RESULT ANALYSIS AND VALIDATION

3.1 Implementation of solution

The following is an implementation of a solution for a Sorting Visualizer:

Programming language and development framework:

The Sorting Visualizer is implemented in Python using the PyQt5 development framework.
PyQt5 provides a wide range of GUI components and libraries, making it well-suited for
developing GUI applications.
User interface:
The user interface of the Sorting Visualizer is designed using the Figma design tool.
Figma is a cloud-based design tool that allows for collaboration and real-time feedback.

Visualization algorithm:
The visualization algorithm is implemented in Python using efficient data structures and
algorithms. The visualization algorithm is able to visualize the sorting process for a variety
of sorting algorithms and data sets in real time.
Integration of user interface and visualization algorithm:
The user interface and the visualization algorithm are integrated using PyQt5. PyQt5
provides a number of features that make it easy to integrate GUIs with other components,
such as the visualization algorithm.
Testing and debugging:
The Sorting Visualizer is tested and debugged using a variety of test cases. The test
cases cover a wide range of scenarios, including different sorting algorithms, data sets,
and user interactions.
Deployment:
The Sorting Visualizer is deployed as a standalone web application using PyInstaller.
PyInstaller is a tool that can convert Python scripts into executable files.

Implementation details:
The following are some implementation details for the Sorting Visualizer:

• The visualization algorithm uses a linked list to represent the data set. This allows
for efficient insertion, deletion, and movement of elements in the data set.
• The visualization algorithm uses a stack to keep track of the sorting algorithm's call
stack. This allows the visualization algorithm to pause, resume, and step through
the sorting process.
• The visualization algorithm uses a variety of techniques to visualize the sorting
process in a clear and concise way. For example, the visualization algorithm uses
different colors to represent different states of the data set, such as sorted,
unsorted, and being compared.
3.2 Final Result:

Fig 1.1

Fig 1.2
Fig 1.3
 CHAPTER 4

CONCLUSION AND FUTURE WORK

4.1 Conclusion:

The Sorting Visualizer is a successful project that meets all of its requirements. It is a web-
based application that visualizes the sorting process of various sorting algorithms in a clear,
informative, and engaging way. The Sorting Visualizer is easy to use, accurate, and reliable.
It is a valuable tool for students, computer science enthusiasts, and anyone who wants to
learn about sorting algorithms.
In addition to its core features, the Sorting Visualizer also offers several other benefits,
including:
• Accessibility: The Sorting Visualizer is designed to be accessible to users with
disabilities. It is compatible with screen readers and other assistive technologies.
• Extensibility: The Sorting Visualizer is extensible, allowing new sorting algorithms
and data structures to be easily added.
• Flexibility: The Sorting Visualizer can be used in a variety of ways, such as for
self-paced learning, classroom instruction, and research.

Overall, the Sorting Visualizer is a powerful and versatile tool for learning about sorting
algorithms. It is well-designed, well-implemented, and easy to use.

4.2 Future work:

The Sorting Visualizer can be improved in a number of ways. For example, support for more
sorting algorithms and data structures could be added. The ability to compare the performance of
different sorting algorithms and to save and load sorting visualizations would also be useful.
Additionally, the Sorting Visualizer could be translated into multiple languages and developed into
a mobile app. Here is a specific example of a future work item:

• Add the ability to generate a pseudocode representation of the sorting

algorithm that is being visualized. This would allow users to see the underlying
logic of the sorting algorithm and to learn how to implement the sorting algorithm in
their own code.
• Develop a mobile app version of the Sorting Visualizer. This would allow users
to use the Sorting Visualizer on their smartphones and tablets.