Built with blockbuilder.org
forked from evbettor's block: Sustained Allegations by Ward
Created
November 20, 2016 00:12
-
-
Save evbettor/4cbea543cb7e1907980e2592943e863f to your computer and use it in GitHub Desktop.
Sustained Allegations by Ward
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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); | |
| 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; }) | |
| //function to format to percentages | |
| var format = d3.format(".1%"); | |
| format(0.005); // 0.5% | |
| 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment