-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
194 lines (186 loc) · 12.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="images/pc.ico" />
<title>Visualization of Sorting Algorithms</title>
<script src="script/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="styles/fonts.css" />
<link rel="stylesheet" href="styles/style.css" />
<link rel="stylesheet" href="styles/interface.css" />
</head>
<body>
<a id="repository" href="https://github.com/polcats/VisualSort" target="_blank">
<img src="images/github.png" alt="GitHub" title="Visit Repository" />
</a>
<div id="menu">
<div id="sliders">
<div class="slider">
<label for="speed">Speed</label>
<input class="slider-input" name="speed" id="speed" type="range" min="1" max="100" value="51" />
<span class="count" id="speed-count">0</span>
</div>
<div class="slider">
<label for="elements">Elements</label>
<input class="slider-input" name="elements" id="elements" type="range" min="5" max="30" value="5" />
<span class="count" id="element-count">0</span>
</div>
</div>
<div id="algos">
<label>Algorithm</label>
<select id="algorithms">
<option value="bubble">Bubble Sort</option>
<option value="comb">Comb Sort</option>
<option value="heap">Heap Sort</option>
<option value="insertion">Insertion Sort</option>
<option value="selection">Selection Sort</option>
<option value="shell">Shell Sort</option>
</select>
</div>
<div id="sort-order">
<label>Order</label>
<select id="order">
<option value="asc">Ascending</option>
<option value="desc">Descending</option>
</select>
</div>
<div id="buttons">
<input type="button" id="sort" class="sort green" value="Sort" />
<input type="button" id="stop" value="Stop" disabled />
<input type="button" id="reset" class="green" value="Reset" />
<input type="button" id="restart" class="green" value="Restart" />
</div>
</div>
<div id="algo-info">
<div id="bubble-info" class="algo-container hidden">
<h2 class="algo-header">Bubble Sort</h2>
<span class="algo-details">
Bubble sort, sometimes referred to as sinking sort, is a simple sorting algorithm that repeatedly steps through the list, compares
adjacent elements and swaps them if they are in the wrong order.
</span>
<span class="algo-complexity">
<ul>
<li class="algo-info"><span class="complexity-item">Worst Complexity : </span><span class="complexity-value">N^2</span></li>
<li class="algo-info"><span class="complexity-item">Average Complexity : </span><span class="complexity-value">N^2</span></li>
<li class="algo-info"><span class="complexity-item">Best Complexity : </span><span class="complexity-value">N</span></li>
<li class="algo-info"><span class="complexity-item">Space Complexity : </span><span class="complexity-value">1</span></li>
<li class="algo-info"><span class="complexity-item">Method : </span><span class="complexity-value">Exchanging</span></li>
<li class="algo-info"><span class="complexity-item">Stable : </span><span class="complexity-value">Yes</span></li>
</ul>
</span>
</div>
<div id="comb-info" class="algo-container hidden">
<h2 class="algo-header">Comb Sort</h2>
<span class="algo-details">
Comb Sort is mainly an improvement over Bubble Sort. Bubble sort always compares adjacent values. So all inversions are removed
one by one. Comb Sort improves on Bubble Sort by using gap of size more than 1.
</span>
<span class="algo-complexity">
<ul>
<li class="algo-info"><span class="complexity-item">Worst Complexity : </span><span class="complexity-value">N^2</span></li>
<li class="algo-info">
<span class="complexity-item">Average Complexity : </span><span class="complexity-value">N * log(N)</span>
</li>
<li class="algo-info"><span class="complexity-item">Best Complexity : </span><span class="complexity-value">N</span></li>
<li class="algo-info"><span class="complexity-item">Space Complexity : </span><span class="complexity-value">1</span></li>
<li class="algo-info"><span class="complexity-item">Method : </span><span class="complexity-value">Exchanging</span></li>
<li class="algo-info"><span class="complexity-item">Stable : </span><span class="complexity-value">No</span></li>
</ul>
</span>
</div>
<div id="heap-info" class="algo-container hidden">
<h2 class="algo-header">Heap Sort</h2>
<span class="algo-details">
Heap sort is a comparison based sorting technique based on Binary Heap data structure. It is similar to selection sort where we
first find the maximum element and place the maximum element at the end. We repeat the same process for remaining element.
</span>
<span class="algo-complexity">
<ul>
<li class="algo-info">
<span class="complexity-item">Worst Complexity : </span><span class="complexity-value">N * log(N)</span>
</li>
<li class="algo-info">
<span class="complexity-item">Average Complexity : </span><span class="complexity-value">N * log(N)</span>
</li>
<li class="algo-info">
<span class="complexity-item">Best Complexity : </span><span class="complexity-value">N * log(N)</span>
</li>
<li class="algo-info"><span class="complexity-item">Space Complexity : </span><span class="complexity-value">1</span></li>
<li class="algo-info"><span class="complexity-item">Method : </span><span class="complexity-value">Selection</span></li>
<li class="algo-info"><span class="complexity-item">Stable : </span><span class="complexity-value">No</span></li>
</ul>
</span>
</div>
<div id="insertion-info" class="algo-container hidden">
<h2 class="algo-header">Insertion Sort</h2>
<span class="algo-details">
Insertion Sort is a simple sorting algorithm that builds the final sorted array one item at a time. It is much less efficient on
large lists than more advanced algorithms such as quicksort, heapsort, or merge sort.
</span>
<span class="algo-complexity">
<ul>
<li class="algo-info"><span class="complexity-item">Worst Complexity : </span><span class="complexity-value">N ^ 2</span></li>
<li class="algo-info">
<span class="complexity-item">Average Complexity : </span><span class="complexity-value">N ^ 2</span>
</li>
<li class="algo-info"><span class="complexity-item">Best Complexity : </span><span class="complexity-value">N</span></li>
<li class="algo-info"><span class="complexity-item">Space Complexity : </span><span class="complexity-value">1</span></li>
<li class="algo-info"><span class="complexity-item">Method : </span><span class="complexity-value">Insertion</span></li>
<li class="algo-info"><span class="complexity-item">Stable : </span><span class="complexity-value">Yes</span></li>
</ul>
</span>
</div>
<div id="selection-info" class="algo-container hidden">
<h2 class="algo-header">Selection Sort</h2>
<span class="algo-details">
Selection Sort is a sorting algorithm, specifically an in-place comparison sort. It has O time complexity, making it inefficient
on large lists, and generally performs worse than the similar insertion sort
</span>
<span class="algo-complexity">
<ul>
<li class="algo-info"><span class="complexity-item">Worst Complexity : </span><span class="complexity-value">N ^ 2</span></li>
<li class="algo-info">
<span class="complexity-item">Average Complexity : </span><span class="complexity-value">N ^ 2</span>
</li>
<li class="algo-info"><span class="complexity-item">Best Complexity : </span><span class="complexity-value">N ^ 2</span></li>
<li class="algo-info"><span class="complexity-item">Space Complexity : </span><span class="complexity-value">1</span></li>
<li class="algo-info"><span class="complexity-item">Method : </span><span class="complexity-value">Selection</span></li>
<li class="algo-info"><span class="complexity-item">Stable : </span><span class="complexity-value">No</span></li>
</ul>
</span>
</div>
<div id="shell-info" class="algo-container hidden">
<h2 class="algo-header">Shell Sort</h2>
<span class="algo-details">
Shell Sort is mainly a variation of Insertion Sort. In insertion sort, we move elements only one position ahead. When an element
has to be moved far ahead, many movements are involved. The idea of shellSort is to allow exchange of far items.
</span>
<span class="algo-complexity">
<ul>
<li class="algo-info">
<span class="complexity-item">Worst Complexity : </span><span class="complexity-value">Depends on Gap Sequence</span>
</li>
<li class="algo-info">
<span class="complexity-item">Average Complexity : </span><span class="complexity-value">N * log(N)^2 OR N ^ (3/2)</span>
</li>
<li class="algo-info"><span class="complexity-item">Best Complexity : </span><span class="complexity-value">N</span></li>
<li class="algo-info"><span class="complexity-item">Method : </span><span class="complexity-value">Insertion</span></li>
<li class="algo-info"><span class="complexity-item">Stable : </span><span class="complexity-value">No</span></li>
</ul>
</span>
</div>
</div>
<div id="container"><div id="bars"></div></div>
<script>
const CONTAINER_WIDTH = 600;
let TOTAL_ELEMENTS = document.getElementById("elements").value;
let SPEED = document.getElementById("speed").value;
let container = document.getElementById("bars");
let bars = document.getElementsByClassName("bar");
</script>
<script src="script/interface.js"></script>
<script src="script/animation.js"></script>
<script src="script/algorithms.js"></script>
<script src="script/testing.js"></script>
</body>
</html>