rpass/data.tsv

## data.tsv

          
            date
            South Africa
            Zimbabwe

            
              20131231
              52981991
              14149648

            
              20121231
              52274945
              13724317

            
              20111231
              51579599
              13358738

            
              20101231
              50895698
              13076978

            
              20091231
              50222996
              12888918

            
              20081231
              49561256
              12784041

            
              20071231
              48910248
              12740160

            
              20061231
              48269753
              12724308

            
              20051231
              47639556
              12710589

            
              20041231
              47019452
              12693047

            
              20031231
              46409243
              12673103

            
              20021231
              45808736
              12640922

            
              20011231
              44909738
              12586763

            
              20001231
              44000000
              12503652

            
              19991231
              42923485
              12384727

            
              19981231
              41899683
              12229500

            
              19971231
              40926063
              12045813

            
              19961231
              40000247
              11846110

            
              19951231
              39120000
              11639364

            
              19941231
              38283223
              11428655

            
              19931231
              37473796
              11210802

            
              19921231
              36690739
              10981267

            
              19911231
              35933108
              10733048

            
              19901231
              35200000
              10461782

            
              19891231
              34490549
              10167392

            
              19881231
              33728498
              9854098

            
              19871231
              32933081
              9527192

            
              19861231
              32121290
              9193889

            
              19851231
              31307880
              8860331

            
              19841231
              30505361
              8527836

            
              19831231
              29724004
              8197858

            
              19821231
              28971839
              7876786

            
              19811231
              28254655
              7572129

            
              19801231
              27576000
              7289069

            
              19791231
              26940793
              7031084

            
              19781231
              26355319
              6796863

            
              19771231
              25805575
              6580696

            
              19761231
              25268094
              6373946

            
              19751231
              24728000
              6170266

            
              19741231
              24189837
              5967819

            
              19731231
              23655908
              5768337

            
              19721231
              23126276
              5573282

            
              19711231
              22602373
              5385328

            
              19701231
              22087000
              5206305

            
              19691231
              21612522
              5036316

            
              19681231
              21153722
              4874109

            
              19671231
              20707258
              4718609

            
              19661231
              20268594
              4568317

            
              19651231
              19832000
              4422129

            
              19641231
              19390554
              4279559

            
              19631231
              18936138
              4140802

            
              19621231
              18459442
              4006261

            
              19611231
              17949962
              3876638

            
              19601231
              17396000
              3752390

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>

var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var parseDate = d3.time.format("%Y%m%d").parse;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.category10();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.population); });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("data.tsv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

  data.forEach(function(d) {
    d.date = parseDate(d.date);
  });

  var countries = color.domain().map(function(name) {
    return {
      name: name,
      values: data.map(function(d) {
        return {date: d.date, population: +d[name]};
      })
    };
  });

  x.domain(d3.extent(data, function(d) { return d.date; }));

  y.domain([
    d3.min(countries, function(c) { return d3.min(c.values, function(v) { return v.population; }); }),
    d3.max(countries, function(c) { return d3.max(c.values, function(v) { return v.population; }); })
  ]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Population");

  var city = svg.selectAll(".country")
      .data(countries)
    .enter().append("g")
      .attr("class", "country");

  city.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { return color(d.name); });

  city.append("text")
      .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
      .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.population) + ")"; })
      .attr("x", 3)
      .attr("dy", ".35em")
      .text(function(d) { return d.name; });
});

</script>
date	South Africa	Zimbabwe
20131231	52981991	14149648
20121231	52274945	13724317
20111231	51579599	13358738
20101231	50895698	13076978
20091231	50222996	12888918
20081231	49561256	12784041
20071231	48910248	12740160
20061231	48269753	12724308
20051231	47639556	12710589
20041231	47019452	12693047
20031231	46409243	12673103
20021231	45808736	12640922
20011231	44909738	12586763
20001231	44000000	12503652
19991231	42923485	12384727
19981231	41899683	12229500
19971231	40926063	12045813
19961231	40000247	11846110
19951231	39120000	11639364
19941231	38283223	11428655
19931231	37473796	11210802
19921231	36690739	10981267
19911231	35933108	10733048
19901231	35200000	10461782
19891231	34490549	10167392
19881231	33728498	9854098
19871231	32933081	9527192
19861231	32121290	9193889
19851231	31307880	8860331
19841231	30505361	8527836
19831231	29724004	8197858
19821231	28971839	7876786
19811231	28254655	7572129
19801231	27576000	7289069
19791231	26940793	7031084
19781231	26355319	6796863
19771231	25805575	6580696
19761231	25268094	6373946
19751231	24728000	6170266
19741231	24189837	5967819
19731231	23655908	5768337
19721231	23126276	5573282
19711231	22602373	5385328
19701231	22087000	5206305
19691231	21612522	5036316
19681231	21153722	4874109
19671231	20707258	4718609
19661231	20268594	4568317
19651231	19832000	4422129
19641231	19390554	4279559
19631231	18936138	4140802
19621231	18459442	4006261
19611231	17949962	3876638
19601231	17396000	3752390
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.x.axis path {
	display: none;
	}

	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 1.5px;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.js"></script>
	<script>

	var margin = {top: 20, right: 80, bottom: 30, left: 50},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var parseDate = d3.time.format("%Y%m%d").parse;

	var x = d3.time.scale()
	.range([0, width]);

	var y = d3.scale.linear()
	.range([height, 0]);

	var color = d3.scale.category10();

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

	var line = d3.svg.line()
	.interpolate("basis")
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.population); });

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	d3.tsv("data.tsv", function(error, data) {
	color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

	data.forEach(function(d) {
	d.date = parseDate(d.date);
	});

	var countries = color.domain().map(function(name) {
	return {
	name: name,
	values: data.map(function(d) {
	return {date: d.date, population: +d[name]};
	})
	};
	});

	x.domain(d3.extent(data, function(d) { return d.date; }));

	y.domain([
	d3.min(countries, function(c) { return d3.min(c.values, function(v) { return v.population; }); }),
	d3.max(countries, function(c) { return d3.max(c.values, function(v) { return v.population; }); })
	]);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Population");

	var city = svg.selectAll(".country")
	.data(countries)
	.enter().append("g")
	.attr("class", "country");

	city.append("path")
	.attr("class", "line")
	.attr("d", function(d) { return line(d.values); })
	.style("stroke", function(d) { return color(d.name); });

	city.append("text")
	.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
	.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.population) + ")"; })
	.attr("x", 3)
	.attr("dy", ".35em")
	.text(function(d) { return d.name; });
	});

	</script>