--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/treemap/treemap.js	Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,53 @@
+var w = 960,
+    h = 500,
+    color = d3.scale.category20c();
+
+var treemap = d3.layout.treemap()
+    .size([w, h])
+    .sticky(true)
+    .value(function(d) { return d.size; });
+
+var div = d3.select("#chart").append("div")
+    .style("position", "relative")
+    .style("width", w + "px")
+    .style("height", h + "px");
+
+d3.json("../data/flare.json", function(json) {
+  div.data([json]).selectAll("div")
+      .data(treemap.nodes)
+    .enter().append("div")
+      .attr("class", "cell")
+      .style("background", function(d) { return d.children ? color(d.name) : null; })
+      .call(cell)
+      .text(function(d) { return d.children ? null : d.name; });
+
+  d3.select("#size").on("click", function() {
+    div.selectAll("div")
+        .data(treemap.value(function(d) { return d.size; }))
+      .transition()
+        .duration(1500)
+        .call(cell);
+
+    d3.select("#size").classed("active", true);
+    d3.select("#count").classed("active", false);
+  });
+
+  d3.select("#count").on("click", function() {
+    div.selectAll("div")
+        .data(treemap.value(function(d) { return 1; }))
+      .transition()
+        .duration(1500)
+        .call(cell);
+
+    d3.select("#size").classed("active", false);
+    d3.select("#count").classed("active", true);
+  });
+});
+
+function cell() {
+  this
+      .style("left", function(d) { return d.x + "px"; })
+      .style("top", function(d) { return d.y + "px"; })
+      .style("width", function(d) { return d.dx - 1 + "px"; })
+      .style("height", function(d) { return d.dy - 1 + "px"; });
+}