using d3 partition layout

answer example for this question http://stackoverflow.com/questions/29003615/css-basic-multipanel-graph-layout-d3-js/29006247

CSS

.chart {
  display: block;
  margin: auto;
  margin-top: 30px;
  font-size: 12px;
}

rect {
  stroke: #fff;
  fill: darkred;
  fill-opacity: .8;
}

rect.full-col {
  fill: orange;
}

JavaScript

var body = d3.select('body'),
    w = body[0][0].offsetWidth,
    h = 600,
    x = d3.scale.linear().range([0, w]),
    y = d3.scale.linear().range([0, h]);

var partition = d3.layout.partition()
      .value(function(d) { return d.size; }),
    visual = body
      .append("div")
        .attr("class", "chart")
        .style("width", w + "px")
        .style("height", h + "px")
      .append("svg:svg")
        .attr("width", w)
        .attr("height", h)
      .append("g")
        .classed("container", true);

(function(){
    
  var root = {
    "name": "full column",
    "class": "full-col",
    "children": [
      {
        "name": "top right quad",
        "class": "quad",
        "size": 1,
        "children": [{
          "name": "top left quad",
          "size": 1,
          "class": "quad"
        },
        {
          "name": "another top left quad",
          "size": 1,
          "class": "quad"
        }
        ]
      },
      {
        "name": "bottom right quad",
        "class": "quad",
        "size": 1,
        "children": [{
          "name": "top left quad",
          "size": 1,
          "class": "quad"
        }]
      },
        {
          "name": "another bottom right quad",
          "size": 1,
          "class": "quad"
        }
    ]
  };
  
  /// we must run this first to prep the root object with .dx and .dy
  var g = visual.selectAll("g").data(partition.nodes(root)),
      kx = w / root.dx,
      ky = h / 1;
  
  /// force the layout to work from the right side to left
  visual.attr("transform", "translate("+(w - root.dy * kx)+",0)")
  /// for each data item, append a g element
  var ge = g.enter()
      .append("svg:g")
          .attr("transform", function(d) {
              return "translate(" + (-x(d.y)) + "," + y(d.x) + ")";
          });
  
  /// for each item append a rectangle
  ge.append("svg:rect")
      .attr("width", root.dy * kx)
      .attr("height", function(d) { return d.dx * ky; })
      .attr("class",...