sorting algorithms using d3
library: d3.js
credit: Wang Zhuochun
site: http://blog.bicrement.com
2013-05-19 selection, insertion and bubble sort
HTML
<select id="algo">
<option value="selection">Selection Sort</option>
<option value="insertion">Insertion Sort</option>
<option value="bubble">Bubble Sort</option>
</select>
<button id="play">Play</button> Speed: <input type="text" value="50" id="speed"></input>ms Numbers: <input type="text" value="30" id="num"></input>
<button id="reset">Reset</button>
<div id="graph">
</div>
CSS
#algo {
margin-bottom: 2em;
}
#graph {
padding: 0.5em;
}
input {
width: 3em;
}
JavaScript
// custom variables
var w = 500,
h = 190,
num = 30,
speed = 50,
algo = "selection", // default algo
dataset, scale, padding = 2,
timer,
states = {
"default": 0,
"finished": 1,
"current": 2,
"compare": 3,
"minimal": 4,
"hide": 5
},
colors = ["#B7C4CF", "#3565A1", "#D55511", "#74A82A", "#A42F11", "#fff"],
color_default = "#6A6BCD",
color_highlight = "#C24787",
svg;
// init the graph
setDataset(num);
setRects(dataset);
// algo definition
var algos = {};
// О(n2)
// http://en.wikipedia.org/wiki/Selection_sort
algos.selection = function() {
var i, j, len = dataset.length,
iMin, inI = false;
j = 0;
i = len;
inI = false;
timer = setInterval(function() {
if (j < len - 1) {
dataset[j].state = states.current;
if (!inI) {
iMin = j;
i = j + 1;
inI = true;
}
if (i < len) {
if (dataset[i - 1].state === states.compare) {
dataset[i - 1].state = states.default;
}
dataset[i].state = states.compare;
if (dataset[i].num < dataset[iMin].num) {
if (iMin !== j)
dataset[iMin].state = states.default;
iMin = i;
dataset[iMin].state = states.minimal;
}
i++;
} else {
inI = false;
if (iMin !== j) {
swap(iMin, j);
}
dataset[i - 1].state = states.default;
dataset[iMin].state = states.default;
dataset[j].state = states.finished;
j++;
}
} else {
dataset[j].state = states.finished;
clearInterval(timer);
}
redrawRects(dataset);
}, speed);
};
// O(n2), Best: O(n)
// http://en.wikipedia.org/wiki/Insertion_sort
algos.insertion = function() {
var i, j, len = dataset.length,
inI = false;
j = 1;
i = 0;
inI = false;
dataset[0].state = states.finished;
timer = setInterval(function() {
if (j < len) {
if (!inI) {
dataset[j].state =...