Skip to content

Commit 72ec1bb

Browse files
Bappy4uBappy4u
committed
added bubblesort algorithm to the visualizer
1 parent 7061610 commit 72ec1bb

File tree

4 files changed

+222
-124
lines changed

4 files changed

+222
-124
lines changed

‎base.js‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
// class for sorting
2+
class sortData {
3+
constructor(data) {
4+
this.data = data;
5+
}
6+
selectionSort() {}
7+
bubbleSort() {}
8+
}
9+
10+
//get selected algorithm
11+
function getAlgo() {
12+
var algo = document.getElementsByName("algo-name");
13+
for (var i = 0; i < algo.length; i++) {
14+
if (algo[i].checked) {
15+
return algo[i].value;
16+
}
17+
}
18+
}
19+
20+
// function for changing specific bar color filtering with data
21+
// d => single data, color => hexa color code
22+
function changeBarColor(d, color) {
23+
var smi = heightScale(d);
24+
svg.selectAll("rect").each(function (d, i) {
25+
if (smi == d3.select(this).attr("height")) {
26+
d3.select(this).style("fill", color);
27+
}
28+
});
29+
}
30+
31+
// function for generating random data
32+
function randomData(max, range) {
33+
data = [];
34+
n = 0;
35+
while (n < max) {
36+
d = Math.floor(Math.random() * range) + 1;
37+
if (data.includes(d) != true) {
38+
data.push(d);
39+
n++;
40+
}
41+
}
42+
return data;
43+
}
44+
45+
//function for creating chart. Note: data is an array of integer value
46+
function createChart(data) {
47+
svg = d3.select("#chart").append("svg");
48+
49+
bandScale = d3.scaleBand().domain(data).range([0, areaWidth]).padding(0.1);
50+
51+
svg.attr("width", areaWidth).attr("height", areaHeight);
52+
53+
svg
54+
.selectAll("rect")
55+
.data(data)
56+
.enter()
57+
.append("rect")
58+
.attr("x", function (d, i) {
59+
return bandScale(d);
60+
})
61+
.attr("y", function (d) {
62+
return areaHeight - heightScale(d);
63+
})
64+
.attr("width", function () {
65+
return bandScale.bandwidth();
66+
})
67+
.attr("height", function (d) {
68+
return heightScale(d);
69+
})
70+
.style("fill", "rgb(173, 216, 230)");
71+
72+
svg
73+
.selectAll("text")
74+
.data(data)
75+
.enter()
76+
.append("text")
77+
.text(function (d) {
78+
return d;
79+
})
80+
.attr("x", function (d, i) {
81+
return bandScale(d) + 10;
82+
})
83+
.attr("y", function (d) {
84+
return areaHeight - 15;
85+
})
86+
.style("width", bandScale.bandwidth)
87+
.style("fill", "black")
88+
.style("font-size", areaWidth / data.length / 3)
89+
.style("font-family", "sans-serif")
90+
.style("z-index", 1);
91+
}
92+
93+
// bar visualization while sorting. Bar Swapping
94+
function swapBar(data) {
95+
var dOrder = data.map(function (d) {
96+
return d;
97+
});
98+
bandScale.domain(dOrder);
99+
svg
100+
.transition()
101+
.duration(750)
102+
.selectAll("rect")
103+
.attr("x", function (d) {
104+
return bandScale(d);
105+
});
106+
svg
107+
.transition()
108+
.duration(750)
109+
.selectAll("text")
110+
.attr("x", function (d) {
111+
return bandScale(d) + 5;
112+
});
113+
}

‎function.js‎

Lines changed: 74 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,49 @@
1-
var data, svg, bandScale, text;
2-
data = [];
3-
var time = 700;
4-
function randomData() {
5-
data = [];
6-
n = 0;
7-
while (n < 15) {
8-
d = Math.floor(Math.random() * 30) + 1;
9-
if (data.includes(d) != true) {
10-
data.push(d);
11-
n++;
12-
}
13-
}
14-
return data;
15-
}
16-
var data = randomData();
1+
var svg,
2+
bandScale,
3+
text,
4+
maxElement = 15,
5+
dataRange = maxElement * 2,
6+
areaHeight = 150,
7+
areaWidth = 800,
8+
time = 300,
9+
traverseColor = "#ffcaa1",
10+
smallestColor = "#ab87ff",
11+
unsortedColor = "#add8e6";
12+
13+
// generating random data
14+
var data = randomData(maxElement, dataRange);
1715

18-
var h = 150,
19-
w = 800;
16+
//a d3 function for scaling height for all the data this function
2017
var heightScale = d3
2118
.scaleLinear()
2219
.domain([0, d3.max(data)])
23-
.range([0, h]);
24-
25-
createChart();
26-
27-
function createChart() {
28-
svg = d3.select("#chart").append("svg");
29-
30-
//var bandWidth = w / data.length - 1;
31-
32-
bandScale = d3.scaleBand().domain(data).range([0, w]).padding(0.1);
33-
34-
svg.attr("width", w).attr("height", h);
35-
36-
svg
37-
.selectAll("rect")
38-
.data(data)
39-
.enter()
40-
.append("rect")
41-
.attr("x", function (d, i) {
42-
return bandScale(d);
43-
})
44-
.attr("y", function (d) {
45-
return h - heightScale(d);
46-
})
47-
.attr("width", function () {
48-
return bandScale.bandwidth();
49-
})
50-
.attr("height", function (d) {
51-
return heightScale(d);
52-
})
53-
.style("fill", "rgb(173, 216, 230)");
20+
.range([0, areaHeight]);
5421

55-
svg
56-
.selectAll("text")
57-
.data(data)
58-
.enter()
59-
.append("text")
60-
.text(function (d) {
61-
return d;
62-
})
63-
.attr("x", function (d, i) {
64-
return bandScale(d) + 5;
65-
})
66-
.attr("y", function (d) {
67-
var val = h - heightScale(d);
68-
if (val > 20) {
69-
return val;
70-
} else {
71-
return 50;
72-
}
73-
})
74-
.style("width", bandScale.bandwidth)
75-
.style("fill", "black")
76-
.style("font-size", w / data.length / 3)
77-
.style("font-family", "sans-serif")
78-
.style("z-index", 1);
79-
}
22+
// initialized a chart with random value
23+
createChart(data);
8024

81-
document.getElementById("random-data").addEventListener("click", function () {
82-
var data = randomData();
83-
svg.remove();
84-
createChart();
85-
});
86-
function selectionSort() {
25+
let Sort = new sortData(data);
26+
Sort.selectionSort = function () {
8727
const timer = (ms) => new Promise((res) => setTimeout(res, ms));
8828
async function sort() {
8929
// We need to wrap the loop into an async function for this to work
90-
var traverseColor = "#ffcaa1";
91-
var smallestColor = "#ab87ff";
92-
var unsortedColor = "#add8e6";
9330
for (var i = 0; i < data.length; i++) {
9431
smallest = data[i];
9532
pos = i;
96-
forColorAnimation(smallest, smallestColor);
33+
changeBarColor(smallest, smallestColor);
9734
await timer(time);
9835
for (var j = i + 1; j < data.length; j++) {
99-
forColorAnimation(data[j], traverseColor);
36+
changeBarColor(data[j], traverseColor);
10037
if (smallest > data[j]) {
10138
await timer(time);
102-
forColorAnimation(smallest, unsortedColor);
39+
changeBarColor(smallest, unsortedColor);
10340
smallest = data[j];
10441
pos = j;
10542
}
10643

107-
forColorAnimation(smallest, smallestColor);
44+
changeBarColor(smallest, smallestColor);
10845
await timer(time);
109-
forColorAnimation(data[j], unsortedColor);
46+
changeBarColor(data[j], unsortedColor);
11047
}
11148
if (data[i] != smallest) {
11249
temp = data[i];
@@ -118,49 +55,63 @@ function selectionSort() {
11855
);
11956
swooshAudio.play();
12057
}
121-
forColorAnimation(smallest, "#56b4d3");
122-
sortAnimate(data);
58+
changeBarColor(smallest, "#56b4d3");
59+
swapBar(data);
12360
await timer(time); // then the created Promise can be awaited
12461
}
125-
svg.selectAll("rect").style("fill", "green");
62+
svg.selectAll("rect").style("fill", "#56b4d3");
12663
var completeAudio = new Audio(
12764
"/algorithm-visualizer/sound-effects/complete.mp3"
12865
);
12966
completeAudio.play();
13067
}
13168
sort();
132-
}
133-
134-
document
135-
.getElementById("selection-sort")
136-
.addEventListener("click", selectionSort);
69+
};
13770

138-
function sortAnimate(data) {
139-
var dOrder = data.map(function (d) {
140-
return d;
141-
});
142-
bandScale.domain(dOrder);
143-
svg
144-
.transition()
145-
.duration(750)
146-
.selectAll("rect")
147-
.attr("x", function (d) {
148-
return bandScale(d);
149-
});
150-
svg
151-
.transition()
152-
.duration(750)
153-
.selectAll("text")
154-
.attr("x", function (d) {
155-
return bandScale(d) + 5;
156-
});
157-
}
71+
Sort.bubbleSort = function () {
72+
const timer = (ms) => new Promise((res) => setTimeout(res, ms));
73+
async function sort() {
74+
var temp;
75+
for (i = 0; i < data.length - 1; i++) {
76+
changeBarColor(data[0], smallestColor);
77+
await timer(time);
78+
for (j = 0; j < data.length - i - 1; j++) {
79+
await timer(time);
80+
changeBarColor(data[j + 1], traverseColor);
81+
await timer(time);
82+
if (data[j] > data[j + 1]) {
83+
temp = data[j];
84+
data[j] = data[j + 1];
85+
data[j + 1] = temp;
86+
changeBarColor(data[j + 1], smallestColor);
15887

159-
function forColorAnimation(d, color) {
160-
var smi = heightScale(d);
161-
svg.selectAll("rect").each(function (d, i) {
162-
if (smi == d3.select(this).attr("height")) {
163-
d3.select(this).style("fill", color);
88+
swapBar(data);
89+
await timer(time);
90+
} else {
91+
changeBarColor(data[j + 1], smallestColor);
92+
}
93+
changeBarColor(data[j], unsortedColor);
94+
}
16495
}
165-
});
166-
}
96+
svg.selectAll("rect").style("fill", "#56b4d3");
97+
var completeAudio = new Audio(
98+
"/algorithm-visualizer/sound-effects/complete.mp3"
99+
);
100+
completeAudio.play();
101+
}
102+
sort();
103+
};
104+
105+
document.getElementById("sort").addEventListener("click", function () {
106+
if (getAlgo() == "selection-sort") {
107+
Sort.selectionSort();
108+
} else if (getAlgo() == "bubble-sort") {
109+
Sort.bubbleSort();
110+
}
111+
});
112+
113+
document.getElementById("random-data").addEventListener("click", function () {
114+
var data = randomData(maxElement, dataRange);
115+
svg.remove();
116+
createChart(data);
117+
});

‎index.html‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,34 @@
1010
<body>
1111
<h1>Sorting Visualizer</h1>
1212
<button id="random-data">Generate Random Data</button>
13+
<div class="radio">
14+
<form action="">
15+
<label
16+
><input
17+
type="radio"
18+
name="algo-name"
19+
value="selection-sort"
20+
/>Selection Sort</label
21+
>
22+
<label
23+
><input
24+
type="radio"
25+
name="algo-name"
26+
value="bubble-sort"
27+
checked
28+
/>Bubble Sort</label
29+
>
30+
</form>
31+
</div>
1332
<div class="container">
1433
<div class="bar-chart">
1534
<div id="chart"></div>
1635
<hr />
17-
<button id="selection-sort">Sort</button>
36+
<button id="sort">Sort</button>
1837
</div>
1938
</div>
2039
<script src="https://d3js.org/d3.v4.min.js"></script>
40+
<script src="base.js"></script>
2141
<script src="function.js"></script>
2242
</body>
2343
</html>

0 commit comments

Comments
 (0)