1 var w = 960,

     2     h = 500,

     3     color = d3.scale.category20c();

     4 

     5 var treemap = d3.layout.treemap()

     6     .padding(4)

     7     .size([w, h])

     8     .value(function(d) { return d.size; });

     9 

    10 var svg = d3.select("body").append("svg:svg")

    11     .attr("width", w)

    12     .attr("height", h)

    13   .append("svg:g")

    14     .attr("transform", "translate(-.5,-.5)");

    15 

    16 d3.json("../data/flare.json", function(json) {

    17   var cell = svg.data([json]).selectAll("g")

    18       .data(treemap)

    19     .enter().append("svg:g")

    20       .attr("class", "cell")

    21       .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

    22 

    23   cell.append("svg:rect")

    24       .attr("width", function(d) { return d.dx; })

    25       .attr("height", function(d) { return d.dy; })

    26       .style("fill", function(d) { return d.children ? color(d.data.name) : null; });

    27 

    28   cell.append("svg:text")

    29       .attr("x", function(d) { return d.dx / 2; })

    30       .attr("y", function(d) { return d.dy / 2; })

    31       .attr("dy", ".35em")

    32       .attr("text-anchor", "middle")

    33       .text(function(d) { return d.children ? null : d.data.name; });

    34 });