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 }
Copyright © 2011 Mike Bostock
Fork me on GitHub