Suicide Treemap by Age and Mechanism by syntagmatic

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
rect {
  fill: none;
}
.depth-2 > rect {
  fill: #e2e2e2;
}
text {
  font-family: sans-serif;
  font-size: 12px;
}
.depth-1 > text {
  font-weight: bold;
  font-size: 14px;
}
.depth-3 > text {
  font-size: 10px;
  pointer-events: none;
}
</style>
<title>Death by Intent</title>
<svg width="960" height="1280"></svg>
<script src="https://d3js.org/d3.v4.js"></script>
<script>
var root;

var width = 960,
    height = 1280;

var svg = d3.select("svg");

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 color2 = d3.scaleLinear()
  .range(["#d73027","#fc8d59","#fee08b","#ffffbf","#d9ef8b","#91cf60","#1a9850"])
  .domain([12, 10, 8, 6, 4, 2, 0]);

var nest = d3.nest()
  .key(function(d) { return d["age"]; })
  .key(function(d) { return d["mechanism"]; });

var treemap = d3.treemap()
  .size([width, height])
  .tile(d3.treemapBinary)
  .paddingOuter(1)
  .paddingTop(function(d) {
    return d.depth == 1 ? 20 : 16;
  })
  .paddingInner(1)
  .round(true);

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

  // coerce numbers
  ["deaths", "population"].forEach(function(col) {
    data.forEach(function(d) {
      d[col] = +d[col];
    });
  });

  data.forEach(function(d) {
    d["calculated_rate"] = d["deaths"] / d["population"] * 100000;
  });

  var nested = nest.entries(data);

  root = d3.hierarchy({
      name: "root",
      values: nested
    }, function(d) {
      return d.values;
    })
    .sum(function(d) {
      return d.deaths;
    });

  treemap(root);

  var cell = svg
    .selectAll(".node")
    .data(root.descendants())
    .enter().append("g")
      .attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; })
      .attr("class", function(d,i) { return "node depth-" + d.depth; })
      .each(function(d) { d.node = this; })

  cell.append("rect")
      .attr("id", function(d,i) { return "rect-" + i; })
      .attr("width", function(d) { return d.x1 - d.x0; })
      .attr("height", function(d) { return d.y1 - d.y0; })
      .style("fill", function(d) {
        return d.depth == 3 ? color2(d.data["calculated_rate"]) : null;
      })
      .on("mouseover", function(d) {
        console.log("---");
        console.log("Calculated Rate per 100,000 ", d.data["calculated_rate"]);
        console.log("Age: " + d.data.age);
        console.log("Mechanism: " + d.data.mechanism);
        console.log("Year: " + d.data.year);
        console.log("Deaths: " + d.data.deaths);
        console.log("Population: " + d.data.population);
        d3.selectAll("rect")
          .style("opacity", 0.2);
        d3.select(this)
          .style("opacity", 1);
      })
      .on("mouseout", function(d) {
        d3.selectAll("rect")
          .style("opacity", 1);
      });

  cell.append("clipPath")
      .attr("id", function(d,i) { return "clip-" + i; })
    .append("use")
      .attr("xlink:href", function(d,i) { return "#rect-" + i; });

  var label = cell.append("text")
      .attr("clip-path", function(d,i) { return "url(#clip-" + i + ")"; });

  label
    .append("tspan")
      .attr("x", 1)
      .attr("y", function(d) { return d.depth == 1 ? 15 : 12; })
      .text(function(d) {
        return d.data.key || d.data.year;
       });
});

</script>