Treemap
Treemap design invented by Ben Shneiderman. Squarified algorithm by Bruls, Huizing and van Wijk. Data courtesy Jeff Heer.
Source Code
1 var w = 960,
2 h = 500,
3 color = d3.scale.category20c();
4
5 var treemap = d3.layout.treemap()
6 .size([w, h])
7 .children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
8 .value(function(d) { return d.value; })
9 .sticky(true);
10
11 var div = d3.select("#chart").append("div")
12 .style("position", "relative")
13 .style("width", w + "px")
14 .style("height", h + "px");
15
16 d3.json("flare.json", function(json) {
17 div.data(d3.entries(json)).selectAll("div")
18 .data(treemap)
19 .enter().append("div")
20 .attr("class", "cell")
21 .style("background", function(d) { return d.children ? color(d.data.key) : null; })
22 .call(cell)
23 .text(function(d) { return d.children ? null : d.data.key; });
24
25 d3.select("#size").on("click", function() {
26 div.selectAll("div")
27 .data(treemap.value(function(d) { return d.value; }))
28 .transition()
29 .duration(1500)
30 .call(cell);
31
32 d3.select("#size").classed("active", true);
33 d3.select("#count").classed("active", false);
34 });
35
36 d3.select("#count").on("click", function() {
37 div.selectAll("div")
38 .data(treemap.value(function(d) { return 1; }))
39 .transition()
40 .duration(1500)
41 .call(cell);
42
43 d3.select("#size").classed("active", false);
44 d3.select("#count").classed("active", true);
45 });
46 });
47
48 function cell() {
49 this
50 .style("left", function(d) { return d.x + "px"; })
51 .style("top", function(d) { return d.y + "px"; })
52 .style("width", function(d) { return d.dx - 1 + "px"; })
53 .style("height", function(d) { return d.dy - 1 + "px"; });
54 }