scotthmurray · November 1, 2015 16:12
diff --git a/evolution.csv b/evolution.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">

 		<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>

 		<title>Ghg emissions' evolution by country, 2012</title>


 <style type="text/css">
 			
 			body {
 				margin: 0;
 				background-color: steelBlue;
 				font-family: Verdana, Arial, sans-serif;
 			}

 			h1 {
 				color: grey;
 				font-size: 24px;
 				margin: 0;
 			}

 			p {
 				font-size: 14px;
 				margin: 10px 0 20px 0;
 			}

 			a {
 				color: steelBlue;
 				text-decoration: none;
 			}

 			a:hover {
 				color: grey;
 				text-decoration: underline;
 			}

 			.title {
 				display: block;
 				max-width: 300px;
 				color: blue;
 			}

 			svg {
 				background-color: white;
 			}

 			#container {
 				width: 800px;
 				margin-left: auto;
 				margin-right: auto;
 				margin-top: 50px;
 				padding: 50px;
 				background-color: white;
 				box-shadow: 1px 1px 2px 3px #fff;
 			}

 			circle:hover {
 				fill: orange;
 			}
 			
 			.axis path,
 			.axis line {
 				fill: none;
 				stroke: black;
 				shape-rendering: crispEdges;
 			}
 			
 			.axis text {
 				font-family: sans-serif;
 				font-size: 11px;
 			}

 			/* Scott added this */

 			circle {
 				cursor: pointer;
 			}

 			#tooltip {
 				pointer-events: none;
 			}

 		</style>
 	</head>

 	<body>

 		<div id="container">

 			<h1>Greenhouse gas (GHG) emissions' evolution by country</h1>

 			<p>GHG emissions' evolution between 1990 and 2012&nbsp;(%) and their level per capita and by country (Kilograms per capita, thousands, 2012). Source: <a href="http://stats.oecd.org/viewhtml.aspx?datasetcode=AIR_GHG&lang=en#">OECD</a>.</p>

 		</div>

 		<script type="text/javascript">		


 			var w = 700;
 			var h = 600;
 			var padding = [ 20, 10, 50, 50 ];  //Top, right, bottom, left



 			var xScale = d3.scale.linear()
 								.range([ padding[3], w - padding[1] - padding[3] ]);
 			
 			var yScale = d3.scale.linear()
 								.range([ padding[0], h - padding[2] ]);



 			var xAxis = d3.svg.axis()
 							.scale(xScale)
 							.orient("bottom")
 							.ticks(8);

 			var yAxis = d3.svg.axis()
 							.scale(yScale)
 							.orient("left")
 							.tickFormat(function(d) {
 								return d + "%";
 							});



 			var svg = d3.select("#container")
 						.append("svg")
 						.attr("width", w)
 						.attr("height", h);



 			d3.csv("evolution.csv", function(data) {

 				xScale.domain([ 
 					d3.min(data, function(d) {
 						return +d.annee2012;
 					}), 
 					d3.max(data, function(d) {
 						return +d.annee2012;
 					})
 				]);

 				yScale.domain([
 					d3.max(data, function(d) {
 						return +d.evolution;
 					}),
 					d3.min(data, function(d) {
 						return +d.evolution;
 					})
 				]);


 				var circles = svg.selectAll("circle")
 								.data(data)
 								.enter()
 								.append("circle");

 				circles.attr("cx", function(d) {
 						return xScale(d.annee2012);
 					})
 					.attr("cy", function(d) {
 						return yScale(d.evolution);
 					})
 					.attr("r", 0.2)
 					.attr("fill", "steelblue")
 					.on("mouseover", function(d) {

 						//Scott edited this section

 						//Get this bar's x/y values, then augment for the tooltip
 						var xPosition = parseFloat(d3.select(this).attr("cx"));
 						var yPosition = parseFloat(d3.select(this).attr("cy"));

 						//Position the tooltip, set it's text contents, then make it visible
 						tooltip.attr("x", xPosition)
 							.attr("y", yPosition)
 							.text(d.Country + "'s GHG emissions evolved by " + d.evolution + "% between 1990 and 2012. In 2012, GHG emissions' amount for " + d.Country + " were at a level of " + d.annee2012 + " thousands kg per capita.")
 							.attr("opacity", 1);

 					})
 					.on("mouseout", function(d) {
 						tooltip.attr("opacity", 0);
 					});

 				circles.sort(function(a, b) {
 						return d3.ascending(+a.annee2012, +b.annee2012);
 					})
 					.transition()
 					.delay(function(d, i) {
 						return i * 50;
 					})
 					.duration(2000)
 					.attr("r", 4);

 				svg.append("g")
 					.attr("class", "x axis")
 					.attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
 					.call(xAxis);

 				svg.append("g")
 					.attr("class", "y axis")
 					.attr("transform", "translate(" + (padding[3] - 10) + ",0)")
 					.call(yAxis);

 				//Scott added this section
 				var tooltip = svg.append("text")
  					.attr("id", "tooltip")
  					.attr("x", 0)
  					.attr("y", 0)
  					.attr("text-anchor", "start")
  					.attr("font-family", "sans-serif")
  					.attr("font-size", "11px")
 				 	.attr("font-weight", "bold")
  					.attr("opacity", 0)
  					.text("");

 			});


 		</script>
 		  </body>

 </html>
Country	annee1990	annee1991	annee1992	annee1993	annee1994	annee1995	annee1996	annee1997	annee1998	annee1999	annee2000	annee2001	annee2002	annee2003	annee2004	annee2005	annee2006	annee2007	annee2008	annee2009	annee2010	annee2011	annee2012	evolution
Australia	24.32	24.1	24.05	23.93	23.7	24.17	24.21	24.61	25.15	25.34	25.57	25.88	25.63	25.45	25.79	25.67	25.6	25.6	25.47	24.85	24.48	24.26	23.97	-1.44
Austria	10.17	10.59	9.62	9.55	9.62	10.03	10.4	10.33	10.24	10.01	10.02	10.48	10.64	11.33	11.21	11.25	10.85	10.48	10.42	9.58	10.11	9.85	9.5	-6.59
Belgium	14.34	14.49	14.31	14.16	14.68	14.83	15.19	14.31	14.82	14.17	14.23	14.11	14.01	14.01	14.05	13.56	13.12	12.56	12.68	11.41	11.96	10.88	10.47	-26.99
Canada	21.34	20.8	21.15	20.99	21.46	21.81	22.33	22.6	22.66	22.9	23.51	23.02	22.95	23.39	23.28	22.82	22.34	22.76	21.94	20.44	20.49	20.33	20.03	-6.14
Czech Republic	18.93	17.67	16.05	15.44	14.46	14.69	15.08	14.73	14.05	13.33	14.25	14.31	14	14.29	14.43	14.26	14.32	14.26	13.63	12.79	13.03	12.89	12.51	-33.91
Denmark	13.62	15.62	14.4	14.77	15.48	14.77	17.15	15.28	14.51	13.96	13.1	13.35	13.2	14.07	12.93	12.1	13.51	12.62	11.91	11.32	11.36	10.42	9.5	-30.25
Estonia	25.88	23.98	17.86	14.22	14.98	13.97	14.64	14.53	13.57	12.64	12.44	12.77	12.38	13.82	14.11	13.63	13.25	15.61	14.58	12.1	14.88	15.34	14.44	-44.20
Finland	14.11	13.59	13.23	13.58	14.58	13.85	14.93	14.61	13.88	13.74	13.37	14.34	14.73	16.22	15.41	13.08	15.17	14.8	13.2	12.36	13.87	12.41	11.26	-20.20
France	9.88	10.25	10.04	9.54	9.51	9.63	9.85	9.73	9.96	9.66	9.56	9.47	9.32	9.34	9.25	9.21	8.96	8.76	8.64	8.22	8.3	7.85	7.81	-20.95
Germany	15.72	15.02	14.28	14.06	13.78	13.69	13.88	13.42	13.11	12.7	12.66	12.83	12.54	12.51	12.36	12.06	12.17	11.87	11.93	11.14	11.58	11.36	11.46	-27.10
Greece	10.33	10.19	10.22	10.04	10.22	10.32	10.53	10.91	11.37	11.31	11.59	11.65	11.6	11.91	11.91	12.19	11.82	12.03	11.64	11	10.51	10.31	10.01	-3.10
Hungary	9.41	8.65	7.69	7.75	7.66	7.6	7.83	7.7	7.7	7.78	7.49	7.69	7.57	7.86	7.83	7.77	7.69	7.52	7.31	6.68	6.76	6.62	6.25	-33.58
Iceland	13.89	13.08	12.56	12.67	12.32	12.4	12.67	13.14	13.48	14.14	13.88	13.58	13.57	13.41	13.44	13.04	14.43	14.84	15.73	14.97	14.61	13.92	13.93	0.29
Ireland	15.77	15.9	15.78	15.81	16.12	16.36	16.82	17.06	17.62	17.7	17.99	18.23	17.43	17.18	16.83	16.82	16.3	15.59	15.15	13.73	13.58	12.62	12.76	-19.09
Italy	9.15	9.17	9.11	9.06	8.89	9.35	9.22	9.32	9.5	9.61	9.64	9.72	9.71	9.98	10.02	9.88	9.64	9.43	9.11	8.2	8.32	8.07	7.6	-16.94
Japan	9.99	10.04	10.09	10.03	10.52	10.64	10.72	10.65	10.28	10.43	10.56	10.34	10.58	10.59	10.55	10.57	10.43	10.68	10.03	9.46	9.81	10.22	10.53	5.41
Luxembourg	33.79	34.75	33.71	33.55	31.04	24.91	24.72	22.73	20.35	21.05	22.38	23.23	24.74	25.2	28.08	28.15	27.39	25.75	24.94	23.47	24.16	23.39	22.3	-34.00
Netherlands	14.17	14.36	14.17	14.39	14.3	14.44	14.9	14.39	14.36	13.49	13.38	13.37	13.22	13.21	13.24	12.83	12.58	12.47	12.36	11.97	12.6	11.69	11.44	-19.27
New Zealand	18.03	17.63	17.84	17.54	17.61	17.55	17.85	18.28	17.57	17.99	18.38	18.97	18.83	19.07	18.64	18.94	18.68	18.03	17.75	16.94	16.83	16.89	17.16	-4.83
Norway	11.89	11.34	10.86	11.25	11.63	11.53	12.18	12.11	12.07	12.22	12.04	12.25	11.93	12.03	12.07	11.78	11.65	11.89	11.42	10.73	11.12	10.76	10.51	-11.61
Poland	12.26	11.97	11.58	11.57	11.46	11.53	11.86	11.64	10.89	10.62	10.35	10.27	9.95	10.3	10.43	10.45	10.86	10.9	10.65	10.16	10.58	10.53	10.36	-15.50
Portugal	6.09	6.29	6.74	6.61	6.7	7.12	6.87	7.14	7.59	8.34	8.17	8.09	8.45	7.87	8.14	8.35	7.85	7.61	7.39	7.08	6.68	6.57	6.54	7.39
Slovak Republic	13.82	11.95	10.89	10.18	9.69	9.93	9.99	9.76	9.62	9.42	9.08	9.57	9.28	9.43	9.48	9.36	9.37	9	9.11	8.3	8.42	8.28	7.9	-42.84
Slovenia	9.23	8.65	8.62	8.77	8.87	9.33	9.66	9.86	9.76	9.42	9.52	9.95	10.01	9.85	10.01	10.15	10.22	10.24	10.57	9.49	9.47	9.48	9.2	-0.33
Spain	7.3	7.53	7.72	7.43	7.83	8.18	7.98	8.29	8.51	9.12	9.44	9.26	9.56	9.58	9.77	9.94	9.62	9.63	8.74	7.83	7.54	7.5	7.38	1.10
Sweden	8.5	8.46	8.35	8.31	8.53	8.4	8.82	8.24	8.29	7.91	7.73	7.8	7.85	7.87	7.75	7.41	7.35	7.13	6.84	6.36	6.94	6.43	6.05	-28.82
Switzerland	7.88	8.03	7.91	7.44	7.26	7.33	7.39	7.24	7.41	7.37	7.21	7.31	7.1	7.2	7.24	7.29	7.2	6.88	7.02	6.76	6.91	6.32	6.47	-17.89
Turkey	3.42	3.58	3.72	3.85	3.71	4	4.28	4.44	4.41	4.35	4.64	4.29	4.35	4.54	4.62	4.82	5.06	5.45	5.19	5.15	5.52	5.71	5.85	71.05
United Kingdom	13.61	13.69	13.24	12.88	12.68	12.53	12.86	12.41	12.36	11.8	11.78	11.83	11.47	11.54	11.59	11.42	11.31	11.08	10.53	9.74	9.93	8.95	9.17	-32.62
United States	24.92	24.49	24.54	24.74	24.7	24.78	25.29	25.19	24.9	24.84	25.08	24.49	24.38	24.33	24.58	24.46	23.97	24.19	23.32	21.65	22.16	21.56	20.67	-17.05
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">

	<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>

	<title>Ghg emissions' evolution by country, 2012</title>


	<style type="text/css">

	body {
	margin: 0;
	background-color: steelBlue;
	font-family: Verdana, Arial, sans-serif;
	}

	h1 {
	color: grey;
	font-size: 24px;
	margin: 0;
	}

	p {
	font-size: 14px;
	margin: 10px 0 20px 0;
	}

	a {
	color: steelBlue;
	text-decoration: none;
	}

	a:hover {
	color: grey;
	text-decoration: underline;
	}

	.title {
	display: block;
	max-width: 300px;
	color: blue;
	}

	svg {
	background-color: white;
	}

	#container {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	padding: 50px;
	background-color: white;
	box-shadow: 1px 1px 2px 3px #fff;
	}

	circle:hover {
	fill: orange;
	}

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

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	/* Scott added this */

	circle {
	cursor: pointer;
	}

	#tooltip {
	pointer-events: none;
	}

	</style>
	</head>

	<body>

	<div id="container">

	<h1>Greenhouse gas (GHG) emissions' evolution by country</h1>

	<p>GHG emissions' evolution between 1990 and 2012 (%) and their level per capita and by country (Kilograms per capita, thousands, 2012). Source: <a href="http://stats.oecd.org/viewhtml.aspx?datasetcode=AIR_GHG&lang=en#">OECD</a>.</p>

	</div>

	<script type="text/javascript">


	var w = 700;
	var h = 600;
	var padding = [ 20, 10, 50, 50 ]; //Top, right, bottom, left



	var xScale = d3.scale.linear()
	.range([ padding[3], w - padding[1] - padding[3] ]);

	var yScale = d3.scale.linear()
	.range([ padding[0], h - padding[2] ]);



	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(8);

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.tickFormat(function(d) {
	return d + "%";
	});



	var svg = d3.select("#container")
	.append("svg")
	.attr("width", w)
	.attr("height", h);



	d3.csv("evolution.csv", function(data) {

	xScale.domain([
	d3.min(data, function(d) {
	return +d.annee2012;
	}),
	d3.max(data, function(d) {
	return +d.annee2012;
	})
	]);

	yScale.domain([
	d3.max(data, function(d) {
	return +d.evolution;
	}),
	d3.min(data, function(d) {
	return +d.evolution;
	})
	]);


	var circles = svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle");

	circles.attr("cx", function(d) {
	return xScale(d.annee2012);
	})
	.attr("cy", function(d) {
	return yScale(d.evolution);
	})
	.attr("r", 0.2)
	.attr("fill", "steelblue")
	.on("mouseover", function(d) {

	//Scott edited this section

	//Get this bar's x/y values, then augment for the tooltip
	var xPosition = parseFloat(d3.select(this).attr("cx"));
	var yPosition = parseFloat(d3.select(this).attr("cy"));

	//Position the tooltip, set it's text contents, then make it visible
	tooltip.attr("x", xPosition)
	.attr("y", yPosition)
	.text(d.Country + "'s GHG emissions evolved by " + d.evolution + "% between 1990 and 2012. In 2012, GHG emissions' amount for " + d.Country + " were at a level of " + d.annee2012 + " thousands kg per capita.")
	.attr("opacity", 1);

	})
	.on("mouseout", function(d) {
	tooltip.attr("opacity", 0);
	});

	circles.sort(function(a, b) {
	return d3.ascending(+a.annee2012, +b.annee2012);
	})
	.transition()
	.delay(function(d, i) {
	return i * 50;
	})
	.duration(2000)
	.attr("r", 4);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + (padding[3] - 10) + ",0)")
	.call(yAxis);

	//Scott added this section
	var tooltip = svg.append("text")
	.attr("id", "tooltip")
	.attr("x", 0)
	.attr("y", 0)
	.attr("text-anchor", "start")
	.attr("font-family", "sans-serif")
	.attr("font-size", "11px")
	.attr("font-weight", "bold")
	.attr("opacity", 0)
	.text("");

	});


	</script>
	</body>

	</html>