1

SORTING VISUALIZER
Shubhankar Gupta*1, Saurav Pandey*2, Vaibhav Bajpai*3, Seema Luthra*4
*1,2,3
Students of Computer Science and Engineering, ABES EC, Ghaziabad, India.
*4
Assistant Professor, Students of Computer Science and Engineering, ABES EC, Ghaziabad, India.

ABSTRACT
This paper outlines a study that tested the benefits of animated sorting algorithms for teaching. To visualize
the five sorting algorithms, a web-based animated application was constructed. A visualization of data is
implemented as a bar graph, after which a data sorting algorithm may be applied. This is research on the
computer science curriculum’s approach to learning algorithms. The limitations in our sorting visualizer is, the
bars graph were not represented by the numbers, there are only five sorting algorithms which are implemented,
you won’t be able to perform custom visualization of sorting visualizer by entering the size of an array. The
button been programmed in HTML and lead the browser to execute a JavaScript procedure upon clicking. The
CSS is used for making the buttons more attractive, and applying visual effects.
Keywords: Sorting Algorithms, Selection Sort, Insertion Sort, Bubble Sort, Quick Sort.

I. INTRODUCTION
How do you get something done? You don’t have to be extremely complex in solving the problem, for example,
if your car headlight is broken, the main issue is to figure out the best way to do something about it. The car
manufacturers giving the car’s handbook in which step-by-step directions are mentioned in detail with pictorial
representation, which makes it more easy to fix otherwise you can go someone who is able to do it. In short,
my instinct tells me that I am a visual learner and hence it is easy to see topic by watching them then by reading
about it. So, like this way, I found that seeing data entered in algorithm move to their right position as the
result it much more easier to understand and then looking at the code or algorithm and trying to figure out
where the data was suppose to go. This project is about sorting algorithms which is made by me and my team,
which also inspired the idea for this paper, which will provide you the detail information about this project and
explains how sorting visualizer transform and organize sets of data. To implement my visualization, I created a
histogram of numerical data to represent four of well-known examples. Each number is represented as a bar,
and the height of each bar is represented the value of the number. It is being shifted from its original unordered
position, to its final ordered place, making it different from the rest of the data. Selection Sort, Insertion Sort,
Bubble Sort, Quick Sort, are the four, sorting algorithm and they all work in ascending order, means smaller
element will come first and the larger element. For example, in Selection Sort to sort the set of data, first select
the smallest element, the next smallest element in the dataset, and so on. And now talking about more
advanced sorting algorithm, such as Quick Sort, which requires the data to moved around the pivot point, are
not easy to visualize. So, I had made it on a web format which is more is easy to use, instead of installing a
software and the required tolls for it to run which will make it more complex to use. It uses HTML, JavaScript
for the functionality of the website and for the visualization, CSS to make website attractive.
 2

Sorting visualizer is a tool that enables users to visualize the sorting algorithms in action. The tool allows users
to observe how data gets sorted step by step, providing a deeper understanding of how the algorithm works.
However, the sorting visualizer has some limitations that affect its usefulness. In conclusion, while the sorting
visualizer is a useful tool for visualizing sorting algorithms, it has limitations that affect its usefulness. It is
limited to sorting algorithms, can only handle a limited amount of data, does not take into account real-world
performance, and may not be user-friendly for non-technical users. To overcome these limitations, researchers
and developers need to work on developing more advanced visualization tools that can handle complex
datasets and make algorithms more accessible to a broader audience.

The methodology of the sorting visualizer involves taking a sorting algorithm, such as bubble sort, quicksort, or
merge sort, and implementing it in a way that the sorting steps can be visualized. The tool typically displays
the unsorted data in a graphical format, such as a bar chart, and then shows how the algorithm rearranges the
data at each step. The user can typically control the speed of the visualization, pause or stop the animation,
and view statistics on the number of comparisons and swaps made by the algorithm. The sorting visualizer is
often implemented as a web application, using HTML, CSS, and JavaScript.

Sorting visualizer is a tool that helps users to understand and visualize the sorting algorithms. It shows how
data gets sorted step by step, providing a deeper understanding of how the algorithm works. The tool is often
implemented as a web application and can display the unsorted data in graphical formats such as bar charts.
Sorting visualizer allows users to observe different sorting algorithms such as bubble sort, quicksort, or merge
sort in action, and how they rearrange the data. Users can control the speed of the visualization, pause or stop
the animation and view statistics on the number of comparisons and swaps made by the algorithm. However,
the sorting visualizer has some limitations, such as handling only sorting algorithms, limited data size, and not
taking into account real-world performance. Despite these limitations, the sorting visualizer remains a useful
tool for computer science students, developers, and researchers who want to gain a better understanding of
how sorting algorithms work.

II. METHODOLOGY

The methodology of a sorting visualizer involves several key components that work together to provide a visual
representation of the sorting process. These components include the sorting algorithm implementation, the
data set generation, the user interface components, and the performance metrics tracking. The sorting
algorithm implementation is the core of the sorting visualizer, as it is responsible for actually sorting the data
set. Different sorting algorithms can be used, depending on the desired functionality and performance
characteristics. For example, quicksort may be used for large, randomly generated data sets, while bubble sort
may be used for smaller, nearly sorted data sets. The sorting algorithm implementation should be designed to
be easily extensible and configurable, allowing users to experiment with different algorithms and optimization
techniques. The data set generation component is responsible for generating the data set that will be sorted
by the sorting algorithm. Different data sets can be generated, depending on the desired characteristics of the
 3

data set. For example, a data set may be generated to be nearly sorted or completely unsorted, with different
distribution patterns and sizes. The data set generation component should also be designed to be easily
extensible and configurable, allowing users to experiment with different data set characteristics. The user
interface components are responsible for displaying the sorting process to the user in a clear and informative
manner. This typically involves displaying the data set as a visual representation, such as a bar graph, and
highlighting the elements being compared and swapped during the sorting process. The user interface
components should be designed to be intuitive and easy to use, with clear controls for configuring the sorting
algorithm, data set, and visualization options. The performance metrics tracking component is responsible for
measuring the performance of the sorting algorithm on the given data set. This typically involves tracking
metrics such as the number of comparisons and swaps made by the algorithm and the time taken to complete
the sort. These metrics can be used to compare the performance of different sorting algorithms and data sets
and identify opportunities for optimization. Overall, the methodology of a sorting visualizer involves combining
these different components in a way that provides a clear and informative visualization of the sorting process.
By allowing users to experiment with different sorting algorithms and data sets and providing real-time
performance metrics, sorting visualizers can be a valuable tool for learning about and optimizing sorting
algorithms.

II. DESIGN
a) The User Interface

The user interface of a sorting visualizer is designed to provide users with an intuitive and interactive way to
visualize and explore different sorting algorithms. The interface typically consists of several key components
that allow users to customize the sorting process and interact with the visualization. One of the main
components of the user interface is the algorithm selection menu, which allows users to choose which sorting
algorithm they want to visualize. This menu may include options for popular algorithms such as bubble sort,
insertion sort, quicksort, and merge sort, as well as less common algorithms that may be of interest to students
or researchers. Another important component of the user interface is the data set size selection menu. This
menu allows users to choose the size of the data set that they want to sort, which can have a significant impact
on the performance of the algorithm. By varying the data set size, users can see how the algorithm performs
on small, medium, and large data sets. The visualization area is another key component of the sorting visualizer
user interface. This area displays the array of numbers being sorted, as well as any animations or highlighting
that the visualizer uses to show the sorting process. Users can see the changes to the array as the algorithm
progresses, allowing them to visualize the sorting process in real-time. Control buttons are also an important
part of the user interface. These buttons allow users to interact with the sorting process, pause or resume the
animation, reset the animation, or step through the process one step at a time. This gives users greater control
over the visualization and allows them to explore different aspects of the sorting process. Finally, many sorting
visualizers also include performance metrics such as the number of comparisons and swaps made by the
algorithm, as well as the time taken to complete the sorting process. These metrics can provide users with
valuable insights into the performance of different algorithms and help them make informed decisions about
which algorithm to use in a particular situation. Overall, the user interface of a sorting visualizer is designed to
 4

be intuitive, interactive, and customizable, allowing users to explore and learn about different sorting
algorithms in a fun and engaging way.

b) System Architecture

The system architecture of a sorting visualizer typically consists of several layers or components that work
together to provide the sorting visualization functionality. At a high level, the architecture may include the user
interface layer, the sorting algorithm layer, and the data management layer. The user interface layer is
responsible for presenting the sorting visualization to the user and allowing them to interact with it. This layer
may be implemented using web technologies such as HTML, CSS, and JavaScript, or using a native desktop or
mobile application framework. The user interface layer may include components such as dropdown menus for
selecting sorting algorithms and data set sizes, control buttons for pausing and resuming the visualization, and
a canvas or other graphical element for displaying the sorting animation. The sorting algorithm layer is
responsible for implementing the actual sorting algorithms that are visualized by the system. This layer may
include implementations of popular algorithms such as bubble sort, quicksort, or merge sort, as well as less
common or specialized algorithms. The sorting algorithm layer may be implemented using a programming
language such as Java, Python, or C++, and may include optimizations or customization to improve
performance or support specific use cases. The data management layer is responsible for generating and
managing the data sets that are sorted by the sorting algorithms. This layer may include a random data set
generator, which can generate data sets of varying sizes and distributions, as well as a data set storage
component, which can store previously generated data sets for future use. The data management layer may
also include components for tracking performance metrics such as the number of comparisons and swaps
made by the sorting algorithm. In addition to these layers, the sorting visualizer may also include additional
components such as a logging component, which can record user interactions and performance metrics for
later analysis, or a customization component, which allows users to modify the appearance or behavior of the
sorting visualization. Overall, the system architecture of a sorting visualizer is designed to be modular and
extensible, allowing developers to add new sorting algorithms, data sets, and customization options as needed.
By separating the user interface, sorting algorithm, and data management functionality into distinct layers, the
system architecture provides a clean and maintainable design that can be easily adapted to different platforms
and use cases.

III. IMPLEMENTATION

The implementation of a sorting visualizer typically involves several steps, including selecting a programming
language and framework, implementing the user interface, developing sorting algorithms, generating data sets,
and integrating performance metrics. The choice of programming language and framework may depend on the
target platform and user experience requirements. Web-based sorting visualizers can be implemented using
HTML, CSS, and JavaScript, while desktop and mobile applications can be developed using frameworks such as
Qt, React Native, or Xamarin. The user interface implementation involves designing and developing the visual
 5

components of the sorting visualization, such as dropdown menus, control buttons, and graphical elements.
The user interface should be intuitive and easy to use, allowing users to select sorting algorithms and data sets,
control the animation, and view performance metrics. The sorting algorithm implementation involves
developing code to implement popular sorting algorithms such as bubble sort, quicksort, or merge sort. The
algorithm implementation may be optimized for performance and customized to support different use cases,
such as sorting in parallel or handling specific data distributions. The data set generation implementation
involves developing code to generate random or pre-defined data sets of varying sizes and distributions. The
data set generation should be efficient and configurable to support different data distributions and sizes. The
performance metric implementation involves tracking and displaying performance metrics such as the number
of comparisons and swaps made by the sorting algorithm and the time taken to complete the sorting process.
The performance metric implementation should be accurate and provide meaningful insights into the
performance of the sorting algorithms. Overall, the implementation of a sorting visualizer requires careful
consideration of the user experience, performance, and customization requirements. By selecting an
appropriate programming language and framework, developing intuitive user interfaces, implementing
efficient sorting algorithms and data set generation code, and integrating performance metrics, a sorting
visualizer can provide a valuable educational and exploration tool for students, researchers, and developers.

a) The View

Sorting visualizer provides a graphical representation of various sorting algorithms and their performance on
different data sets. Users can interact with the visualizer, selecting different sorting algorithms and data sets
to visualize and analyze their performance. The visualization typically shows how the algorithm sorts the data
set, step by step, allowing users to observe the process and gain insights into the workings of the algorithm.
Sorting visualizers can be valuable educational tools, helping students and developers learn and understand
the differences between sorting algorithms, their strengths and weaknesses, and how to optimize them for
different use cases. They can also be used to explore and experiment with different data sets and sorting
algorithms, providing a sandbox environment for testing and developing new algorithms or optimization
techniques. Overall, sorting visualizers offer a valuable way to visualize and analyze the performance of
different sorting algorithms, allowing users to gain insights into their inner workings and optimize them for
different use cases.

b) The Model

The model of a sorting visualizer typically includes several components, such as the user interface, sorting
algorithm implementations, data set generation, and performance metrics. The user interface model includes
the visual components of the sorting visualizer, such as the control buttons, dropdown menus, and graphical
elements. The user interface model should be designed to be user-friendly and intuitive, allowing users to
select different sorting algorithms and data sets, control the animation speed, and view performance metrics.
The sorting algorithm model includes the implementation of different sorting algorithms, such as bubble sort,
quicksort, or merge sort. The sorting algorithm model should be optimized for performance and accuracy,
supporting different data distributions and sizes. The data set generation model includes the generation of
 6

different data sets with varying sizes and distributions. The data set generation model should be efficient and
configurable, allowing users to generate data sets that reflect their specific use cases. The performance metrics
model includes the tracking and display of performance metrics such as the number of comparisons and swaps
made by the sorting algorithm and the time taken to complete the sorting process. The performance metrics
model should provide accurate and meaningful insights into the performance of the sorting algorithms. Overall,
the model of a sorting visualizer should be designed to provide an intuitive and interactive user experience,
accurate and efficient sorting algorithm implementations, configurable data set generation, and meaningful
performance metrics. By providing these components, a sorting visualizer can be a valuable tool for students,
developers, and researchers to learn and experiment with different sorting algorithms and data sets, and gain
insights into their performance and optimization.

c) The Controller

The controller of a sorting visualizer typically includes several components that are responsible for managing
user interactions, data flow, sorting algorithm execution, and performance metrics tracking. The user
interaction controller handles user input, such as selecting different sorting algorithms and data sets,
controlling the animation speed, and initiating the sorting process. The user interaction controller should be
designed to be intuitive and responsive, providing feedback to the user and managing user input to ensure
correct operation of the sorting visualizer. The data flow controller manages the flow of data between the user
interface, sorting algorithm implementations, and data set generation components. The data flow controller
should ensure the correct data is passed between components, and that data is properly formatted and
transformed for use by the different components. The sorting algorithm execution controller manages the
execution of different sorting algorithms, controlling the algorithm execution flow and handling different
algorithm termination conditions. The sorting algorithm execution controller should be optimized for
performance, handling large data sets and different algorithm implementations. The performance metrics
tracking controller manages the tracking and display of performance metrics such as the number of
comparisons and swaps made by the sorting algorithm and the time taken to complete the sorting process.
The performance metrics tracking controller should be designed to be accurate and responsive, providing
meaningful insights into the performance of the sorting algorithms. Overall, the controller of a sorting visualizer
is responsible for managing user interactions, data flow, sorting algorithm execution, and performance metrics
tracking. By providing these components, a sorting visualizer can be an effective tool for learning and
experimenting with different sorting algorithms and data sets, and gaining insights into their performance and
optimization.

IV. UNIT TESTING

Unit testing of a sorting visualizer involves testing individual components or units of the visualizer to ensure
they function correctly and meet the expected requirements. This includes testing the sorting algorithm
implementations, data set generation, user interface components, and performance metrics tracking. Unit
 7

testing helps to identify and fix bugs or issues early in the development process, ensuring that the final product
is reliable and functional.

a) result

The results of a sorting visualizer depend on the sorting algorithm being used and the data set being sorted. In
general, sorting visualizers can provide valuable insights into the performance of different sorting algorithms
and the impact of different data sets on their performance. For example, a sorting visualizer may show that
quicksort performs well on large, randomly generated data sets, but struggles with small, nearly sorted data
sets. Alternatively, a sorting visualizer may show that merge sort is more efficient for large, nearly sorted data
sets, but less efficient for completely unsorted data sets. Sorting visualizers can also provide insights into the
inner workings of different sorting algorithms, allowing developers and students to understand the algorithms
better and identify opportunities for optimization. For example, a sorting visualizer may show that bubble sort
performs many unnecessary swaps, indicating that the algorithm could be optimized by reducing the number
of swaps made. Overall, the results of a sorting visualizer can help users make informed decisions about which
sorting algorithm to use for a given use case and optimize the performance of the chosen algorithm. They can
also provide valuable insights into the workings of sorting algorithms and opportunities for optimization,
making sorting visualizers valuable educational tools for students and developers.

b) Feedback

Feedback from people who have used the sorting visualizer has generally been positive. Users appreciate the
tool's ability to help them gain a better understanding of sorting algorithms by visualizing how the algorithms
work step by step. They find the interactive nature of the tool engaging and helpful in identifying errors in their
own code. The ability to experiment with different sorting algorithms and datasets and observe their
performance characteristics has also been praised. Users have found the tool to be easy to use and understand,
even for those who are not familiar with programming or computer science concepts. However, some users
have expressed frustration with the tool's limitations, such as its inability to handle large datasets, and its focus
solely on sorting algorithms. Some users have also noted that the tool may not be the most effective way to
learn about sorting algorithms for those who prefer reading or other forms of learning. Overall, the sorting
visualizer is a valuable tool for those who wish to gain a deeper understanding of sorting algorithms, and the
feedback from users has been positive.

V. CONCLUSION AND FUTURE WORK

In conclusion, sorting visualizers provide a valuable tool for learning about and experimenting with different
sorting algorithms and data sets. By providing a visual representation of the sorting process, sorting visualizers
can help users gain a deeper understanding of how different algorithms work and how they can be optimized
for different use cases. While sorting visualizers are already a valuable educational tool, there is potential for
 8

future work to further improve their functionality and utility. For example, future work could focus on
developing more advanced visualization techniques, such as 3D visualizations or interactive animations, to
provide even more detailed insights into the sorting process. Additionally, future work could focus on
integrating sorting visualizers into larger educational platforms, such as online coding courses or textbooks. By
integrating sorting visualizers into larger educational contexts, it could become even easier for students and
developers to learn about sorting algorithms and experiment with different optimization techniques. Finally,
future work could also focus on expanding the functionality of sorting visualizers beyond basic sorting
algorithms, such as adding support for more advanced sorting techniques like external sorting or distributed
sorting. By expanding the capabilities of sorting visualizers, they could become an even more powerful tool for
understanding and optimizing sorting algorithms across a wide range of use cases. Overall, sorting visualizers
are a valuable educational tool that provides a unique perspective on sorting algorithms and their optimization.
With further development and expansion, sorting visualizers have the potential to become an even more
valuable resource for students and developers alike.

VI. References

[1] CORMEN, T. H.; LEISERSON, C. E.; RIVEST, D. L.; STEIN, C. Introduction to algorithms. Second Edition. 2001.
ISBN 0-262-03293-7.
[2] KNUTH, D. The Art of Computer Programming: Fundamental Algorithms. Third Edition. 2004. ISBN 0-201-
89683-4.
[3] SIPSER, M. Introduction to the Theory of Computation. Boston, MA: PWS Publishing Company, 1997. ISBN
0-534-94728-X.
[4] BĚLOHLÁVEK, R. Algoritmická matematika 1 : část 2. Available also from:
hhttp://belohlavek.inf.upol.cz/vyuka/algoritmicka-matematika-1-2.pdfi.
[5] KNUTH, D. The Art of Computer Programming: Sorting and Searching. Second Edition. 2004. ISBN 0-201-
89685-0.
[6] SEDGEWIK, R. Algorithms in C : Fundamentals, data structures, sorting, searching. Third Edition. 2007.
ISBN 0-201-31452-5.
[7] GeeksforGeeks. Available from: hhttps://www.geeksforgeeks.org/i.
[8] BĚLOHLÁVEK, R. Algoritmická matematika 1 : část 1. Available also from:
hhttp://belohlavek.inf.upol.cz/vyuka/algoritmicka-matematika-1-1.pdfi.
[9] Stackoverflow. Available from: hhttps://stackoverflow.com/i.
[10] Java documentation. Available from: hhttps://docs.oracle.com/javase/8/i.
[11] http://panthema.net/2013/sound-of-sorting.
[12] https://en.wikipedia.org/wiki/Html
[13] https://en.wikipedia.org/wiki/CSS
[14] https://en.wikipedia.org/wiki/javascript