Visualizing Sorting Algorithms

A PROJECT REPORT

Submitted by

ABHIRAJ ARORA(22BCS14763)
DILBAG YADAV(22BCS15574)

in partial fulfillment for the award of the degree of

BACHELOR OF ENGINEERING

IN

COMPUTER SCIENCE & ENGINEERING

Chandigarh University

October, 2024
 BONAFIDE CERTIFICATE

Certified that this project report “Visualizing Sorting Algorithms” is the bonafide
work of “ABHIRAJ ARORA(22BCS14763), DILBAG YADAV(22BCS15574)”
who carried out the project work under my/our supervision.

SIGNATURE SIGNATURE

HEAD OF DEPARTMENT SUPERVISOR

 TABLE OF CONTENTS

CHAPTER 1. INTRODUCTION ......................................................................... 1

1.1. Introduction to Project...................................................................................................... 1 1.2.

Identification of Problem.................................................................................................. 1

CHAPTER 2. BACKGROUND STUDY ............................................................. 2

2.1. Existing solutions ............................................................................................................. 2

2.2. Problem Definition ........................................................................................................... 2

2.3. Goals/Objectives ........................................................................................................... 2-3

CHAPTER 3. DESIGN FLOW/PROCESS ......................................................... 4

3.1. Evaluation & Selection of Specifications/Features .......................................................... 4

3.2. Analysis of Features and finalization subject to constraints ............................................ 4

3.3. Design Flow ..................................................................................................................... 4

CHAPTER 4. RESULTS ANALYSIS AND VALIDATION ............................ 5
4.1. Implementation of solution .............................................................................................. 5

CHAPTER 5. CONCLUSION AND FUTURE WORK .................................... 6

5.1. Conclusion ........................................................................................................................ 6

5.2. Future work ...................................................................................................................... 6

REFERENCES…………………………..……………………………………7
 INTRODUCTION

1.1. Overview of the Project

A fundamental component of computer science, sorting algorithms allow for
effective data management. However, it might be difficult to understand the
complex workings of sorting algorithms, especially for novice hobbyists and
students. An inventive effort called the Sorting Algorithm Visualizer aims to
solve this problem by providing an interactive and visual way to comprehend
sorting algorithms.

1.2. Problem Identification

The conventional method of learning sorting algorithms, which frequently entails
examining theoretical details from textbooks and analyzing code samples, often falls
short of providing a comprehensive understanding. While these methods offer
valuable foundational knowledge, they lack the ability to fully engage learners by
immersing them in the dynamic processes that sorting algorithms undertake.
Students may grasp the mechanics in theory, but without direct interaction or
realtime feedback, their understanding remains abstract and less intuitive.

To address this challenge, the Sorting Algorithm Visualizer was developed as an

innovative educational tool. This visualizer brings sorting algorithms to life by
allowing users to not only observe but actively interact with the process. Instead of
passively reading or reviewing static code, users can manipulate and engage with the
data sets, gaining immediate insight into how various algorithms function step-
bystep.

By providing a highly interactive and visual representation of algorithms such as

Bubble Sort, Quick Sort, Merge Sort, and more, the visualizer creates an immersive
learning environment. Users can adjust parameters, experiment with different data
inputs, and see how the algorithms respond in real-time, thus deepening their
understanding through hands-on experience. The project’s goal is to bridge the gap
between theoretical knowledge and practical application, fostering a more intuitive
and engaging way to learn sorting algorithms.
 LITERATURE REVIEW/BACKGROUND STUDY

2.1. Current remedies

Before the development of the Sorting Algorithm Visualizer, the process of learning
and teaching sorting algorithms heavily relied on traditional static materials. These i
ncluded printed illustrations, short snippets of code, and written descriptions that pro
vided the theoretical foundations of various sorting techniques. Despite their importa
nce in laying out the fundamental concepts, these static resources often lacked the ab
ility to engage students in an interactive and practical manner. The static nature of th
ese materials meant that students could only passively observe the workings of an al
gorithm, without the opportunity to actively experiment and visualize the sorting pro
cess in realtime. This passive learning approach often resulted in a limited understan
ding of the dynamic behavior and efficiency of different sorting algorithms. Consequ
ently, both instructors and students found it challenging to fully grasp and appreciate
the intricacies and nuances of these algorithms, which are critical for their effective
application in real-world programming scenarios.

2.1. Define the Problem

The issue is two-fold: first, there aren't many interactive learning resources available
for sorting algorithms; second, students must be able to transition from theory to
practice. The Sorting Algorithm Visualizer is made to solve these problems by
providing a novel method of instruction.

2.1. Goals/Objectives

The Sorting Algorithm Visualizer's main goals are as follows:

• Improving Algorithmic Understanding: The visualizer seeks to give users a

thorough comprehension of the operation of sorting algorithms. This involves
displaying the sequential sorting process and the effect of algorithmic decisions on
productivity.

• Real-time Feedback: One of the main goals of the sorting process is to provide
real- time feedback. In order to empower users to make wise decisions, the visualizer
seeks to provide them with instantaneous insights on the effects of their interactions.
• Practical Application: The visualizer ought to function as a useful learning aid in
addition to imparting theoretical knowledge. Users ought to be able to try out various
situations and obtain practical experience with data sorting.

• Sound Integration: The goal of integrating audio feedback is to improve user

experience and increase the immersion of the learning process. The notions are further
reinforced by the ability for users to hear detect the outcomes of their interactions.

• Scalability: Future revisions of the visualizer can incorporate new sorting

algorithms and features because it is built to be scalable.

• instructional Resource: Students, teachers, and everyone else with an interest in

algorithms and data structures should find the project to be a useful instructional
resource. It ought to cover every aspect of sorting algorithms, from the fundamentals
to more complex subjects.

Contemporary Research and Developments

The current state of sorting algorithm research is focused on the development of new
algorithms and the optimization of existing ones to handle increasingly complex and
large-scale datasets more efficiently. With the exponential growth of data across
various fields, sorting large datasets has become critical, especially in fields like big
data analytics, artificial intelligence, and scientific computing. Researchers are
exploring innovative approaches to enhance both speed and scalability, with
significant attention on the following areas:

Distributed and Parallel Sorting: With the rise of multicore processors and
distributed computing systems, parallel sorting algorithms have gained immense
importance. These methods allow sorting tasks to be split across multiple processors,
significantly speeding up the process. Algorithms like parallel Quick Sort and
parallel Merge Sort leverage concurrent processing, where data is divided and
processed simultaneously, making them ideal for systems where high performance
and speed are paramount. Distributed sorting methods are also essential in cloud
computing and big data platforms where datasets are distributed across multiple
nodes.

External Sorting: In cases where datasets exceed the capacity of a computer’s main
memory, external sorting algorithms become indispensable. These algorithms, such
as Multiway Merge Sort, are designed to manage large-scale datasets by minimizing
the number of expensive disk I/O operations. They ensure that the majority of data
processing happens in memory, while carefully accessing external storage only when
necessary. This is critical in scenarios where datasets are too large to fit into the
system’s RAM, such as in large database management systems and big data
platforms.

Cache-efficient Sorting: As modern computer architectures increasingly rely on

hierarchical memory structures, the performance of sorting algorithms is often
bottlenecked by cache performance. Cache-efficient algorithms, like Timsort, which
is used in popular programming languages like Java and Python, are optimized to
reduce cache misses by taking advantage of spatial and temporal locality. These
algorithms aim to minimize the movement of data between different levels of the
memory hierarchy, ensuring that the most frequently accessed data is kept in the
fastest memory layers, thus speeding up the sorting process in modern systems.

Hybrid Algorithms: Hybrid sorting algorithms combine the strengths of multiple

algorithms to deliver optimal performance under varying conditions. Introsort, for
example, begins by using Quick Sort but switches to Heap Sort when the recursion
depth exceeds a certain limit, avoiding the worst-case performance of Quick Sort.
Similarly, Timsort, a hybrid of Merge Sort and Insertion Sort, is designed to handle
real-world datasets efficiently by leveraging their often partially sorted nature. These
hybrid algorithms are tailored to specific use cases, ensuring that the right strategy
is employed based on the input data’s characteristics.
 DESIGN FLOW/PROCESS
The development of the Sorting Algorithm Visualizer involved a thoughtful evaluation
and selection of key specifications and features that aligned with the project’s
objectives. These considerations included implementing multiple sorting algorithms,
enabling user interaction, providing real-time feedback, and designing a visually
appealing interface that enhanced the overall learning experience.

4.1. Analysis of Features and Finalization Subject to Constraints

Several constraints played a pivotal role in shaping the final design and
functionality of the visualizer. The primary technological limitation was the use of
web technologies like HTML, CSS, and JavaScript, which defined the platform
on which the visualizer would run. These technologies were chosen for their
widespread compatibility and ease of integration with web browsers, ensuring
accessibility for users across different devices.
Given these constraints, the project prioritized key features that would enhance
user experience. Fluid animations were essential to demonstrate the step-by-step
process of sorting algorithms, making the visualization not only informative but
also engaging. Additionally, an intuitive user interface was designed to ensure ease
of use, allowing users to navigate the visualizer seamlessly without the need for
technical expertise. The emphasis was placed on making the interface clean,
interactive, and responsive, while balancing performance considerations to
maintain smooth operation, even on resource-limited devices.

4.2. Design Flow

The design flow for the Sorting Algorithm Visualizer followed a structured
approach, ensuring that each component worked harmoniously to provide an
optimal user experience. The major steps involved in the design flow included:
• Setting up the Canvas for Visual Aids: A visual canvas was created using
HTML5’s <canvas> element, allowing for dynamic rendering of sorting
algorithms in real-time. This canvas serves as the primary space where the user
can view and interact with the sorting processes.
• Configuring an Audio Environment for Audible Feedback: To enhance the
interactive experience, an audio environment was integrated, providing audible
cues during sorting operations. These cues serve as additional feedback
mechanisms, reinforcing the visual aspects of the algorithms and helping users
identify important events such as comparisons or swaps between elements.
• Implementing Animations for Sorting Algorithms: The core feature of the project
involved bringing the sorting algorithms to life through fluid animations. Each
step of the algorithm was animated, allowing users to visualize how data elements
are sorted in real-time. These animations are essential for users to grasp the
intricate details of each sorting technique, from simple swaps in Bubble Sort to
the more complex partitioning in Quick Sort.
• Controlling User Interaction via "Init" and "Play" Buttons: User control was an
important aspect of the project, enabling users to manipulate the flow of the
visualizations. The "init" button allows users to initialize or reset the data set,
while the "play" button starts the sorting process, offering real-time control over
the algorithms. Additional controls for pausing, resetting, or adjusting speed may
also be incorporated to further enhance user interaction, ensuring that learners
can proceed at their own pace and focus on specific steps of the algorithm.
 CODE
# needed libraries from tkinter
import * import tkinter.ttk from
sorting_algorithms import *
import random

root = Tk() root.title('Sorting Algorithms

Visualization') root.geometry('900x600')
root.config(background='#fff')

# variables dataset = [] stop_flag

= False sorting_algorithm =
StringVar() graph_type =
StringVar() sorting_alg =
SortingAlgorithms()

# Buttons def
start_btn():

global dataset, stop_flag

generateBtn.config(state=DISABLED)
startBtn.config(state=DISABLED) stopBtn.config(state=NORMAL)
resetBtn.config(state=DISABLED) if stop_flag:

stop_flag = False
if sorting_algorithm.get() == 'Bubble Sort':
sorting_alg.bubble_sort(dataset, draw_data, animation_speed.get(), stop_flag)
update_header_labels(sorting_alg.get_comparisons_count(), 'O(n^2)')
 elif sorting_algorithm.get() == 'Quick Sort':
sorting_alg.quick_sort(dataset, 0, len(dataset) - 1, draw_data,
animation_speed.get()) draw_data(dataset, ['green' for i in
range(len(dataset))])
update_header_labels(sorting_alg.get_comparisons_count(), 'O(n log n)')

elif sorting_algorithm.get() == 'Insertion Sort':

sorting_alg.insertion_sort(dataset, draw_data, animation_speed.get())
update_header_labels(sorting_alg.get_comparisons_count(), 'O(n^2)')

elif sorting_algorithm.get() == 'Selection Sort':

sorting_alg.selection_sort(dataset, draw_data, animation_speed.get())
update_header_labels(sorting_alg.get_comparisons_count(), 'O(n^2)')

elif sorting_algorithm.get() == 'Merge Sort':

sorting_alg.merge_sort(dataset, draw_data, animation_speed.get())
draw_data(dataset, ['green' for i in range(len(dataset))])
update_header_labels(sorting_alg.get_comparisons_count(), 'O(n^2)')

generateBtn.config(state=NORMAL)
startBtn.config(state=NORMAL) stopBtn.config(state=DISABLED)
resetBtn.config(state=NORMAL)

def stop_btn():
global stop_flag
stop_flag = True
def reset_btn(): global dataset dataset = []
comparison_label.config(text="")
algorithm_complexity_label.config(text="")
draw_data(dataset, [])

# A utility function to draw the dataset. It can draw the dataset in 3 different ways:
# 1. Bar
# 2. Scatter # 3. Stem def
draw_data(data_set, clr):

if graph_type.get() == 'Bar':
cv.delete('all') cv_height = 380
cv_width = 700 x_width = cv_width /
(len(data_set) + 1) offset = 30
space_between = 5 data = [i /
max(data_set) for i in data_set] for i, h in
enumerate(data):

x0 = i * x_width + offset + space_between

y0 = cv_height - h * 320
x1 = (i + 1) * x_width + offset
y1 = cv_height

cv.create_rectangle(x0, y0, x1, y1, fill=clr[i])

cv.create_text(x0 + 2, y0, anchor=SW, text=str(data_set[i]))

elif graph_type.get() == 'Stem':

cv.delete('all') cv_height = 380
cv_width = 700 x_width = cv_width /
(len(data_set) + 1) offset = 30 data
= [i / max(data_set) for i in data_set]

for i, h in enumerate(data):
x = i * x_width + offset y
= cv_height - h * 320

cv.create_line(x, cv_height, x, y, fill=clr[i], width=2)

cv.create_oval(x - 2, y - 2, x + 2, y + 2, fill=clr[i]) cv.create_text(x
+ 5, y - 5, anchor=SW, text=str(data_set[i]))

elif graph_type.get() == 'Scatter':

cv.delete('all')
cv_height = 380 cv_width
= 700

x_width = cv_width / (len(data_set) + 1)

offset = 30 data = [i / max(data_set)
for i in data_set]

for i, h in enumerate(data):
x = i * x_width + offset y
= cv_height - h * 320

cv.create_oval(x - 2, y - 2, x + 2, y + 2, fill=clr[i])
cv.create_text(x + 5, y - 5, anchor=SW, text=str(data_set[i]))

root.update_idletasks()
# A utility function to generate a dataset with random numbers
# this function is called in case the user did not enter any values through entry def
generate_dataset():
global dataset min_val =
int(dataset_min_value.get()) max_val =
int(dataset_max_value.get()) data_size
= int(dataset_size.get())

dataset = [] for i in
range(data_size):
dataset.append(random.randrange(min_val, max_val + 1))
# draw data draw_data(dataset, ['#FF597B' for i in
range(len(dataset))]) # A utility function to show the
comparisons count and time

# complexity of a sorting algorithm to user def

update_header_labels(comparisons_count, time_complexity):
comparison_label.config(text=f"Comparisons Count: {comparisons_count}")
algorithm_complexity_label.config(text=f"Algorithm Complexity:
{time_complexity}")

def process_input(): global dataset

user_input = entry.get() # Process the input
array array = [int(x) for x in
user_input.split(",")] dataset = []
# copying the entry values into our dataset for i in array:
dataset.append(i) # draw data draw_data(dataset,
['#FF597B' for i in range(len(dataset))])
 # make the entry empty after its processed
entry.delete(0, END)

# GUI Setup sidebar_fr = Frame(root, width=220, height=230,

background='#ECF2FF') sidebar_fr.grid(row=0, column=0, rowspan=3,
sticky='ns')

header = Frame(root, width=820, height=130, background='#F3F1F5', padx=0,

pady=0) header.grid(row=0, column=1, padx=0, pady=5, columnspan=1)
comparison_label = Label(header, text="", bg='#fff', font=('consolas', 14,
"bold"), pady=12) comparison_label.pack()

algorithm_complexity_label = Label(header, text="", bg='#fff', font=('consolas', 14,

"bold"), pady=12) algorithm_complexity_label.pack()

cv = Canvas(root, width=820, height=480, background='#fff') cv.grid(row=1,

column=1, padx=0, pady=5, columnspan=1)

sorting_algo = tkinter.ttk.Combobox(sidebar_fr, values=['Sorting Algorithm', 'Bubble

Sort', 'Quick Sort', 'Insertion Sort', 'Selection Sort', 'Merge Sort'],
textvariable=sorting_algorithm) sorting_algo.grid(row=1,
column=0, padx=5, pady=5) sorting_algo.current(0)

graph = tkinter.ttk.Combobox(sidebar_fr, values=['Graph Type', 'Bar', 'Scatter',

'Stem'], textvariable=graph_type) graph.grid(row=2,
column=0, padx=5, pady=5) graph.current(0)

dataset_size = Scale(sidebar_fr, from_=3, to=50, resolution=1,

orient=HORIZONTAL, label="Dataset Size", background='#fff', length=150)
dataset_size.grid(row=3, column=0, padx=5, pady=5, sticky=W)
dataset_min_value = Scale(sidebar_fr, from_=1, to=100, resolution=1,
orient=HORIZONTAL, label="Minimum Value", background='#fff', length=150)
dataset_min_value.grid(row=4, column=0, padx=5, pady=5, sticky=W)
dataset_max_value = Scale(sidebar_fr, from_=100, to=1000, resolution=1,
orient=HORIZONTAL, label="Maximum Value", background='#fff', length=150)
dataset_max_value.grid(row=5, column=0, padx=5, pady=5, sticky=W)

animation_speed = Scale(sidebar_fr, from_=0.1, to=5.0, length=150, digits=2,

resolution=0.1, orient=HORIZONTAL, label='Select Speed(sec)', background='#fff')
animation_speed.grid(row=6, column=0, padx=5, pady=5, sticky=W)

generateBtn = Button(sidebar_fr, text='Generate Dataset', command=generate_dataset,

bg='#764AF1', fg='white', width=20) generateBtn.grid(row=7, column=0, padx=5,
pady=5) startBtn = Button(sidebar_fr, text='Start', command=start_btn, bg='#019267',
fg='white', height=1, width=20) startBtn.grid(row=8, column=0, padx=5, pady=5)
resetBtn = Button(sidebar_fr, text='Reset', command=reset_btn, bg='#FF597B',
fg='white', height=1, width=20) resetBtn.grid(row=9, column=0, padx=5, pady=5)
stopBtn = Button(sidebar_fr, text='Stop', command=stop_btn, bg='orange', fg='white',
height=1, width=20, state=DISABLED) stopBtn.grid(row=10, column=0, padx=5,
pady=5)

Label(sidebar_fr, text="---------Or---------", bg='#ECF2FF', font=('consolas', 10,

"bold")).grid(row=11, column=0, padx=5, pady=5)
Label(sidebar_fr, text="Enter numbers(,)", bg='#ECF2FF', font=('consolas', 10,
"bold")).grid(row=12, column=0, padx=5, pady=5)
entry = Entry(sidebar_fr, width=25) entry.grid(row=13,
column=0, padx=5, pady=5) Button(sidebar_fr,
text="Process Input", height=1, width=20, fg='#fff',
bg='purple', command=process_input).grid(row=14,
column=0, padx=5, pady=5)

# start the main event loop of the Application root.mainloop()

Output
 RESULTS ANALYSIS AND VALIDATION

4.1. Implementation of Solution

The Sorting Algorithm Visualizer successfully achieves the project's core objectives by
combining sorting algorithm principles with real-time, interactive visualizations. This
implementation transforms complex sorting processes into an intuitive, user-friendly
experience that simplifies the learning process. The project’s codebase is carefully
structured, with each component playing a key role in ensuring smooth operation and
user engagement.
The project consists of several important files and modules, each serving a distinct
function:
• script.js: This is the central script that orchestrates the entire functionality of the
visualizer. It manages the initialization of the sorting algorithms, controls the
animation process, and handles user interactions such as starting, pausing, or resetting
the sorting visualization. The script is designed to efficiently update the visual
representation in sync with the sorting algorithm’s progress, ensuring that the user
receives real-time feedback.
• column.js: This module defines the Column class, which is responsible for
creating and managing the individual elements (columns) that represent data points in
the sorting visualizations. The class includes properties for the columns’ dimensions
and positions, as well as methods for animating their movement during the sorting
process. The smooth transitions of these columns during swaps or comparisons are
key to helping users understand how elements are ordered.
• math.js: The math.js file provides utility functions that assist in the animation and
visualization of sorting operations. One critical function included is the lerp (linear
interpolation) function, which is used to create smooth animations by calculating
intermediate points between two values. This function ensures that the movement of
the columns appears fluid and natural, making the sorting process visually engaging.
• style.css: The visual appeal of the interface is handled by the style.css file, which
defines the layout, colors, and overall design of the visualizer. It ensures that the user
interface is not only aesthetically pleasing but also easy to navigate. The CSS file is
optimized for responsiveness, allowing the visualizer to adapt seamlessly across
different screen sizes and devices. Elements like buttons, data columns, and
animations are styled to create a cohesive, user-friendly environment.
Through the integration of these components, the Sorting Algorithm Visualizer achieves
its goal of providing an educational tool that makes understanding sorting algorithms
easier and more engaging. The interplay between the JavaScript files and CSS ensures
that users are presented with a visually appealing and interactive interface, which fosters
a deeper comprehension of sorting techniques. The real-time feedback and smooth
animations help demystify the inner workings of algorithms such as Bubble Sort, Quick
Sort, and Merge Sort, turning abstract concepts into tangible, visual experiences.
 CONCLUSION AND FUTURE WORK

Conclusion
An excellent instructional tool that offers a natural way to comprehend sorting
algorithms is the Sorting Algorithm Visualizer. To improve the learning process, it
provides interactive controls, acoustic effects, and real- time feedback. By seeing the
algorithms in operation, users can obtain useful insights into how they
operate.Sorting algorithm visualizations help one grasp how they work intuitively.
Comprehending can be further improved with tools like step-by-step simulations and
animated images. Here are some tools and resources that you can use:

• Animations of Sorting Algorithms: Interactive animations of these

algorithms may be found on websites such as Sorting Algorithms and
VisuAlgo.

• Instructive Videos: There are a ton of instructive videos on websites like

YouTube that provide an interesting visual explanation of sorting
algorithms.
Visualizing sorting algorithms helps students understand them, which benefits not
only in learning but also in teaching and communicating these fundamental
concepts in computer science.

6.1. Future work

• Load balancing: To prevent bottlenecks, devise methods for dynamically

distributing loads among processors or nodes.

• Fault Tolerance: To guarantee dependability in distributed contexts where node

failures are frequent, incorporate strong fault-tolerance methods.
• The goal of heterogeneous systems design is to create algorithms that work
effectively in a variety of computer environments, such as those involving
GPUs, FPGAs, and specialized hardware accelerators.
• The idea has potential as an all-inclusive data structure and algorithm learning
platform.

• Although the Sorting Algorithm Visualizer is an amazing accomplishment, it

could yet be improved in the future:
• Increasing the number of sorting algorithms in the collection to provide
a more comprehensive learning environment.

• User interface enhancements to boost accessibility and interaction.

• Including features like algorithm speed control and step-by-step mode to

cater to users with varying ability levels.

• Increase the efficiency and scalability of sorting algorithms on

distributed platforms and multicore CPUs.

• Fine-Grained Parallelism: Develop algorithms that leverage fine- grained

parallelism to get the most out of modern multi-core CPUs.
 REFERENCES

• SORTING ALGORITHM VISUALIZER : Shubham Nath, Jatin Gupta,

Abhinav Gupta, Teena Verma Student, Computer Science And Engineering,
HMRITM, New Delhi, Delhi, India. Assistant Professor, Computer Science
And Engineering, HMRITM, New Delhi, Delhi, India.
• Moreno, E. Sutinen, R. Bednarik, and N. Myller. Conflictive animations as
engaging learning tools. Proceedings of the Koli Calling ’07 Proceedings of
the Seventh Baltic Sea Conference on Computing Education Research -
Volume 88, Koli ‘07 (Koli National Park, Finland), pages 203-206.
• T.Bingmann. “The Sound of Sorting – ‘Audibilization’ and Visualization of
Sorting Algorithms.” Panthemanet Weblog Impressum, 22 May 2013. Web. 29
Mar. 2017