Updated bar chart with axis and scales

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

<h1> Greenhouse gas emissions in 2012 </h1>
		<p> In millions of tonnes of CO2 equivalent. Source: <a href = "https://stats.oecd.org/viewhtml.aspx?datasetcode=AIR_GHG&lang=en"> OECD </a> </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 : 20, l : 100}

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

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

// Add the SVG element
		var svg = d3.select("body")
			.append("svg")
			.attr("width", w)
			.attr("height", h);
		
		// Load the greenhouse gas data
		d3.csv("greenhouseGasData2012.csv", function(data) {
			
			// 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(data.map(function(d) {return d.Country;}));
		
			// Define axes
			var xAxis = d3.svg.axis().scale(xScale).orient("top")
				.ticks(5)
				.tickFormat(fmtStandard);
				
			var yAxis = d3.svg.axis()
				.scale(yScale)
				.orient("left");
		
			// Create rectangles
			var rects = svg.selectAll("rect")
				.data(data)
				.enter()
				.append("rect");
			
			// Set rectangle attributes
			rects.attr("x", pad.l)
				.attr("y", function(d, i) {return yScale(d.Country);})
				.attr("width", function(d) {return xScale(d.totalEmissions);})
				.attr("height", yScale.rangeBand())
				.attr("fill", "steelblue")
				.append("title")
					.text(function(d) {return "Total emissions for " + d.Country + " in 2012 are " 
					+ fmtStandard(Math.round(d.totalEmissions, 0)) + " million tonnes CO2 equivalent.";});

// Add axes
				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate (" + pad.l + "," + (pad.t*0.90) + ")")
					.call(xAxis);
					
				svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate (" + (pad.l-1)  + ",0)")
					.call(yAxis);

});
				
		</script>

</body>
</html>

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

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