Module3 - Canberra population growth

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Data Visualization and Infographics with D3! (Module 3)</title>
<meta name="author" content="Matt Smith" />
<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
<style>
body { background-color:#EEE; }
h1 { font-family: Arial, sans-serif ; font-size:20px; font-weight:bold }
svg { background-color:#FFF; border-color: #CCC; border-style: solid; border-width: 1px; box-shadow: 4px 4px 2px #888888; padding: 2px 0px 0px 2px; }
.bar { fill: #72EF90; }
text, p { font-family: Arial, sans-serif; font-size:12px; fill: #000; font-weight:bold }
</style>
</head>

<body>
<h1>Population growth projections for Canberra (2010 - 2059)</h1>
<p>This horizontal bar graph shows a projection of the total population of Canberra. The projection charts an increase of approximately one hundred and seventy thousand people over the next fourty four years.</p>
<script type="text/javascript">
	// Create svg canvas
	var svg = d3.select("body")
	.append("svg")
	.attr("width", 640)
	.attr("height", 1000);
	
	// Load external data file
	d3.csv("Population_Growth_Canberra.csv", function(popdata){
		// Sort data by Year
		popdata.sort(function(a, b){
			return d3.ascending(a.Year, b.Year);
		});
		// Set rects variable
		var rects = svg.selectAll("rects")
		.data(popdata)
		.enter()
		.append("rect");
		
		// Bind data to rectangles
		rects.attr("x", 0)
		.attr("y", function(d, i) {
			return i * 20;	
		})
		.attr("width", function(d) {
			return d.Total / 1000;
		})
		.attr("height", 18)
		.attr("class", "bar")
		.append("title")
		.text(function(d) {
			return "In the year " + d.Year + ", Canberra's total projected population will be " + d.Total + "."
		});
		
		//Set Labels
		var labels = svg.selectAll("text")
		.data(popdata)
		.enter()
		.append("text")
		.text (function(d) {
			return d.Year + ": " + d.Total;
		});
		
		labels.attr("x", 10)
		.attr("y", function (d, i) {
			return (i * 20) + 14;
		});	
	});
</script>
</body>
</html>

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

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