New York City Leading Causes of Death From 2007 To 2014

Line chart of New York City leading causes of death from 2007 to 2014.

This link chart was forked from curran's block: Multi-Line Chart of Largest Countries . Data from NYC OpenData: New York City Leading Causes of Deat.

Built with blockbuilder.org

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3-legend/1.1.0/d3-legend.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        
    <style>
      
      body {
        margin: 0px;
      }

.chart-line {
        fill: none;
        stroke-width: 2px;
      }
    
      .axis text {
        font-family: 'Open Sans', sans-serif;
        font-size: 12pt;
      }
      .axis .label {
        font-size: 18pt;
      }

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

.color-legend text {
        font-family: 'Open Sans', sans-serif;
        font-size: 12pt;
      }

</style>
  </head>
  <body>
    <script>
    
      var outerWidth = 960;
      var outerHeight = 500;
      var margin = { left: 86, top: 5, right: 5, bottom: 56 };

var xColumn = "year";
      var yColumn = "number";
      var colorColumn = "cause";
      var lineColumn = colorColumn;

var xAxisLabelText = "Time";
      var xAxisLabelOffset = 48;

var yAxisLabelText = "Deaths";
      var yAxisLabelOffset = 60;

var innerWidth  = outerWidth  - margin.left - margin.right;
      var innerHeight = outerHeight - margin.top  - margin.bottom;

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

var xAxisG = g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + innerHeight + ")")
      var xAxisLabel = xAxisG.append("text")
        .style("text-anchor", "middle")
        .attr("transform", "translate(" + (innerWidth / 2) + "," + xAxisLabelOffset + ")")
        .attr("class", "label")
        .text(xAxisLabelText);

var yAxisG = g.append("g")
        .attr("class", "y axis");
      var yAxisLabel = yAxisG.append("text")
        .style("text-anchor", "middle")
        .attr("transform", "translate(-" + yAxisLabelOffset + "," + (innerHeight / 2) + ") rotate(-90)")
        .attr("class", "label")
        .text(yAxisLabelText);

var colorLegendG = g.append("g")
        .attr("class", "color-legend")
        .attr("transform", "translate(16, 2)");

var xScale = d3.time.scale().range([0, innerWidth]);
      var yScale = d3.scale.linear().range([innerHeight, 0]);
      var colorScale = d3.scale.category10();

// Use a modified SI formatter that uses "B" for Billion.
      var siFormat = d3.format("s");
      var customTickFormat = function (d){
        return siFormat(d).replace("G", "B");
      };

var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
        .ticks(10)
        .outerTickSize(0);
      var yAxis = d3.svg.axis().scale(yScale).orient("left")
        .ticks(13)
        .tickFormat(customTickFormat)
        .outerTickSize(0);

var line = d3.svg.line()
        .x(function(d) { return xScale(d[xColumn]); })
        .y(function(d) { return yScale(d[yColumn]); });

var colorLegend = d3.legend.color()
        .scale(colorScale)
        .shapePadding(3)
        .shapeWidth(15)
        .shapeHeight(15)
        .labelOffset(4);

function render(data){

xScale.domain(d3.extent(data, function (d){ return d[xColumn]; }));
        yScale.domain([0, d3.max(data, function (d){ return d[yColumn]; })]);

xAxisG.call(xAxis);
        yAxisG.call(yAxis);

var nested = d3.nest()
          .key(function (d){ return d[lineColumn]; })
          .entries(data);

colorScale.domain(nested.map(function (d){ return d.key; }));

var paths = g.selectAll(".chart-line").data(nested);
        paths.enter().append("path").attr("class", "chart-line");
        paths.exit().remove();
        paths
          .attr("d", function (d){ return line(d.values); })
          .attr("stroke", function (d){ return colorScale(d.key); });

colorLegendG.call(colorLegend);
      }

function type(d){
        d.year = new Date(d.year);
        d.number = +d.number;
        return d;
      }

d3.csv("result.csv", type, render);

</script>
  </body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.1.0/d3-legend.js