Module 6 - Time series chart of per-capita greenhouse gas emissions

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Module 6...</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
		
		
		
		<style type = "text/css">
			
			body { 	background-color: white;
					font-family: Helvetica, Arial, sans-serif;}
					
			h1 {font-size: 20px;
				margin: 0;}
			
			p{font-family: Georgia; font-size: 12px;}
			
			.axis path, .axis line {
				fill : none;
				stroke : black;
				shape-rendering : crispEdges;
			}	
				
			.axis text {font-family : sans-serif;
						font-size : 11px;}
			
			.x.label, .y.label  {font-family : Georgia;
						font-size : 14px;}
		
			
		
			path {
				stroke: #aaaaaa;
				stroke-width: 2;
				opacity: 0.5;
			}
						
			.axis path,
			.axis line {
				fill: none;
				stroke: #777777;
				stroke-width: 1;
				shape-rendering: crispEdges;
			}
			
			g.Down path {
				stroke: steelblue;
				opacity: 0.25;
			}
			
			g.Down path:hover {opacity : 1;}
			
			g.Up path {
				stroke: red;
			}
			g.Up path:hover {opacity : 1;}
			
			/* .y.axis path,
			.y.axis line{opacity: 0;} */
						
				
		</style>
	</head>
	<body>

<h1> Greenhouse gas emissions per capita for selected OECD countries </h1>
		<p> In thousands of kg CO2 equivalent. Source: <a href = "https://stats.oecd.org/viewhtml.aspx?datasetcode=AIR_GHG&lang=en"> OECD </a> </p>
		<p> Countries where per capita emissions have <span style='color:red'> increased </span> from 1990 to 2012 are shown in red. Hover over a line to display the country. </p>

// Set width and height of SVG
		var h = 600;
		var w = 800;
		// Padding: Top, right, bottom, left
		var pad = {t : 20, r : 25, b : 50, l : 100}

// Define scale ranges
		var xScale = d3.time.scale()
			.range([pad.l,w - pad.r]);
		var yScale = d3.scale.linear().range([pad.t, h - pad.b]);

// Define number formats
		var fmtStandard = d3.format(",g");
		var fmt2dp = d3.format(",.2f");

// Add the SVG element
		var svg = d3.select("body")
			.append("svg")
			.attr("width", w)
			.attr("height", h);
			
		// Set up date formats
		dateFmt = d3.time.format("%Y");
				
		// Set up global variables to contain data
		//var data;
		var dataset = [];
		//var dataFiltered;
		var years = ["1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012"];

function chartSetup() {
					
			// Define axes
			var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
				.tickFormat(function(d) {return dateFmt(d);});

var yAxis = d3.svg.axis().scale(yScale).orient("left")
				.tickFormat(fmtStandard);

// Add axes
			svg.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate (" + 0 + "," + (h - pad.b) + ")")
				.call(xAxis);

svg.append("g")
				.attr("class", "y axis")
				.attr("transform", "translate (" + pad.l  + "," + 0 + ")")
				.call(yAxis);

// x axis label
			svg.append("text")
				.text("Year")
				.attr("class", "x label")
				.attr("x", (pad.l + ((w-pad.r-pad.l) /2 )))
				.attr("y", (h-(pad.b*0.25)))
				.attr("text-anchor", "middle");

// y axis label
			var yLabelX = pad.l*0.5
			var yLabelY = pad.t + ((h-pad.t-pad.b) /2) 
			svg.append("text")
				.text("Total emissions per capita (thousand kgs CO2 equivalent)")
				.attr("class", "y label")
				.attr("x", yLabelX)
				.attr("y", yLabelY)
				.attr("transform", "rotate(-90 " + yLabelX + "," + yLabelY + ")")
				.attr("text-anchor", "middle");
			
		};

function drawPoints() {
			
			
			// Define scale domains
			xScale.domain([
				d3.min(years, function(d) {return dateFmt.parse(d);}), 
				d3.max(years, function(d) {return dateFmt.parse(d);})]);

yScale.domain([
				d3.max(dataset, function(d) {
				return d3.max(d.emissions, function(d) {
				return +d.amount;
			}); 
		}),
		 0]);
		 
		// Set up line generator
		var line = d3.svg.line()
			.x(function(d) {return xScale(dateFmt.parse(d.Year)) ;})
			.y(function(d) {return yScale(+d.amount) ;});

// Make a group for each country
			var groups = svg.selectAll("g")
				.data(dataset)
				.enter()
				.append("g");
				
			groups.attr("class", function(d) {
				if (+d.emissions[0].amount > +d.emissions[d.emissions.length - 1].amount) {return "Down";}
				else {return "Up";}
				});

groups.append("title")
				.text(function(d) {
			 	return d.Country;
			 	});
			
			// Within each group, draw a line
			groups.selectAll("path")
				.data(function(d) {
					return [d.emissions];
				})
				.enter()
				.append("path")
				.attr("class", "line")
				.attr("d", line)
				.attr("fill", "none")
				.attr("stroke-width, 2");	
		};
		
		// Load the greenhouse gas data
		d3.csv("AIR_GHG_v2.csv", function (error, data) {
			if (error) {console.log(error);}
			else {

// // First, get the emissions values in millions of tonnes of CO2 equivalent
				for (var i=0; i < data.length; i++) {
				data[i].totalEmissions = +data[i].totalEmissions / 1000;};
					
				//Re-format the data
				//console.log(data);
				var lastCountry = " "	;
				var idx = -1; // Arrays are zero-based!
				for (var i=0; i < data.length; i++)	{
					if (data[i].Country != lastCountry) {
						// Set up object for new country
						idx++;				
						dataset[idx] = {
							Country : data[i].Country,
							emissions :	[]
						};
						dataset[idx].emissions.push({
							Year : data[i].Year,
							amount : data[i].emissionsPerCapita 
						});		
						
					}
					else {
						dataset[idx].emissions.push({
							Year : data[i].Year,
							amount : data[i].emissionsPerCapita 
						});
					};
					lastCountry = data[i].Country;
					//console.log(idx, + ", " + i)
				};
			
				// Draw lines 
				drawPoints();
				
				// Draw axes and labels
				chartSetup();

}
		});
		
				
		</script>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js