dijkstra's algorithm using d3

library: d3.js credit: Wang Zhuochun site: http://blog.bicrement.com

by mifeng

HTML

Speed: <input type="text" value="50" id="speed"></input>ms 
Blocks (Row): <input type="text" value="30" id="num"></input>
Random Distance: <input type="checkbox" id="distance"></input>

<button id="reset">Reset</button>
<button id="play">Play</button>

<div id="graph">
</div>

CSS

#graph {
    padding: 0.5em;
}

input {
    width: 3em;
}

JavaScript

// custom variables
var w = 500, h = 500,
    num = 900, speed = 50, withDistance = false,
    dataset = [], results = [], padding = 2, timer,
    states = {"default": 0, "finished": 1, "current": 2, "compare": 3, "minimal": 4, "hide": 5},
    colors = ["#B7C4CF", "#3565A1", "#D55511", "#74A82A", "#A42F11", "#fff"],
    svg;

// init the graph
setDataset(num);
setRects(dataset);

// run function
function run() {
    var temp;
    
    results = [];
    
    for (var i = 0; i < dataset.length; i++) {
        temp = [];
        
        dataset[i].state = states.finished;
        
        for (var j = 0; j < dataset.length; j++) {
            temp[j] = { "distance": dataset[j].distance,
                        "state": dataset[j].state }
        }
        
        results.push(temp);
    }
    
    var out = 0;
    
    timer = setInterval(function() {
        redrawRects(results[out]);
        out++;
        
        if (out >= results.lenght)
            clearInterval(timer);
    }, speed);
}

// dijkstra
function dijkstra() {
}

// generate random dataset
function setDataset(len) {
    len = len || num;
    
    dataset = [];
    
    var i = 0, dist = 1;
    
    for (; i < len; i++) {
        dist = withDistance ? (Math.random() * len * 2) | 0 : 1;
        
        dataset[i] = { "distance": dist, "state": states.default };
    }
}

// create rect in svg
function setRects(set) {
    document.getElementById("graph").innerHTML = "";
    
    svg = d3.select("#graph")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

    var rects = svg.selectAll("rect")
                    .data(set)
                    .enter()
                    .append("rect");
    
    styleRects(rects, set.length);
}

// redraw
function redrawRects(set) {
    var rects = svg.selectAll("rect")
                    .data(set)
                    .transition()
                    .duration(speed / 2 | 0)
    
    styleRects(rects,...