Sorting Visualizer

Index
Sr.No Chapter Page
No.
1 Index 1
2 Introduction 2
3 Common Sorting Algorithm 3-4
4 Sorting Visualizer 5-6
5 Basic Code Of Visualizer 7-8
6 Screenshot of Website 9-10
7 Conclusion 11
8 Reference 12

CHAPTER 1

STC/SPRT/CSE/2022 Page 1
 Sorting Visualizer

INTRODUCTION

What is Sorting:-
Sorting refers to ordering data in an increasing or decreasing manner according to
some linear relationship among the data items.
i. ordering: arranging items in a sequence ordered by some criterion;
ii. categorizing: grouping items with similar properties.
Ordering items is the combination of categorizing them based on equivalent order,
and ordering the categories themselves.

Sorting information or data:-

In computer science, arranging in an ordered sequence is called "sorting". Sorting is
a common operation in many applications, and efficient algorithms to perform it
have been developed.
The most common uses of sorted sequences are:
i. making lookup or search efficient;
ii. making merging of sequences efficient.
iii. enable processing of data in a defined order.
The opposite of sorting, rearranging a sequence of items in a random or meaningless
order, is called shuffling.
For sorting, either a weak order, "should not come after", can be specified, or a strict
weak order, "should come before" (specifying one defines also the other, the two are
the complement of the inverse of each other, see operations on binary relations). For
the sorting to be unique, these two are restricted to a total order and a strict total
order, respectively.

CHAPTER 2

STC/SPRT/CSE/2022 Page 2
 Sorting Visualizer

COMMON SORTING ALGORITHMS

1.Bubble Sort:--
Bubble sort, sometimes referred to as sinking sort, is a simple sorting algorithm that
repeatedly steps through the input list element by element, comparing the current element
with the one after it, swapping their values if needed. These passes through the list are
repeated until no swaps had to be performed during a pass, meaning that the list has become
fully sorted. The algorithm, which is a comparison sort, is named for the way the larger
elements "bubble" up to the top of the list.

Complexity:-
The bubble sort algorithm is a reliable sorting algorithm. This algorithm has a worst-case
time complexity of O(n2). The bubble sort has a space complexity of O(1). The number of
swaps in bubble sort equals the number of inversion pairs in the given array

2.Selection Sort:--
The selection sort algorithm sorts an array by repeatedly finding the minimum element
(considering ascending order) from the unsorted part and putting it at the beginning. 
The algorithm maintains two subarrays in a given array.
i. The subarray which already sorted. 
ii. The remaining subarray was unsorted.
In every iteration of the selection sort, the minimum element (considering ascending
order) from the unsorted subarray is picked and moved to the sorted subarray. 

Complexity:-
The time complexity of Selection Sort is O(N2) as there are two nested loops:
i. One loop to select an element of Array one by one = O(N)
ii. Another loop to compare that element with every other Array element =
O(N)
Therefore overall complexity = O(N) * O(N) = O(N*N) = O(N2)

STC/SPRT/CSE/2022 Page 3
 Sorting Visualizer

3.Insertion Sort:--
Insertion sort is a simple sorting algorithm that works similar to the way you sort
playing cards in your hands. The array is virtually split into a sorted and an unsorted
part. Values from the unsorted part are picked and placed at the correct position in
the sorted part.
Characteristics of Insertion Sort:
i. This algorithm is one of the simplest algorithm with simple implementation
ii. Basically, Insertion sort is efficient for small data values
iii. Insertion sort is adaptive in nature, i.e. it is appropriate for data sets which
are already partially sorted.

Complexity:-
Case Time Complexity
i. Best Case O(n)
ii. Average Case O(n2)
iii. Worst Case O(n2)

CHAPTER 3
SORTING VISUALIZER
STC/SPRT/CSE/2022 Page 4
 Sorting Visualizer

Sorting.Visulizer :-
Sorting.Visualizer is a web app for visualizing a bunch of different sorting
algorithms Like
i. Selection Sort.
ii. Bubble Sort.
iii. Insertion Sort.
With the functionality of ⏳(Processing Speed Control) and 📏(Array Size
Control)

⚙ How it works ?!
Here in our model, each element value is represented by THE SIZE OF THE BAR
and the algorithms sort them by placing the smallest elements on the left and the
biggest elements on the right.
The algorithms moves the items around by swapping elements, Without using any
addational memory with creating another array.
Characteristics:
Characteristics of Sorting Algorithms
i. Speed (or better: time complexity)
ii. Space complexity.
iii. Stability.
iv. Comparison sorts / non-comparison sorts.
v. Parallelism.
vi. Recursive / non-recursive.

Is sorting visualizer a good project?

This project is a good start for beginners and a refresher for professionals who have
dabbled in data structures and algorithms using Javascript before and also web
developers. The methodology can be applied to showcase any algorithm of one's
choosing, so feel free to innovate!

What is visualizer technology?

STC/SPRT/CSE/2022 Page 5
 Sorting Visualizer

Visualization technology is now an indispensable part of automation. What is called

process visualization or image generation is whenever production processes and
machine data are presented in the form of diagrams, curves and historic charts so
that people can understand them better.

CHAPTER 4

STC/SPRT/CSE/2022 Page 6
 Sorting Visualizer

BASIC CODE OF VISUALIZER

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="" content="" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
rel="stylesheet”
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/
Ev+nYRRuWlolflfl” crossorigin="anonymous" />
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
rel="stylesheet" />
<!-- External CSS -->
<link rel="stylesheet" href="style.css" />
<title>Sorting Visualizer</title>
<!-- External JS -->
<script async defer src="index.js"></script>
</head>
<body>
<!-- Navigation Bar -->
<div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand appName header" href="#">
<p id="animateText">Visualize Sorting</p>
</a>

STC/SPRT/CSE/2022 Page 7
 Sorting Visualizer

<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation”>
<span class="navbar-toggler-icon"></span>
</button>
<div>

All used languages:-

1. Html
2. Css
3. Javascript

Website Pre-Requisites:-
1. Array size
2. Speed
3. Generate New Array
4. Reset
5. Sorting Option

CHAPTER 5

STC/SPRT/CSE/2022 Page 8
 Sorting Visualizer

SCREENSHOT OF WEBSITE

Home Interface

Sorting Options

While Sorting 1

STC/SPRT/CSE/2022 Page 9
 Sorting Visualizer

While Sorting 2

CONCLUSION

STC/SPRT/CSE/2022 Page 10
 Sorting Visualizer

We Successfully created a Sorting Visualizer project using Html, Css, Javascript languages
using the concept of Data Structures. In this project we showed that how the various sorting
methods works. We represented it visually with the help containers and colors. We made a
user friendly understandable SORTING VISUALIZER.

REFERENCES

STC/SPRT/CSE/2022 Page 11
 Sorting Visualizer

i. https://www.geeksforgeeks.org/
ii. https://www.javatpoint.com/
iii. https://www.wikipedia.org/

STC/SPRT/CSE/2022 Page 12