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 .sort(null)
7 .children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; });
8
9 var diagonal = d3.svg.diagonal()
10 .projection(function(d) { return [d.y, d.x]; });
11
12 var vis = d3.select("#chart").append("svg:svg")
13 .attr("width", w)
14 .attr("height", h)
15 .append("svg:g")
16 .attr("transform", "translate(40, 0)");
17
18 d3.json("flare.json", function(json) {
19 var nodes = cluster(d3.entries(json)[0]);
20
21 var link = vis.selectAll("path.link")
22 .data(cluster.links(nodes))
23 .enter().append("svg:path")
24 .attr("class", "link")
25 .attr("d", diagonal);
26
27 var node = vis.selectAll("g.node")
28 .data(nodes)
29 .enter().append("svg:g")
30 .attr("class", "node")
31 .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
32
33 node.append("svg:circle")
34 .attr("r", 4.5);
35
36 node.append("svg:text")
37 .attr("dx", function(d) { return d.children ? -8 : 8; })
38 .attr("dy", 3)
39 .attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
40 .text(function(d) { return d.data.key; });
41 });