1 var w = 960,

     2     h = 500,

     3     fill = d3.scale.category20();

     4 

     5 var vis = d3.select("#chart").append("svg")

     6     .attr("width", w)

     7     .attr("height", h);

     8 

     9 var json = miserables;

    10   var force = d3.layout.force()

    11       .charge(-120)

    12       .linkDistance(30)

    13       .nodes(json.nodes)

    14       .links(json.links)

    15       .size([w, h])

    16       .start();

    17 

    18   var link = vis.selectAll("line.link")

    19       .data(json.links)

    20     .enter().append("line")

    21       .attr("class", "link")

    22       .style("stroke-width", function(d) { return Math.sqrt(d.value); })

    23       .attr("x1", function(d) { return d.source.x; })

    24       .attr("y1", function(d) { return d.source.y; })

    25       .attr("x2", function(d) { return d.target.x; })

    26       .attr("y2", function(d) { return d.target.y; });

    27 

    28   var node = vis.selectAll("circle.node")

    29       .data(json.nodes)

    30     .enter().append("circle")

    31       .attr("class", "node")

    32       .attr("cx", function(d) { return d.x; })

    33       .attr("cy", function(d) { return d.y; })

    34       .attr("r", 5)

    35       .style("fill", function(d) { return fill(d.group); })

    36       .call(force.drag);

    37 

    38   node.append("title")

    39       .text(function(d) { return d.name; });

    40 

    41   force.on("tick", function() {

    42     link.attr("x1", function(d) { return d.source.x; })

    43         .attr("y1", function(d) { return d.source.y; })

    44         .attr("x2", function(d) { return d.target.x; })

    45         .attr("y2", function(d) { return d.target.y; });

    46 

    47     node.attr("cx", function(d) { return d.x; })

    48         .attr("cy", function(d) { return d.y; });

    49   });