diff -r efd9c589177a -r c0b4a8b5a012 toolkit/javascript/d3/examples/treemap/treemap-svg.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/treemap/treemap-svg.js	Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,34 @@
+var w = 960,
+    h = 500,
+    color = d3.scale.category20c();
+
+var treemap = d3.layout.treemap()
+    .padding(4)
+    .size([w, h])
+    .value(function(d) { return d.size; });
+
+var svg = d3.select("body").append("svg:svg")
+    .attr("width", w)
+    .attr("height", h)
+  .append("svg:g")
+    .attr("transform", "translate(-.5,-.5)");
+
+d3.json("../data/flare.json", function(json) {
+  var cell = svg.data([json]).selectAll("g")
+      .data(treemap)
+    .enter().append("svg:g")
+      .attr("class", "cell")
+      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
+
+  cell.append("svg:rect")
+      .attr("width", function(d) { return d.dx; })
+      .attr("height", function(d) { return d.dy; })
+      .style("fill", function(d) { return d.children ? color(d.data.name) : null; });
+
+  cell.append("svg:text")
+      .attr("x", function(d) { return d.dx / 2; })
+      .attr("y", function(d) { return d.dy / 2; })
+      .attr("dy", ".35em")
+      .attr("text-anchor", "middle")
+      .text(function(d) { return d.children ? null : d.data.name; });
+});