Skip to content

Instantly share code, notes, and snippets.

@veltman
Created November 19, 2013 16:00
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save veltman/7547633 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>For Aly</title>
<meta charset="utf-8">
<style>
path {
stroke-width: 2px;
fill: none;
}
path.Japan {
stroke: tomato;
}
path.United_Kingdom {
stroke: steelblue;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
var width = 600,
height = 400;
var x = d3.scale.linear().domain([1750,1930]).range([0,width]);
var y = d3.scale.linear().domain([24,71]).range([height,0]);
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.year); })
.y(function(d) { return y(d.count); });
d3.tsv("aly.tsv",function(err,tsv) {
var lines = {};
//For each column
for (var column in tsv[0]) {
//Skip the year
if (column == "year") continue;
//For each column besides year, add an array of points to lines
lines[column] = tsv.map(function(d){
return {"year": d.year, "count": d[column]};
}).filter(function(d){
//Filter out empty ones
return d.count.length;
});
}
//Create the SVG
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height);
//Create the paths, use the entries for the data
//Each item in the entries will be
//{key: "COUNTRY NAME", value: [ARRAY OF OBJECTS, EACH WITH A "year" AND "count" property]}
svg.selectAll("path")
.data(d3.entries(lines))
.enter()
.append("path")
.attr("class",function(d){
//This will be "Japan" or "United_Kingdom"
return d.key.replace(" ","_");
})
.attr("d",function(d) {
//Generate the line
return line(d.value);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment