Skip to content

Instantly share code, notes, and snippets.

@ohdebby

ohdebby/.block

Last active January 13, 2017 23:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ohdebby/ecfb35b607a329582a1eaa0db9a4dd39 to your computer and use it in GitHub Desktop.
Save ohdebby/ecfb35b607a329582a1eaa0db9a4dd39 to your computer and use it in GitHub Desktop.
Download ZIP
Causes of Death - Whites 45-54
Raw
.block
license: mit
Raw
Fig2.csv
year LungCancer Poisonings Suicides ChronicLiverDiseases Diabetes
1999 31.5 6.7 16 15.8 10.5
2000 32 7.2 16.7 16.2 10.7
2001 31.3 8.3 17.8 16.9 11.2
2002 31.2 11.4 18.8 16.8 11.3
2003 31 13.4 19.1 17.5 11.3
2004 31 15.1 19.9 17.4 11.3
2005 31.1 17 20 17.2 11.1
2006 30.5 19.7 21.1 17.7 11
2007 30.1 22.1 21.8 18.5 11.1
2008 30.5 23.9 23.2 18.6 11
2009 30.6 24.2 23.9 19.1 11.2
2010 29.3 24.7 24.7 19.8 10.8
2011 28.7 27 25.4 20.5 11.8
2012 27.8 27 25.7 21.1 11.2
2013 27.2 28.4 25.5 21.1 11.8
2014 25.8 29.9 26.3 21.2 12.4
2015 23.9 31.8 26.6 21.9 12.8
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
body {
font-family: sans-serif;
}
text {
font-size: 12px;
fill: #888;
}
path, line {
stroke: #888;
stroke-width: 2;
fill: none;
}
</style>
<p>Mortality by cause, white non-Hispanics ages 45-54.</p>
<svg width="700" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 80, bottom: 30, left: 50},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var parseTime = d3.timeParse("%Y");
var x = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
z = d3.scaleOrdinal(d3.schemeCategory10);
var line = d3.line()
// .curve(d3.curveBasis)
.x(function(d) { return x(d.year); })
.y(function(d) { return y(d.mortality); });
d3.csv("Fig2.csv", type, function(error, data) {
if (error) throw error;
var causes = data.columns.slice(1).map(function(id) {
return {
id: id,
values: data.map(function(d) {
return {year: d.year, mortality: d[id]};
})
};
});
x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain([0,
d3.max(causes, function(c) { return d3.max(c.values, function(d) { return d.mortality; }); })
]);
z.domain(causes.map(function(c) { return c.id; }));
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -35)
.attr("x", -150)
.text("deaths per 100,000");
var cause = g.selectAll(".cause")
.data(causes)
.enter().append("g")
.attr("class", "cause");
cause.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return z(d.id); });
cause.append("text")
.datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.year) + "," + y(d.value.mortality) + ")"; })
.attr("x", 3)
.attr("dy", "0.35em")
.style("font", "10px sans-serif")
.text(function(d) { return d.id; });
});
function type(d, _, columns) {
d.year = parseTime(d.year);
for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c];
return d;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment