1 var w = 960,
 2     h = 500,
 3     fill = d3.scale.category20();
 4 
 5 var vis = d3.select("#chart")
 6   .append("svg:svg")
 7     .attr("width", w)
 8     .attr("height", h);
 9 
10 d3.json("miserables.json", function(json) {
11   var force = d3.layout.force()
12       .nodes(json.nodes)
13       .links(json.links)
14       .size([w, h])
15       .start();
16 
17   var link = vis.selectAll("line.link")
18       .data(json.links)
19     .enter().append("svg:line")
20       .attr("class", "link")
21       .style("stroke-width", function(d) { return Math.sqrt(d.value); })
22       .attr("x1", function(d) { return d.source.x; })
23       .attr("y1", function(d) { return d.source.y; })
24       .attr("x2", function(d) { return d.target.x; })
25       .attr("y2", function(d) { return d.target.y; });
26 
27   var node = vis.selectAll("circle.node")
28       .data(json.nodes)
29     .enter().append("svg:circle")
30       .attr("class", "node")
31       .attr("cx", function(d) { return d.x; })
32       .attr("cy", function(d) { return d.y; })
33       .attr("r", 5)
34       .style("fill", function(d) { return fill(d.group); })
35       .call(force.drag);
36 
37   node.append("svg:title")
38       .text(function(d) { return d.name; });
39 
40   vis.style("opacity", 1e-6)
41     .transition()
42       .duration(1000)
43       .style("opacity", 1);
44 
45   force.on("tick", function() {
46     link.attr("x1", function(d) { return d.source.x; })
47         .attr("y1", function(d) { return d.source.y; })
48         .attr("x2", function(d) { return d.target.x; })
49         .attr("y2", function(d) { return d.target.y; });
50 
51     node.attr("cx", function(d) { return d.x; })
52         .attr("cy", function(d) { return d.y; });
53   });
54 });