Learn D3 by "Official" examples -- Treemap

Explanation of D3 clickable "pack" layout. click to see official example. "elements" in this article means HTML elements. In treemap layou, we are using rectangular as basic units while in pack layout, we are using circles as basic units.

<style>
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;    /*CSS positioning: http://www.w3schools.com/css/css_positioning.asp*/
  width: 960px;
}
form {
  position: absolute;
  right: 10px;
  top: 10px;
}
.node {
  border: solid 1px white;
  font: 10px sans-serif;
  line-height: 12px;
  overflow: hidden;
  position: absolute;
  text-indent: 2px;
}
</style>
<form>
  <label><input type="radio" name="mode" value="size" checked> Size</label>
  <label><input type="radio" name="mode" value="count"> Count</label>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var margin = {top: 40, right: 10, bottom: 10, left: 10},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
var color = d3.scale.category20c();
var treemap = d3.layout.treemap()
    .size([width, height])
    .sticky(true)
    .value(function(d) { return d.size; });  /*size of rect*/
var div = d3.select("body").append("div")
    .style("position", "relative")
    .style("width", (width + margin.left + margin.right) + "px")
    .style("height", (height + margin.top + margin.bottom) + "px")
    .style("left", margin.left + "px")
    .style("top", margin.top + "px");
d3.json("flare.json", function(error, root) {
  if (error) throw error;
  var node = div.datum(root).selectAll(".node").data(treemap.nodes) //same as div.selectAll(".node").data(treemap.nodes(root))
      .enter().append("div")
      .attr("class", "node")
      .call(position)
      .style("background", function(d) { return d.children ? color(d.name) : null; }) /* "backgournd:null" means transparent.*/
      .text(function(d) { return d.children ? null : d.name; });
  d3.selectAll("input").on("change", function change() {
    var value = this.value === "count" ? function() { return 1; } : function(d) { return d.size; };
    node.data(treemap.value(value).nodes)
        .transition()
        .duration(1500)
        .call(position);
  });
});
/*compute the boundary of rectangular*/
function position() {
  this.style("left", function(d) { return d.x + "px"; })  /*(d.x,d.y) is the top left point of the rect.*/
      .style("top", function(d) { return d.y + "px"; })
      .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; }) /*d.dx is width of rect.*/
      .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; }); /*d.dy is eight of rect.*/
}
</script>

Treemap nodes:

• parent - the parent node, or null for the root.
• children - the array of child nodes, or null for leaf nodes.
• value - the node value, as returned by the value accessor.
• depth - the depth of the node, starting at 0 for the root.
• x - the minimum x-coordinate of the node position.
• y - the minimum y-coordinate of the node position.
• dx - the x-extent of the node position.
• dy - the y-extent of the node position.

For each rectangular, top left point is (x,y) and the width is "dx" and the height is "dy". "value" is the size of rect.