veltman/gist:9382852

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