All examples By author By category About

Sithal95

Full window Github gist

index

forked from Sithal95's block: fresh block

<!DOCTYPE html>

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Deaths by Cause</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 2005 to 2014 for unnatural causes." +
  "Suicides in local jails is starklingly the highest cause of death, even when considering natural causes of death. Please keep in mind that All causes is an aggregated variable that sums up the number of deaths for all causes and illness is also an aggregated variable, showing the sum of deaths by all diseases/illnesses. If you pull up Suicides and Missing data, Notice how the number of suicides has a sharp dip in 2008, which is also the year when there is a sharp increase in missing data.")
    .style("fill", "white");

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

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

d3.csv("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 Local Jails")
              .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><svg width="960" height="600"><g transform="translate(100,100)"></g></svg><svg width="550" height="600"><g transform="translate(50,50)"><rect width="500" height="275" x="0" y="35" class="shape" style="stroke: white; fill: gray; opacity: 0.5;"></rect><text x="10" y="50" id="rectResize" class="wrap" text-anchor="start" font-size="16px" style="fill: white; font-size: 16px;" transform="rotate(0, 137.5, 177.5)translate(0,-3.5200000000000005)"><tspan x="10px" dy="17.6px" dominant-baseline="alphabetic" style="baseline-shift: 0%;">Click on each variable to see the number of deaths caused by</tspan><tspan x="10px" dy="17.6px" dominant-baseline="alphabetic" style="baseline-shift: 0%;">it.The line graph shows cause of death from 2005 to 2014 for</tspan><tspan x="10px" dy="17.6px" dominant-baseline="alphabetic" style="baseline-shift: 0%;">unnatural causes.Suicides in local jails is starklingly the highest</tspan><tspan x="10px" dy="17.6px" dominant-baseline="alphabetic" style="baseline-shift: 0%;">cause of death, even when considering natural causes of death.</tspan><tspan x="10px" dy="17.6px" dominant-baseline="alphabetic" style="baseline-shift: 0%;">Please keep in mind that All causes is an aggregated variable that</tspan><tspan x="10px" dy="17.6px" dominant-baseline="alphabetic" style="baseline-shift: 0%;">sums up the number of deaths for all causes and illness is also an</tspan><tspan x="10px" dy="17.6px" dominant-baseline="alphabetic" style="baseline-shift: 0%;">aggregated variable, showing the sum of deaths by all diseases/</tspan><tspan x="10px" dy="17.6px" dominant-baseline="alphabetic" style="baseline-shift: 0%;">illnesses. If you pull up Suicides and Missing data, Notice how the</tspan><tspan x="10px" dy="17.6px" dominant-baseline="alphabetic" style="baseline-shift: 0%;">number of suicides has a sharp dip in 2008, which is also the year</tspan><tspan x="10px" dy="17.6px" dominant-baseline="alphabetic" style="baseline-shift: 0%;">when there is a sharp increase in missing data.</tspan></text></g></svg>

</body></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