echomelodylwh/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    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

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

## result.csv

          
            year
            cause
            number

            
              2007
              Cerebrovascular Disease
              1554

            
              2008
              Cerebrovascular Disease
              1504

            
              2009
              Cerebrovascular Disease
              1437

            
              2010
              Cerebrovascular Disease
              1568

            
              2011
              Cerebrovascular Disease
              1745

            
              2012
              Cerebrovascular Disease
              1646

            
              2013
              Cerebrovascular Disease
              1700

            
              2014
              Cerebrovascular Disease
              1787

            
              2007
              Chronic Lower Respiratory Diseases
              1311

            
              2008
              Chronic Lower Respiratory Diseases
              1599

            
              2009
              Chronic Lower Respiratory Diseases
              1524

            
              2010
              Chronic Lower Respiratory Diseases
              1714

            
              2011
              Chronic Lower Respiratory Diseases
              1762

            
              2012
              Chronic Lower Respiratory Diseases
              1650

            
              2013
              Chronic Lower Respiratory Diseases
              1833

            
              2014
              Chronic Lower Respiratory Diseases
              1821

            
              2007
              Diabetes Mellitus
              1555

            
              2008
              Diabetes Mellitus
              1631

            
              2009
              Diabetes Mellitus
              1678

            
              2010
              Diabetes Mellitus
              1711

            
              2011
              Diabetes Mellitus
              1770

            
              2012
              Diabetes Mellitus
              1808

            
              2013
              Diabetes Mellitus
              1843

            
              2014
              Diabetes Mellitus
              1798

            
              2007
              Essential Hypertension and Renal Diseases
              711

            
              2008
              Essential Hypertension and Renal Diseases
              809

            
              2009
              Essential Hypertension and Renal Diseases
              849

            
              2010
              Essential Hypertension and Renal Diseases
              965

            
              2011
              Essential Hypertension and Renal Diseases
              886

            
              2012
              Essential Hypertension and Renal Diseases
              893

            
              2013
              Essential Hypertension and Renal Diseases
              971

            
              2014
              Essential Hypertension and Renal Diseases
              871

            
              2007
              Human Immunodeficiency Virus Disease
              963

            
              2008
              Human Immunodeficiency Virus Disease
              927

            
              2009
              Human Immunodeficiency Virus Disease
              837

            
              2010
              Human Immunodeficiency Virus Disease
              725

            
              2011
              Human Immunodeficiency Virus Disease
              663

            
              2012
              Human Immunodeficiency Virus Disease
              471

            
              2013
              Human Immunodeficiency Virus Disease
              433

            
              2014
              Human Immunodeficiency Virus Disease
              417

            
              2007
              Influenza (Flu) and Pneumonia
              2236

            
              2008
              Influenza (Flu) and Pneumonia
              2297

            
              2009
              Influenza (Flu) and Pneumonia
              2274

            
              2010
              Influenza (Flu) and Pneumonia
              2448

            
              2011
              Influenza (Flu) and Pneumonia
              2491

            
              2012
              Influenza (Flu) and Pneumonia
              2240

            
              2013
              Influenza (Flu) and Pneumonia
              2472

            
              2014
              Influenza (Flu) and Pneumonia
              2220

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>
year	cause	number
2007	Cerebrovascular Disease	1554
2008	Cerebrovascular Disease	1504
2009	Cerebrovascular Disease	1437
2010	Cerebrovascular Disease	1568
2011	Cerebrovascular Disease	1745
2012	Cerebrovascular Disease	1646
2013	Cerebrovascular Disease	1700
2014	Cerebrovascular Disease	1787
2007	Chronic Lower Respiratory Diseases	1311
2008	Chronic Lower Respiratory Diseases	1599
2009	Chronic Lower Respiratory Diseases	1524
2010	Chronic Lower Respiratory Diseases	1714
2011	Chronic Lower Respiratory Diseases	1762
2012	Chronic Lower Respiratory Diseases	1650
2013	Chronic Lower Respiratory Diseases	1833
2014	Chronic Lower Respiratory Diseases	1821
2007	Diabetes Mellitus	1555
2008	Diabetes Mellitus	1631
2009	Diabetes Mellitus	1678
2010	Diabetes Mellitus	1711
2011	Diabetes Mellitus	1770
2012	Diabetes Mellitus	1808
2013	Diabetes Mellitus	1843
2014	Diabetes Mellitus	1798
2007	Essential Hypertension and Renal Diseases	711
2008	Essential Hypertension and Renal Diseases	809
2009	Essential Hypertension and Renal Diseases	849
2010	Essential Hypertension and Renal Diseases	965
2011	Essential Hypertension and Renal Diseases	886
2012	Essential Hypertension and Renal Diseases	893
2013	Essential Hypertension and Renal Diseases	971
2014	Essential Hypertension and Renal Diseases	871
2007	Human Immunodeficiency Virus Disease	963
2008	Human Immunodeficiency Virus Disease	927
2009	Human Immunodeficiency Virus Disease	837
2010	Human Immunodeficiency Virus Disease	725
2011	Human Immunodeficiency Virus Disease	663
2012	Human Immunodeficiency Virus Disease	471
2013	Human Immunodeficiency Virus Disease	433
2014	Human Immunodeficiency Virus Disease	417
2007	Influenza (Flu) and Pneumonia	2236
2008	Influenza (Flu) and Pneumonia	2297
2009	Influenza (Flu) and Pneumonia	2274
2010	Influenza (Flu) and Pneumonia	2448
2011	Influenza (Flu) and Pneumonia	2491
2012	Influenza (Flu) and Pneumonia	2240
2013	Influenza (Flu) and Pneumonia	2472
2014	Influenza (Flu) and Pneumonia	2220