Module5 - Canberra population growth

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Data Visualization and Infographics with D3! (Module 5)</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; }
.bar:hover { fill: #B20000; }
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; }
</style>
</head>

<body>
<h1>Population growth projections for Canberra (2010 - 2059)</h1>
<p>This scatterplot shows a projection of the male (x axis) and female (y axis) 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 scales
	var xScale = d3.scale.linear()
	.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");
	
	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(12);
	
	// 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 +d.MalePop / 1000;
			}), 
		d3.max(popdata, function(d) {
			return +d.MalePop / 1000;
			}) ]);
			
		yScale.domain([ 
		d3.max(popdata, function(d) {
			return +d.FemalePop / 1000;
			}),
		d3.min(popdata, function(d) {
			return +d.FemalePop / 1000;
		}) ]);
		// Set circles variable
		var circles = svg.selectAll("circle")
		.data(popdata)
		.enter()
		.append("circle");
		
		// Bind data to circles
		circles.attr("cx", 0)
		.attr("cy", function(d) {
			return yScale(d.FemalePop / 1000);	
		})
		.attr("r", 0.2)
		.attr("class", "bar")
		.attr("fill", "#99E5FF")
		.append("title")
		.text(function(d) {
			return "In " + d.Year + ", Canberra's projected population will be " + d.Total + " (" + d.MalePop + " Male and " +d.FemalePop + " Female)."
		});
		
		// On load transition - resize circle radius
		circles.sort(function (a, b) {
			return d3.ascending(+a.Year, +b.Year);
		})
		.transition()
		.delay(function(d, i) {
			return i * 40;
		})
		.duration(1600)
		// Bounce rocks !!! (j/k)
		.ease("bounce")
		.attr("r", 4)
		.attr("fill", "#007FFF")
		.attr("cx", function(d) {
			return xScale(d.MalePop / 1000);
		})
		.attr("cy", function(d) {
			return yScale(d.FemalePop / 1000);	
		})
		;
		
		// 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", w - 20)
		.attr("y", h - 20)
		.text("Male Population (Thousands)");
		
		svg.append("text")
		.attr("class", "ylabel")
		.attr("transform", "rotate(-90)")
		.attr("text-anchor", "end")
		.attr("x", -20)
		.attr("y", 20)
		.text("Female Population (Thousands)");
		
	});
</script>
</body>
</html>

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

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