Stretched Treemap

This example demonstrates how to produce a stretched treemap where the target aspect ratio of the rectangles is 4:1 (width:height). Since squarify.ratio does not imply orientation—the ratio must be one or greater—this approach uses a target ratio of one to produce a squarified layout of size [width / ratio, height], and then stretches the resulting layout to fit [width, height].

A limitation of this approach is that inner padding cannot be asymmetric, and thus if inner padding were used, it would also be stretched by the target aspect ratio. This example subtracts one from the width and height of the generated cells to separate adjacent cells. However, this loses nesting information compared to a non-stretched treemap.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
  position: relative;
}

.node {
  box-sizing: border-box;
  position: absolute;
  overflow: hidden;
}

.node-label {
  padding: 4px;
  line-height: 1em;
  white-space: pre;
}

.node-value {
  color: rgba(0,0,0,0.8);
  font-size: 9px;
  margin-top: 1px;
}

</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

var width = 961,
    height = 1061,
    ratio = 4;

var format = d3.format(",d");

var color = d3.scaleOrdinal()
    .range(d3.schemeCategory10
        .map(function(c) { c = d3.rgb(c); c.opacity = 0.6; return c; }));

var stratify = d3.stratify()
    .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });

var treemap = d3.treemap()
    .tile(d3.treemapSquarify.ratio(1))
    .size([width / ratio, height]);

d3.csv("flare.csv", type, function(error, data) {
  if (error) throw error;

var root = stratify(data)
      .sum(function(d) { return d.value; })
      .sort(function(a, b) { return b.height - a.height || b.value - a.value; });

treemap(root);

d3.select("body")
    .selectAll(".node")
    .data(root.leaves())
    .enter().append("div")
      .attr("class", "node")
      .attr("title", function(d) { return d.id + "\n" + format(d.value); })
      .style("left", function(d) { return Math.round(d.x0 * ratio) + "px"; })
      .style("top", function(d) { return Math.round(d.y0) + "px"; })
      .style("width", function(d) { return Math.round(d.x1 * ratio) - Math.round(d.x0 * ratio) - 1 + "px"; })
      .style("height", function(d) { return Math.round(d.y1) - Math.round(d.y0) - 1 + "px"; })
      .style("background", function(d) { while (d.depth > 1) d = d.parent; return color(d.id); })
    .append("div")
      .attr("class", "node-label")
      .text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); })
    .append("div")
      .attr("class", "node-value")
      .text(function(d) { return format(d.value); });
});

function type(d) {
  d.value = +d.value;
  return d;
}

</script>

https://d3js.org/d3.v4.min.js