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