prisons

Built with blockbuilder.org

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Deaths by Cause in Prisons</title>
<style>

body {
  font: 14px sans-serif;
}

.axis path,
.axis line,
.axis1 path,
.axis1 line {
  fill: none;
  stroke: #E6E7E8;
  shape-rendering: crispEdges;
}

.line {
  fill: none;
  stroke-width: 1.5px;
}

.legend-box {
  cursor: pointer;
}

.wrap{
  font-family: 'Helvetica Neue', sans-serif;
  letter-spacing: -1px;
  line-height: 1;
  font-size: 16px;
}

</style>
</head>
<body>
<script src="https://d3js.org/d3.v3.js"></script>
<script src="https://d3plus.org/js/d3plus.js"></script>
<script>

var margin = {top: 20, right: 200, bottom: 175, left: 75},
    width = 960 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y").parse;

var xScale = d3.time.scale()
    .range([0, width]);

var yScale = d3.scale.linear()
    .range([height, 0]);

// 40 Custom DDV colors
var color = d3.scale.ordinal().range(["#e6194b","#3cb44b","#ffe119","#0082c8"	,
          "#f58231"	,"#911eb4"	,"#46f0f0"	,"#f032e6","#d2f53c"	,"#fabebe"	,
          "#008080"	,"#e6beff"	,"#aa6e28"	,"#800000"]);

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");

var line = d3.svg.line()
    .x(function(d) { return xScale(d.date); })
    .y(function(d) { return yScale(d.deaths); });

var maxY;

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + 100 + "," + 100 + ")");

var svg2 = d3.select("body").append("svg")
      .attr("width", 550)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + 50+ "," + 50 + ")");

var descr = svg2.append("rect")
    .attr("width", 500)
    .attr("height", 275)
    .attr("x", 0)
    .attr("y", 35)
    .attr("class", "shape")
    .style("stroke", "white")
    .style("fill", "gray")
    .style("opacity", "0.5");

svg2.append("text")
    .attr("x", 10)
    .attr("y", 50)
    .attr("id", "rectResize")
    .attr("class", "wrap")
    .text("Click on each variable to see the number of deaths caused by it."+
  "The line graph shows cause of death from 2003 to 2014 for a few causes of death in state prisons. The number of deaths here are per 100K prisoners." +
  "This data does not have as much of a range in causes as the local jails data. Here, we see that suicides are not the highest cause of death. Instead, it is usually natural causes such as cancer or heart disease.")
    .style("fill", "white");

d3plus.textwrap()
   .container(d3.select("#rectResize"))
   .draw();

// svg2.select("text")
    // .attr("transform", "translate(" + + "," + 10 + ")");

d3.csv("state_causeofdeath.csv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) {
    return key !== "Year";
  }));

data.forEach(function(d) {
    d.date = parseDate(d.Year);
  });

var categories = color.domain().map(function(name) {

return {
      name: name,
      values: data.map(function(d) {
        return {
          date: parseDate(d.Year),
          deaths: +(d[name]),
          };
      }),
      visible: (name === "Heart disease" ? true : false)
    };
  });

xScale.domain(d3.extent(data, function(d) { return d.date; }));
  yScale.domain(
    [0,d3.max(categories, function(c) { return d3.max(c.values, function(v) { return v.deaths; }); })
  ]);

svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .append("text")
        .attr("y",50)
        .attr("x",(width/2) + 50)
        .style("text-anchor", "end")
        .text("Year")
        .style("font", "18px sans-serif");

svg.append("text")
              .attr("class", "title")
              .text("Cause of Death by Year in Prisons")
              .style("font", "24px sens-serif")
              .attr("y", -50)
              .attr("x", 100)
              .attr("dy", ".71em")
              .style("text-transform", "uppercase")
              .style("font-weight", "bold");

svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", -75)
      .attr("x", -150)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Number of Deaths")
      .style("font", "18px sans-serif")

var issue = svg.selectAll(".issue")
      .data(categories)
    .enter().append("g")
      .attr("class", "issue");

issue.append("path")
         .attr("class", "line")
         .attr("id", function(d) {
           return d.name === "All other illnesses"? "line-Allotherillnesses": "line-" + d.name.replace(" ", "").replace("/", "").replace(" ", ""); // Give line id of line-(insert issue name, with any spaces replaced with no spaces)
         })
         .attr("d", function(d) {

return d.visible ? line(d.values) : null;
         })
         .style("stroke", function(d) { return color(d.name); });

issue.append("g")
    .attr("id", function(d){
      return "circles-" + d.name.replace(" ", "").replace("/", "").replace(" ", "");
    });

for (var x = 0; x<categories.length; x++){
      var variable = categories[x].name;
      var test = d3.select("#circles-" + variable.replace(" ", "").replace("/", "").replace(" ", ""));

test.selectAll("circle").data(categories[x].values).enter().append("circle")
      .attr("r", function(){return categories[x].visible ? 5 : null; })
      .attr("cx", function(d){return xScale(d.date);})
      .attr("cy", function(d){return yScale(d.deaths);})
      .attr("fill", function(){return color(variable); });

}

var legendSpace = 450 / categories.length;

issue.append("rect")
      .attr("width", 10)
      .attr("height", 10)
      .attr("x", width + (margin.right/3) - 15)
      .attr("y", function (d, i) { return (legendSpace)+i*(legendSpace) - 8; })
      .attr("fill",function(d) {
        return d.visible ? color(d.name) : "#F1F1F2";
      })
      .attr("class", "legend-box")

.on("click", function(d){
        d.visible = !d.visible;
        maxY = findMaxY(categories);
        yScale.domain([0,maxY]);
        svg.select(".y.axis")
          .transition()
          .call(yAxis);

issue.select("path")
          .transition()
          .attr("d", function(d){
            return d.visible ? line(d.values) : null;
          })

issue.select("g").selectAll("circle")
          .transition()
          .attr("cx", function(d){return xScale(d.date);})
          .attr("cy", function(d){return yScale(d.deaths);})

.on("mouseover", function(d){

d3.select(this)
          .transition()
          .attr("fill", function(d) { return color(d.name); });

d3.select("#line-" + d.name.replace(" ", "").replace("/", "").replace(" ", ""))
          .transition()
          .style("stroke-width", 4);
      })

.on("mouseout", function(d){

d3.select(this)
          .transition()
          .attr("fill", function(d) {
          return d.visible ? color(d.name) : "#F1F1F2";});

d3.select("#line-" + d.name.replace(" ", "").replace("/", "").replace(" ", ""))
          .transition()
          .style("stroke-width", 1.5);
      })

issue.append("text")
      .attr("x", width + (margin.right/3))
      .attr("y", function (d, i) { return (legendSpace)+i*(legendSpace); })
      .text(function(d) { return d.name; });

});

</script>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

Modified http://d3plus.org/js/d3plus.js to a secure url

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

https://d3plus.org/js/d3plus.js