Dendrogram
Data shows the Flare class hierarchy, courtesy Jeff Heer.
Source Code
1 var w = 960,
2 h = 2200;
3
4 var cluster = d3.layout.cluster()
5 .size([h, w - 160]);
6
7 var diagonal = d3.svg.diagonal()
8 .projection(function(d) { return [d.y, d.x]; });
9
10 var vis = d3.select("#chart").append("svg:svg")
11 .attr("width", w)
12 .attr("height", h)
13 .append("svg:g")
14 .attr("transform", "translate(40, 0)");
15
16 d3.json("../data/flare.json", function(json) {
17 var nodes = cluster.nodes(json);
18
19 var link = vis.selectAll("path.link")
20 .data(cluster.links(nodes))
21 .enter().append("svg:path")
22 .attr("class", "link")
23 .attr("d", diagonal);
24
25 var node = vis.selectAll("g.node")
26 .data(nodes)
27 .enter().append("svg:g")
28 .attr("class", "node")
29 .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
30
31 node.append("svg:circle")
32 .attr("r", 4.5);
33
34 node.append("svg:text")
35 .attr("dx", function(d) { return d.children ? -8 : 8; })
36 .attr("dy", 3)
37 .attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
38 .text(function(d) { return d.name; });
39 });