Module6 - Canberra population growth

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Data Visualization and Infographics with D3! (Module 6)</title>
<meta name="author" content="Matt Smith" />
<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
<style>
body { background-color:#FFF; font-family: Helvetica, Arial, sans-serif; }
h1 {  font-size:20px; font-weight:bold }
svg { background-color:#FFF; border-color: #CCC; border-style: solid; border-width: 1px; box-shadow: 4px 4px 1px #EEE; }
p { font-size:14px; }
.xaxis path, .xaxis line, .yaxis path, .yaxis line { fill: none; stroke: #CCC; }
text { fill: #000; font-family: Helvetica, Arial, sans-serif; }
.xaxis text, .xlabel, .yaxis text, .ylabel { font-size:12px; }
.malekey { fill: #00008C; }
.femalekey { fill: #FFBFFF; }
.totalkey { fill: #EEE; opacity: .8; }
</style>
</head>

<body>
<h1>Population growth projections for Canberra (2010 - 2059)</h1>
<p>This chart shows a projection of the male  and female population (in thousands) of Canberra from 2010 to 2059. Source: <a href="https://www.data.act.gov.au/People-and-Society/Population-Growth/8eq7-rz25">data.act.gov.au</a>, 2014.</p>
<script type="text/javascript">
	// Set width and height
	var w = 600;
	var h = 540;
	var padding = [ 30, 30, 60, 60 ];

// Set date format
	var dateFormat = d3.time.format("%Y");

// Set scales
	var xScale = d3.time.scale()
	.range([ padding[3], w - padding[1] - padding[3] ]);
	var yScale = d3.scale.linear()
	.range([ padding[0], h - padding[2] ]);
	
	// Create svg canvas
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);
	
	// Create axis
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.tickFormat(function(d) {
		return dateFormat(d);
	});
	
	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(12);
	
	// Generate svg area chart
	var TotalArea = d3.svg.area()
	.x(function(d) {
		return xScale(dateFormat.parse(d.Year));
	})
	.y0(h - padding[2])
	.y1(function(d) {
		return yScale(d.Total);
	})
	
	// Generate svg line chart
	
	var MaleLine = d3.svg.line()
	.x(function(d) {
		return xScale(dateFormat.parse(d.Year));
	})
	.y(function(d) {
		return yScale(d.MalePop);
	})
	
	var FemaleLine = d3.svg.line()
	.x(function(d) {
		return xScale(dateFormat.parse(d.Year));
	})
	.y(function(d) {
		return yScale(d.FemalePop);
	})
	
	// 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);
		});
		// Auto domain scaling
		xScale.domain([ 
		d3.min(popdata, function(d) {
			return dateFormat.parse(d.Year);
			}), 
		d3.max(popdata, function(d) {
			return dateFormat.parse(d.Year);
			}) ]);
			
		yScale.domain([ 
		d3.max(popdata, function(d) {
			return +d.Total;
			}), 0
		
		 ]);
		
		// Draw svg lines and area
		svg.data([popdata])
		.append("path")
		.attr("class", "totalarea")
		.attr("d", TotalArea)
		.attr("fill", "#EEE")
		.attr("stroke", "#EEE")
		.attr("stroke-width", 3)
		.attr("opacity", 0)	
		.transition()
		.delay(1000)
		.duration(1500)
		.attr("opacity", .8);
		
		svg.data([popdata])
		.append("path")
		.attr("d", MaleLine)
		.attr("fill", "none")
		.attr("stroke", "#00008C")
		.attr("stroke-width", 4)
		.attr("Text", "Male population")
		
		svg.data([popdata])
		.append("path")
		.attr("d", FemaleLine)
		.attr("fill", "none")
		.attr("stroke", "#FFBFFF")
		.attr("stroke-width", 4)
		
		// Load axis
		svg.append("g")
		.attr("transform", "translate(0," + (h - padding[2])
		+ ")")
		.attr("class", "xaxis")
		.call(xAxis);
		
		svg.append("g")
		.attr("transform", "translate(" + padding[3] + ",0)")
		.attr("class", "yaxis")
		.call(yAxis);
		
		// Axis labels
		svg.append("text")
		.attr("class", "xlabel")
		.attr("text-anchor", "end")
		.attr("x", 214)
		.attr("y", h - 16)
		.text("Male Population Growth");
		
		svg.append("text")
		.attr("class", "xlabel")
		.attr("text-anchor", "end")
		.attr("x", 390)
		.attr("y", h - 16)
		.text("Female Population Growth");
		
		svg.append("text")
		.attr("class", "xlabel")
		.attr("text-anchor", "end")
		.attr("x", 496)
		.attr("y", h - 16)
		.text("Total Growth");
		
		svg.append("rect")
		.attr("x", 60)
		.attr("y", h - 30)
		.attr("width", "20")
		.attr("height", "20")
		.attr("class", "malekey");
		
		svg.append("rect")
		.attr("x", 220)
		.attr("y", h - 30)
		.attr("width", "20")
		.attr("height", "20")
		.attr("class", "femalekey");
		
		svg.append("rect")
		.attr("x", 400)
		.attr("y", h - 30)
		.attr("width", "20")
		.attr("height", "20")
		.attr("class", "totalkey");		
	});
</script>
</body>
</html>

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

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