Module 5 - Scatterplot of greenhouse gas emissions

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Module 5 - Scatter plot</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;}
			
			.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;}
		
						
			.x.axis path,
			.x.axis line,
			.y.axis path,
			.y.axis line
			{stroke-width: 1px; stroke: #aaaaaa;}
			
			/* .y.axis path,
			.y.axis line{opacity: 0;} */
						
			circle:hover {fill: orange;}
				
		</style>
	</head>
	<body>

<h1> Greenhouse gas emissions, total and per capita, in 2012 </h1>
		<p style = "font-size : 12px"> In millions of tonnes of CO2 equivalent. Source: <a href = "https://stats.oecd.org/viewhtml.aspx?datasetcode=AIR_GHG&lang=en"> OECD </a> </p>
		<p style = "font-size : 12px"> Each point on the chart represents a country. Countries towards the top left tend to have relatively high 
		levels of greenhouse gas emissions per person, but low total emissions due to low population. Countries towards
		 the top right have high emissions both per capita and overall. </p>

<p style = "font-size : 12px"> The chart could be improved with some colour-coding on the points (e.g. where the colour
		indicates a country's continent), and some animation showing how the figures change over the years. </p>

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

// Define scale ranges
		var xScale = d3.scale.linear().range([0,w - pad.l - pad.r]);
		var yScale = d3.scale.linear().range([0, h - pad.t - 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 global variable to contain data
		var data;
		
		function makeChart() {
			
				// First, get the emissions values in millions of tonnes of CO2 equivalent
				for (var i=0; i<=data.length - 1; i++) {
					data[i].totalEmissions = +data[i].totalEmissions / 1000;};
		
				// Sort the data
				data.sort(function(a,b) {return d3.descending(+a.totalEmissions, +b.totalEmissions);});
	
				// Define scale domains
				xScale.domain([0, d3.max(data, function(d) {return +d.totalEmissions;})]);
				yScale.domain([d3.max(data, function(d) {return +d.emissionsPerCapita * 1.05 ;}), 0]);

// Define axes
				var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
					.ticks(5)
					.tickFormat(fmtStandard);
		
				var yAxis = d3.svg.axis().scale(yScale).orient("left")
					.tickFormat(fmtStandard);

// Create cirlces
				var circles = svg.selectAll("circle")
					.data(data)
					.enter()
					.append("circle");
	
				// Set circle attributes
				circles.attr("cx", function(d) {return xScale(d.totalEmissions) + pad.l; })
					.attr("cy", function(d) {return yScale(d.emissionsPerCapita) + pad.t ; })
					.attr("r", 5)
					.attr("fill", "steelblue")
					.append("title")
						.text(function(d) {return "Total emissions for " + d.Country + " in 2012 are " 
						+ fmtStandard(Math.round(d.totalEmissions)) 
						+ " million tonnes CO2 equivalent, and emissions per capita are " 
						+ fmt2dp(d.emissionsPerCapita) + " thousand kg."
					;});

// Add axes
				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate (" + pad.l + "," + (h - pad.b) + ")")
					.call(xAxis);
		
				svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate (" + pad.l  + "," + pad.t + ")")
					.call(yAxis);
		
				// x axis label
				svg.append("text")
					.text("Total emissions (million tonnes CO2 equivalent)")
					.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");
	
		};
		
		// Load the greenhouse gas data
		d3.csv("greenhouseGasData2012.csv", function (error, d) {
			if (error) {console.log(error);}
			else {
				data = d;
				makeChart();
			}
		});
				
		</script>

</body>
</html>

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

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