Force-Directed Graph

http://bl.ocks.org/mbostock/4062045

by Shashank Srivastava

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

CSS

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

JavaScript

var edge_set = [
        ['start','new'],
        ['new', 'qualified'],
        ['new', 'closed'],
        ['qualified', 'engaged'],
        ['qualified', 'closed'],
        ['engaged', 'cold'],
        ['engaged', 'closed'],
        ['cold', 'engaged'],
        ['cold', 'closed'],
    ],
    graph = { "nodes":[], "links":[] };
    
var get_nodes = function() {
        for(var i = 0; i < edge_set.length; i++) {
            var pair = edge_set[i];
            for(var j = 0; j < 2; j++) {
                var find = 0;
                for(var k = 0; k < graph.nodes.length; k++) {
                    if(graph.nodes[k].name === pair[j]) {
                        find++;
                        break;
                    }
                }
                if(find === 0) {
                    graph.nodes[graph.nodes.length] =
                    { "name":pair[j], "group":1 };
                }
            }
        }
    };

var get_links = function() {
        for(i = 0; i < graph.nodes.length; i++) {    
            for(var j = 0; j < edge_set.length; j++) {
                var pair = edge_set[j];
                if(pair[0] === graph.nodes[i].name) {
                    graph.links[graph.links.length] =
                    {
                        "source": i,
                        "target": get_index_of(pair[1]),
                        "value": 1
                    };
                }
            }
        }
    };

var get_index_of = function(nodeName) {
    for(var i = 0; i < graph.nodes.length; i++) {
        if(graph.nodes[i].name === nodeName)
            return i;
    }
};

get_nodes();
get_links();

var width = 500,
    height = 300;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-1000)
    .linkDistance(80)
    .size([width, height]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

  var link =...