D3 Examples - hw9

xxxxxxxxxx
 
-<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  background-color: #F1F3F3    
}
.axis {
    font: 10px sans-serif;
}
.axis path,
.axis line {
  fill: none;
  stroke: #D4D8DA;
  stroke-width: 2px;
  shape-rendering: crispEdges;
}
.line {
  fill: none;
  stroke: #6F257F;
  stroke-width: 5px;
}
.overlay {
  fill: none;
  pointer-events: all;
}
.focus circle {
  fill: #F1F3F3;
  stroke: #6F257F;
  stroke-width: 5px;
}
  
.hover-line {
  stroke: #6F257F;
  stroke-width: 2px;
  stroke-dasharray: 3,3;
}
  
.focus-text {
    font: 10px sans-serif;  
  }
</style>
<body>
<h4>
How have police shootings' levels changed from 2010 to 2016 on unarmed subjects? and what is the percentage of subjects from each race? (in the 50 largest local police departments in the US.)
</h4>
<table>
<tr><td>
<svg width="920" height="500"></svg>
</td>
<td>
<b>Races:</b>
<br>
L: Latino<br>
B: Black<br>
W: White<br>
A: Asian<br>
O: Other<br>
U: Unknown<br>
</td>
</tr>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
​
//append svg object to the page
var svg = d3.select("svg"),
    margin = {top: 130, right: 140, bottom: 80, left: 80},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;
  
var parseTime = d3.timeParse("%Y")
    bisectDate = d3.bisector(function(d) { return d.year; }).left;
  
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
​
var line = d3.line()
    .x(function(d) { return x(d.year); })
    .y(function(d) { return y(d.total); });
var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("data.json", function(error, data) {
    if (error) throw error;
    data.forEach(function(d) {
      d.year = parseTime(d.year);
      d.total = +d.total;
    });
    x.domain(d3.extent(data, function(d) { return d.year; }));
    y.domain([0, d3.max(data, function(d) { return d.total; })]);
​
    g.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));
    g.append("text")
        .attr("y", -80 )
        .attr("class", "axis axis--x")
      .attr("transform",
            "translate(" + (width/2) + " ," + 
                           (height + margin.top) + ")")
      .style("text-anchor", "middle")
        .attr("fill", "#5D6971")
      .text("Year");
  
    g.append("g")
        .attr("class", "axis axis--y")
        .call(d3.axisLeft(y).ticks(6).tickFormat(function(d) { return d}))
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 20 - margin.left)
            .attr("x", 0 - (height / 2))
        .attr("dy", "1em")
        .style("text-anchor", "middle")
        .attr("fill", "#5D6971")
        .text("Total Number of Shootings on Unarmed Subjects");
    g.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line);
    var focus = g.append("g")
        .attr("class", "focus")
        .style("display", "none");
    focus.append("line")
        .attr("class", "x-hover-line hover-line")
        .attr("y1", 0)
        .attr("y2", height);
    focus.append("line")
        .attr("class", "y-hover-line hover-line")
        .attr("x1", width)
        .attr("x2", width);
    focus.append("circle")
        .attr("r", 7.5);
    focus.append("text")
        .attr("x", -80)
            .attr ("y", -80)
            .attr("class", "focus-text")
        .attr("dy", ".31em");
    svg.append("rect")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .attr("class", "overlay")
        .attr("width", width)
        .attr("height", height)
        .on("mouseover", function() { focus.style("display", null); })
        .on("mouseout", function() { focus.style("display", "none"); })
        .on("mousemove", mousemove);
    function mousemove() {
      var x0 = x.invert(d3.mouse(this)[0]),
          i = bisectDate(data, x0, 1),
          d0 = data[i - 1],
          d1 = data[i],
          d = x0 - d0.year > d1.year - x0 ? d1 : d0;
      focus.attr("transform", "translate(" + x(d.year) + "," + y(d.total) + ")");
      focus.select("text").text(function() { return "L: " + d.latinop + "%, B: " + d.blackp + "%" + ", W: " + d.whitep + "%" + ", A: " + d.asianp + "%" + ", O: " + d.otherp + "%" + ", U: " + d.unknownp + "%"; });
      focus.select(".x-hover-line").attr("y2", height - y(d.total));
      focus.select(".y-hover-line").attr("x2", width + width);
    }
});
</script>
<tr>
<td>
<p>
<b>Data:</b>
<br>
The data was collected by VICE News who spent 9 months collecting data on police shootings from the 50 largest local police departments in the US.
<br>
<a href="https://news.vice.com/en_us/article/a3jjpa/nonfatal-police-shootings-data" target="_blank">https://news.vice.com/en_us/article/a3jjpa/nonfatal-police-shootings-data</a>
<br>
The dataset can be downloaded from the following link:
<br>
<a href="https://docs.google.com/spreadsheets/d/1CaOQ7FUYsGFCHEqGzA2hlfj69sx3GE9GoJ40OcqI9KY/edit#gid=1271324584" target="_blank">https://docs.google.com/spreadsheets/d/1CaOQ7FUYsGFCHEqGzA2hlfj69sx3GE9GoJ40OcqI9KY/edit#gid=1271324584</a>
​
</p>
</td>
</tr>
</body>
</html>
    