sorting algorithms using d3

library: d3.js credit: Wang Zhuochun site: http://blog.bicrement.com 2013-05-19 selection, insertion and bubble sort

by mifeng

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;
           ...