Q4 2017

a treemap prototype where the

area of the cell
the maxArea of all the cells that share the same depth and same parent with that cell

is used to scale the color on an orange to lightgray colorscale.

the size variable is double-encoded as cell area and cell color.

I extend d3.layout.treemap to calculate the maxArea across a set of sibling nodes and call the extended layout d3.layout.treemap2

the sort property of the treemap2 layout positions the largest area cell in the top-right of the group.

.sort(function(a, b){ return a.value - b.value })

an iteration on http://mbostock.github.io/d3/talk/20111018/treemap.html

and this StackOverflow Answer

forked from micahstubbs's block: Q4 2017

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script src="d3.layout.treemap2.js" type="text/javascript"></script>
    <style type="text/css">

.chart {
  display: block;
  margin: auto;
  margin-top: 40px;
}

text {
  font-size: 11px;
}

rect {
  fill: none;
}

</style>
  </head>
  <body>
    <div id="body">
      <div id="footer">
        d3.layout.treemap2
        <div class="hint">click or option-click to descend or ascend</div>
        <div><select>
          <option value="size">Size</option>
          <option value="count">Count</option>
        </select></div>
      </div>
    </div>
    <script type="text/javascript">

// an iteration on
// https://mbostock.github.io/d3/talk/20111018/treemap.html

var w = 1280 - 80,
    h = 800 - 180,
    x = d3.scale.linear().range([0, w]),
    y = d3.scale.linear().range([0, h]),
    root,
    node,
    maxArea;

// ************************************************

var materialOrange = "#FC582F"

// https://stackoverflow.com/questions/21734017/d3-js-how-to-decide-both-the-area-and-the-color-of-each-square-by-the-size-of-e

var colorLinearScale = d3.scale.linear()
  .range([0,1]);
  // wait to set the domain until we know
  // the maxArea for the current child node
  // and it's siblings

//colors can be specified as any CSS color string
var colorInterpolator = d3.interpolateHsl("lightgray", materialOrange);

// ************************************************

var treemap = d3.layout.treemap2()
    .round(false)
    .size([w, h])
    .sticky(true)
    .sort(function(a, b){ return a.value - b.value })
    .value(function(d) { return d.size; });

var svg = d3.select("#body").append("div")
    .attr("class", "chart")
    .style("width", w + "px")
    .style("height", h + "px")
  .append("svg:svg")
    .attr("width", w)
    .attr("height", h)
  .append("svg:g")
    .attr("transform", "translate(.5,.5)");

d3.json("flare.json", function(data) {
  node = root = data;

var nodes = treemap.nodes(root)
      .filter(function(d) { return !d.children; });

var cell = svg.selectAll("g")
      .data(nodes)
    .enter().append("svg:g")
      .attr("class", "cell")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
      .on("click", function(d) { return zoom(node == d.parent ? root : d.parent); });

cell.append("svg:rect")
      .attr("width", function(d) { return d.dx - 1; })
      .attr("height", function(d) { return d.dy - 1; })
      .style("fill", function(d) {
        colorLinearScale.domain([0, d.maxArea]);
        return colorInterpolator(colorLinearScale(d.area));
      });

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.name; })
      .style("opacity", function(d) { d.w = this.getComputedTextLength(); return d.dx > d.w ? 1 : 0; });

d3.select(window).on("click", function() { zoom(root); });

d3.select("select").on("change", function() {
    treemap.value(this.value == "size" ? size : count).nodes(root);
    zoom(node);
  });
});

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

function count(d) {
  return 1;
}

function zoom(d) {
  var kx = w / d.dx, ky = h / d.dy;
  x.domain([d.x, d.x + d.dx]);
  y.domain([d.y, d.y + d.dy]);

var t = svg.selectAll("g.cell").transition()
      .duration(d3.event.altKey ? 7500 : 750)
      .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });

t.select("rect")
      .attr("width", function(d) { return kx * d.dx - 1; })
      .attr("height", function(d) { return ky * d.dy - 1; })

t.select("text")
      .attr("x", function(d) { return kx * d.dx / 2; })
      .attr("y", function(d) { return ky * d.dy / 2; })
      .style("opacity", function(d) { return kx * d.dx > d.w ? 1 : 0; });

node = d;
  d3.event.stopPropagation();
}

</script>
  </body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js