Created
March 6, 2014 04:47
-
-
Save veltman/9382852 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font: 14px sans-serif; | |
} | |
path { | |
stroke-width: 2px; | |
fill: none; | |
} | |
.path-0 { | |
stroke: tomato; | |
} | |
.path-1 { | |
stroke: steelblue; | |
} | |
.path-2 { | |
stroke: darkgreen; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
text { | |
text-anchor: end; | |
} | |
</style> | |
</head> | |
<body> | |
<script src="http://d3js.org/d3.v3.js"></script> | |
<script> | |
//Chart dimensions | |
var width = 600, | |
height = 400, | |
margin = 40; | |
//A set of ranges you want lines for | |
var yearRanges = [ | |
[1990,1994], | |
[2002,2006], | |
[2008,2010] | |
]; | |
//Returns the maximum number of years in a range | |
var maxRangeLength = d3.max(yearRanges.map(function(d){ | |
return d[1]-d[0]; | |
})); | |
//Scale for x axis - domain is "years since first year for that line" | |
var x = d3.scale.linear().domain([0,maxRangeLength]).range([margin,width-margin]); | |
//Scale for y axis - domain is 0-100, data is random values | |
var y = d3.scale.linear().domain([0,100]).range([height-margin,margin]); | |
//Create the SVG | |
var svg = d3.select("body").append("svg") | |
.attr("width",width) | |
.attr("height",height); | |
var xAxis = d3.svg.axis() | |
.tickFormat(d3.format("d")) | |
.scale(x) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.orient("left"); | |
//Create the x axis | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + (height-margin) + ")") | |
.call(xAxis) | |
.append("text") | |
.text("Years after") | |
.attr("x",width-margin) | |
.attr("dy","2em"); | |
//Create the y axis | |
svg.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(" + margin + ")") | |
.call(yAxis); | |
var line = d3.svg.line() | |
.interpolate("basis") | |
.x(function(d) { return x(d.yearsAfter); }) | |
.y(function(d) { return y(d.value); }); | |
//Get the data | |
d3.csv("data.csv",function(err,csv) { | |
//Make sure the numbers are treated as numbers, not strings | |
csv = csv.map(function(d){ | |
return { | |
"year": parseInt(d.year), | |
"value": parseInt(d.value) | |
} | |
//And sort it earliest to latest | |
}).sort(function(a,b){ | |
return a.year - b.year; | |
}); | |
//The important part - create an array of length 3 | |
//(one per range in yearRanges above) | |
//each item is an array of {year: x, value: y} objects, | |
//with the added property "yearsAfter," which is the | |
//difference between that year and the first in that range | |
var chartData = yearRanges.map(function(range){ | |
//For each range, get the rows in that range | |
return csv.filter(function(d){ | |
return d.year >= range[0] && d.year <= range[1]; | |
}).map(function(d){ | |
//For each row, also add the yearsAfter property relative to the range | |
d.yearsAfter = d.year - range[0]; | |
return d; | |
}) | |
}); | |
//Create the paths, use chartData | |
svg.append("g").selectAll("path") | |
.data(chartData) | |
.enter() | |
.append("path") | |
.attr("class",function(d,i){ | |
return "path-"+i; | |
}) | |
.attr("d",function(d) { | |
//Generate the line | |
return line(d); | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment