Skip to content

Instantly share code, notes, and snippets.

@echomelodylwh

echomelodylwh/.block

Last active September 23, 2017 00:42
Show Gist options
  • Save echomelodylwh/6049a55b24557a7ab1f8c11b0b3b1023 to your computer and use it in GitHub Desktop.
Save echomelodylwh/6049a55b24557a7ab1f8c11b0b3b1023 to your computer and use it in GitHub Desktop.
Download ZIP
New York City Leading Causes of Death From 2007 To 2014
Raw
.block
license: mit
Raw
README.md
Raw
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>
Raw
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment