evbettor/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from evbettor's block: Sustained Allegations by Ward

  
## index.html
<!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>
	<!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>