luluwuluying · March 28, 2016 03:00
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <!-- Modification of Mike Bostock's code in http://bl.ocks.org/mbostock/1157787 -->
 <meta charset="utf-8">
 <style>

 body {
  font: 10px sans-serif;
  margin: 20px;
  padding: 20px;
 }

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

 .area {
  fill: #e7e7e7;
 }

 .label {
  fill: steelblue;
 }

 </style>
 <body>

  <h1>Road injury accidents happened all over the world.</h1>

  <p>Source:OECD. This chart shows total number of road casualties (killed+injured) all over the world from 2000 to 2011</p>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
 <script>

 var fullwidth = 250,
  fullheight = 69;

 var margin = {top: 25, right: 10, bottom: 20, left: 40},
    width = fullwidth - margin.left - margin.right,
    height = fullheight - margin.top - margin.bottom;

 var formatDate = d3.time.format("%Y");
    
 var x = d3.time.scale()
    .range([0, width]);

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

 var area = d3.svg.area()
    .x(function(d) { return x(d.date); })
    .y0(height)
    .y1(function(d) { return y(d.Amount); });

 var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.Amount); });

 d3.csv("roadaccidents.csv", typeFix, function(error, data) {

  //typeFix is a function that parses the dates and sets the strings to numeric. See below!
  console.log("data after load", data);

  // Nest data by symbol.
  var countries = d3.nest()
      .key(function(d) { return d.Country; })
      .sortValues(function(a,b) {return a.date - b.date;})
      .entries(data);

  // Compute the maxValue per country -- for the y axis
  countries.forEach(function(s) {
    s.maxValue = d3.max(s.values, function(d) { return +d.Amount; });
  });

  console.log(countries);

  // Compute the minimum and maximum date across symbols.
  // We assume values are sorted by date.
  x.domain([
    d3.min(countries, function(s) { return s.values[0].date; }),
    d3.max(countries, function(s) { return s.values[s.values.length - 1].date; })
  ]);

  // Add an SVG element for each symbol, with the desired dimensions and margin.
  var svg = d3.select("body").selectAll("svg")
      .data(countries)
    .enter().append("svg")
      .attr("width", fullwidth)
      .attr("height", fullheight)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  // Add the area path elements. Note: the y-domain is set per element.
  svg.append("path")
      .attr("class", "area")
      .attr("d", function(d) { y.domain([0, d.maxValue]); return area(d.values); });

  // Add the line path elements. Note: the y-domain is set per element.
  svg.append("path")
      .attr("class", "line")
      .attr("d", function(d) { y.domain([0, d.maxValue]); return line(d.values); });

  // Add a small label for the symbol name.
    
  svg.append("text")
    .attr("class", "label")
    .attr("x", 0)
    .attr("y", -8)
    .style("text-anchor", "start")
    .text(function(d) { return (d.values[0].date); });

  svg.append("text")
    .attr("class", "label")
    .attr("x", width/2)
    .attr("y", -8)
    .style("text-anchor", "middle")
    .text(function(d) { return d.key; });

  svg.append("text")
    .attr("class", "label")
    .attr("x", width)
    .attr("y", -8)
    .style("text-anchor", "end")
    .text(function(d) { return (d.values[d.values.length - 1].date);});

    // put a dot on last point
    svg.append("circle")
    .attr("class", "label")
    .attr("cx", function(d) {return x(d.values[d.values.length - 1].date);})
    .attr("cy", function(d) { y.domain([0, d.maxValue]); return y(d.values[d.values.length - 1].Amount);})
    .attr("r", 2);

    // label the value on the last point
  svg.append("text")
   .attr("class", "label")
    .attr("x", width)
    .attr("y", function(d) { y.domain([0, d.maxValue]); return y(d.values[d.values.length - 1].Amount);})
    .attr("dy", 12)
    .style("text-anchor", "end")
    .text(function(d) { return d.values[d.values.length - 1].Amount; });
 });

 // this function is applied to all the data values on load!

 function typeFix(d) {
  d.Amount = +d.Amount;
  d.date = d.Year;
  return d;
 }

 </script>
diff --git a/roadaccidents.csv b/roadaccidents.csv
	<!DOCTYPE html>
	<!-- Modification of Mike Bostock's code in http://bl.ocks.org/mbostock/1157787 -->
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	margin: 20px;
	padding: 20px;
	}

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

	.area {
	fill: #e7e7e7;
	}

	.label {
	fill: steelblue;
	}

	</style>
	<body>

	<h1>Road injury accidents happened all over the world.</h1>

	<p>Source:OECD. This chart shows total number of road casualties (killed+injured) all over the world from 2000 to 2011</p>

	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script>

	var fullwidth = 250,
	fullheight = 69;

	var margin = {top: 25, right: 10, bottom: 20, left: 40},
	width = fullwidth - margin.left - margin.right,
	height = fullheight - margin.top - margin.bottom;

	var formatDate = d3.time.format("%Y");

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

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

	var area = d3.svg.area()
	.x(function(d) { return x(d.date); })
	.y0(height)
	.y1(function(d) { return y(d.Amount); });

	var line = d3.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.Amount); });

	d3.csv("roadaccidents.csv", typeFix, function(error, data) {

	//typeFix is a function that parses the dates and sets the strings to numeric. See below!
	console.log("data after load", data);

	// Nest data by symbol.
	var countries = d3.nest()
	.key(function(d) { return d.Country; })
	.sortValues(function(a,b) {return a.date - b.date;})
	.entries(data);

	// Compute the maxValue per country -- for the y axis
	countries.forEach(function(s) {
	s.maxValue = d3.max(s.values, function(d) { return +d.Amount; });
	});

	console.log(countries);

	// Compute the minimum and maximum date across symbols.
	// We assume values are sorted by date.
	x.domain([
	d3.min(countries, function(s) { return s.values[0].date; }),
	d3.max(countries, function(s) { return s.values[s.values.length - 1].date; })
	]);

	// Add an SVG element for each symbol, with the desired dimensions and margin.
	var svg = d3.select("body").selectAll("svg")
	.data(countries)
	.enter().append("svg")
	.attr("width", fullwidth)
	.attr("height", fullheight)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// Add the area path elements. Note: the y-domain is set per element.
	svg.append("path")
	.attr("class", "area")
	.attr("d", function(d) { y.domain([0, d.maxValue]); return area(d.values); });

	// Add the line path elements. Note: the y-domain is set per element.
	svg.append("path")
	.attr("class", "line")
	.attr("d", function(d) { y.domain([0, d.maxValue]); return line(d.values); });

	// Add a small label for the symbol name.

	svg.append("text")
	.attr("class", "label")
	.attr("x", 0)
	.attr("y", -8)
	.style("text-anchor", "start")
	.text(function(d) { return (d.values[0].date); });

	svg.append("text")
	.attr("class", "label")
	.attr("x", width/2)
	.attr("y", -8)
	.style("text-anchor", "middle")
	.text(function(d) { return d.key; });

	svg.append("text")
	.attr("class", "label")
	.attr("x", width)
	.attr("y", -8)
	.style("text-anchor", "end")
	.text(function(d) { return (d.values[d.values.length - 1].date);});

	// put a dot on last point
	svg.append("circle")
	.attr("class", "label")
	.attr("cx", function(d) {return x(d.values[d.values.length - 1].date);})
	.attr("cy", function(d) { y.domain([0, d.maxValue]); return y(d.values[d.values.length - 1].Amount);})
	.attr("r", 2);

	// label the value on the last point
	svg.append("text")
	.attr("class", "label")
	.attr("x", width)
	.attr("y", function(d) { y.domain([0, d.maxValue]); return y(d.values[d.values.length - 1].Amount);})
	.attr("dy", 12)
	.style("text-anchor", "end")
	.text(function(d) { return d.values[d.values.length - 1].Amount; });
	});

	// this function is applied to all the data values on load!

	function typeFix(d) {
	d.Amount = +d.Amount;
	d.date = d.Year;
	return d;
	}

	</script>