Sustained Allegations by Ward

<!DOCTYPE html>
<meta charset="utf-8">
<style>
rect {
  stroke: #000;
}
body {
  background: #000;
}
text {
  font-family: sans-serif;
  fill: #fff;
}
.tooltip {
    background-color: #f7f7f7;
    padding: 3px 12px;
    font-family: sans-serif;
    border: 1px solid #bbbbbb;
    box-shadow: 1px 1px 4px #bbbbbb;
  }
  .tooltip_title {
    font-weight: bold;
    font-size: 14px;
    margin: 5px 0;
    max-width: 300px;
    word-wrap: normal;
  }
  .tooltip_body {
    font-weight: normal;
    margin: 5px 0;
  }
  .tooltip_img {
    max-width: 240px;
  }
</style>
<title>Ward Officers Complaint Follow-Up</title>
<svg width="1700" height="900"></svg>
<script src="https://d3js.org/d3.v4.js"></script>
<script>
var root;

var width = 1700 
  var height = 900;

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(["#a50026","#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"])
  .domain([ 1, .25, .2,.12, .10, .08,.06, .04, .02,.01,0]);

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

var tooltip = d3.select("body")
    .append("div")
    .attr("class", "tooltip")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden");

var treemap = d3.treemap()
  .size([width, height])
  .tile(d3.treemapBinary)
  .paddingOuter(4)
  .paddingTop(15)
  .paddingInner(1)
  .round(true);

// load data
var url = 'https://raw.githubusercontent.com/evbettor/ii_treemap/master/all_all_sum.csv';

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

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

var subset = data.filter(function(d) {
    return d["Ward"] !== "NA";
  });

var nested = nest.entries(subset);
  console.log(nested);

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

treemap(root);

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; })
      .attr("fill", function(d) {
        return d.depth == 2 ? color2(d.data["sd_plus"]) : "transparent";
      })
      .on("mouseover", function(d) {
       tooltip.html("");
       tooltip.append("h3").attr("class", "tooltip_title");
       tooltip.append("img").attr("class", "tooltip_img");
       tooltip.append("pre").attr("class", "tooltip_body");
       tooltip.select(".tooltip_title")
         .text(d.data.category)

tooltip.select(".tooltip_body")
         .text(
           "Number of Cases: " + d.data.n + "\n" + 
           "% of Sustained: " + format(d.data.sd_plus) + "\n"
          );

return tooltip.style("visibility", "visible");
     })
     .on("mousemove", function() {
       return tooltip.style("top", (d3.event.pageY-52) + "px").style("left", (d3.event.pageX+18) + "px");
     })
     .on("mouseout", function() {
       return tooltip.style("visibility", "hidden");
     });

//for the hover effect that highlights
      /*
      .on("mouseover", function(d) {
        console.log(d.data.full_name);
        console.log("tot_minutes", d.data.tot_minutes);
        console.log("plus_minus", d.data["plus_minus"]);
        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
    .selectAll("tspan")
      .data(function(d) { return [d.data]; })
    .enter().append("tspan")
      .attr("x", function(d, i) { return i ? null : 2; })
      .attr("y", 12)
      .text(function(d) {
        return d.key;
       });

//title
      svg.append("text")
        .attr("x", 0)             
        .attr("y", 0 - (margin.top / 2))
        .attr("text-anchor", "middle")  
        .style('fill', 'white')
        .style("font-size", "16px") 
        .attr("font-family", "sans-serif")
        //.style("text-decoration", "underline")  
        .text("Ward by complaint");

});

</script>

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