MariellaCC · October 28, 2015 21:03
diff --git a/data_ghg_capita.csv b/data_ghg_capita.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">

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

 		<title>Ghg emissions by country, 2012</title>
 		<style type="text/css">
 			
 		body {
 			background-color: white;
 			font-family: Helvetica, Arial, sans-serif;
 		}

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

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

 		svg {
 			background-color: white;
 		}

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

 		.y.axis path,
 		.y.axis line {
 			opacity: 0;
 		}

 	</style>

 	 </head>
  
  <body>
  	<h1>Greenhouse gas (GHG) emissions</h1>

 		<p>GHG emissions per capita and by country (Kilograms per capita, thousands). Source: <a href="http://stats.oecd.org/viewhtml.aspx?datasetcode=AIR_GHG&lang=en#">OECD</a>, 2012</p>
  		
  		<script type="text/javascript">

  			var w = 800;
 			var h = 600;
 			var padding = [ 20, 10, 30, 120 ];  //Top, right, bottom, left



 			var widthScale = d3.scale.linear()
 								.range([ 0, w - padding[1] - padding[3] ]);
 			
 			var heightScale = d3.scale.ordinal()
 								.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);



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

 			var yAxis = d3.svg.axis()
 							.scale(heightScale)
 							.orient("left");
  			
  			var svg = d3.select("body")
  						.append("svg")
  						.attr("width", w)
 						.attr("height", h);

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

  				data.sort(function(a, b) {
  					return d3.descending(+a.annee2012, +b.annee2012);
  				});

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

 				heightScale.domain(data.map(function(d) { return d.Country; } ));


  				var rects = svg.selectAll("rect")
  							.data(data)
  							.enter()
  							.append("rect");

  				rects.attr("x", padding[3])
 					.attr("y", function(d) {
 						return heightScale(d.Country);
 					})
 					.attr("width", function(d) {
 						return widthScale(d.annee2012);
 					})
 					.attr("height", heightScale.rangeBand())
 					.attr("fill", "steelblue")
 					.append("title")
  					.text(function(d) {
  						return d.Country + "'s greenhouse gas emissions (2012, Kilograms per capita, thousands): " + d.annee2012;
  					});

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

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

  			});

 		</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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">

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

	<title>Ghg emissions by country, 2012</title>
	<style type="text/css">

	body {
	background-color: white;
	font-family: Helvetica, Arial, sans-serif;
	}

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

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

	svg {
	background-color: white;
	}

	rect:hover {
	fill: orange;
	}

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

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

	.y.axis path,
	.y.axis line {
	opacity: 0;
	}

	</style>

	</head>

	<body>
	<h1>Greenhouse gas (GHG) emissions</h1>

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

	<script type="text/javascript">

	var w = 800;
	var h = 600;
	var padding = [ 20, 10, 30, 120 ]; //Top, right, bottom, left



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

	var heightScale = d3.scale.ordinal()
	.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);



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

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

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

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

	data.sort(function(a, b) {
	return d3.descending(+a.annee2012, +b.annee2012);
	});

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

	heightScale.domain(data.map(function(d) { return d.Country; } ));


	var rects = svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect");

	rects.attr("x", padding[3])
	.attr("y", function(d) {
	return heightScale(d.Country);
	})
	.attr("width", function(d) {
	return widthScale(d.annee2012);
	})
	.attr("height", heightScale.rangeBand())
	.attr("fill", "steelblue")
	.append("title")
	.text(function(d) {
	return d.Country + "'s greenhouse gas emissions (2012, Kilograms per capita, thousands): " + d.annee2012;
	});

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

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

	});

	</script>


	</body>

	</html>