Skip to content

Commit 3414b02

Browse files
Bappy4uBappy4u
committed
Selection sort algorithm visualizer
1 parent 6ff43ec commit 3414b02

File tree

6 files changed

+75
-41
lines changed

6 files changed

+75
-41
lines changed

‎function.js‎

Lines changed: 37 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
var data = [23, 15, 16, 8, 5, 4, 19, 22];
22
var svg, bandScale;
3+
createChart();
34

45
function createChart() {
56
svg = d3.select("#chart").append("svg");
67

78
var h = 100,
8-
w = 500;
9+
w = 800;
910

1011
//var bandWidth = w / data.length - 1;
1112

@@ -36,23 +37,18 @@ function createChart() {
3637
})
3738
.style("fill", "steelblue");
3839
}
39-
createChart();
40-
41-
function change() {
42-
/* var sortComparer;
43-
sortComparer = function (a, b) {
44-
return b - a;
45-
};
46-
47-
data.sort(sortComparer);
40+
document.getElementById("random-data").addEventListener("click", function () {
41+
data = [];
42+
for (var i = 0; i < 20; i++) {
43+
data.push(Math.floor(Math.random() * 100) + 1);
44+
}
4845
console.log(data);
49-
var dOrder = data.map(function (d) {
50-
return d;
51-
});
52-
*/
53-
46+
svg.remove();
47+
createChart();
48+
});
49+
function selectionSort() {
5450
const timer = (ms) => new Promise((res) => setTimeout(res, ms));
55-
async function selectionSort() {
51+
async function sort() {
5652
// We need to wrap the loop into an async function for this to work
5753
for (var i = 0; i < data.length; i++) {
5854
smallest = data[i];
@@ -63,32 +59,34 @@ function change() {
6359
pos = j;
6460
}
6561
}
66-
temp = data[i];
67-
data[i] = smallest;
68-
data[pos] = temp;
69-
var dOrder = data.map(function (d) {
70-
return d;
71-
});
72-
bandScale.domain(dOrder);
73-
svg
74-
.transition()
75-
.duration(750)
76-
.selectAll("rect")
77-
.attr("x", function (d) {
78-
return bandScale(d);
62+
if (data[i] != smallest) {
63+
temp = data[i];
64+
data[i] = smallest;
65+
data[pos] = temp;
66+
var dOrder = data.map(function (d) {
67+
return d;
7968
});
69+
bandScale.domain(dOrder);
70+
svg
71+
.transition()
72+
.duration(750)
73+
.selectAll("rect")
74+
.attr("x", function (d) {
75+
return bandScale(d);
76+
});
77+
var swooshAudio = new Audio("/sound-effects/swoosh.mp3");
78+
swooshAudio.play();
79+
}
80+
8081
await timer(1000); // then the created Promise can be awaited
8182
}
82-
svg.selectAll("rect").style("fill", "blue");
83-
alert("Sorted");
83+
svg.selectAll("rect").style("fill", "green");
84+
var completeAudio = new Audio("/sound-effects/complete.mp3");
85+
completeAudio.play();
8486
}
85-
selectionSort();
87+
sort();
8688
}
8789

88-
d3.select("button").on("change", change);
89-
90-
document.getElementById("selection-sort").addEventListener("click", change);
91-
92-
var theRandomNumber = Math.floor(Math.random() * 10) + 1;
93-
94-
console.log(theRandomNumber);
90+
document
91+
.getElementById("selection-sort")
92+
.addEventListener("click", selectionSort);

‎index.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,13 @@
88
<link rel="stylesheet" href="style.css" />
99
</head>
1010
<body>
11+
<h1>Sorting Visualizer</h1>
12+
<button id="random-data">Generate Random Data</button>
1113
<div class="container">
1214
<div class="bar-chart">
13-
<h1>Bar chart</h1>
1415
<div id="chart"></div>
15-
<button id="selection-sort">Selection Sort</button>
16+
<hr />
17+
<button id="selection-sort">Sort</button>
1618
</div>
1719
</div>
1820
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>

‎sound-effects/complete.mp3‎

69.3 KB
Binary file not shown.

‎sound-effects/swipe.mp3‎

52.3 KB
Binary file not shown.

‎sound-effects/swoosh.mp3‎

43 KB
Binary file not shown.

‎style.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
h1 {
99
text-align: center;
10+
font-family: sans-serif;
1011
}
1112
button {
1213
display: block;
@@ -16,4 +17,37 @@ button {
1617
background: steelblue;
1718
color: rgb(218, 238, 105);
1819
font-size: 20px;
20+
cursor: pointer;
21+
}
22+
button {
23+
margin: auto;
24+
margin-top: 50px;
25+
padding: 7px 30px;
26+
border: none;
27+
}
28+
29+
button {
30+
background-image: linear-gradient(
31+
to right,
32+
#348f50 0%,
33+
#56b4d3 51%,
34+
#348f50 100%
35+
);
36+
}
37+
button {
38+
padding: 15px 45px;
39+
text-align: center;
40+
text-transform: uppercase;
41+
transition: 0.5s;
42+
background-size: 200% auto;
43+
color: white;
44+
box-shadow: 0 0 20px #eee;
45+
border-radius: 10px;
46+
display: block;
47+
}
48+
49+
button:hover {
50+
background-position: right center; /* change the direction of the change here */
51+
color: #fff;
52+
text-decoration: none;
1953
}

0 commit comments

Comments
 (0)