Skip to content

Instantly share code, notes, and snippets.

@mattsmithGitHub

mattsmithGitHub/Population_Growth_Canberra.csv

Created April 17, 2015 04:32
Show Gist options
  • Save mattsmithGitHub/270a867fa33e883b31cb to your computer and use it in GitHub Desktop.
Save mattsmithGitHub/270a867fa33e883b31cb to your computer and use it in GitHub Desktop.
Download ZIP
Module5 - Canberra population growth
Raw
index.html
<!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="http://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>
Raw
Population_Growth_Canberra.csv
Year MalePop FemalePop Total 0-14 15-64 65Plus Median GrowthPA GrowthPercent
2010 178055 179903 357958 18.30% 71.30% 10.40% 33.8 5769 1.60%
2011 181133 182631 363764 18.30% 71.00% 10.70% 33.9 5806 1.60%
2012 183978 185112 369090 18.30% 70.50% 11.20% 34 5326 1.50%
2013 186825 187610 374435 18.30% 70.00% 11.60% 34.1 5345 1.40%
2014 189689 190102 379791 18.40% 69.60% 12.00% 34.2 5356 1.40%
2015 192558 192603 385161 18.50% 69.20% 12.40% 34.4 5370 1.40%
2016 195426 195096 390522 18.60% 68.70% 12.70% 34.5 5361 1.40%
2017 198032 197338 395370 18.70% 68.20% 13.10% 34.7 4848 1.20%
2018 200621 199559 400180 18.80% 67.70% 13.40% 35 4810 1.20%
2019 203191 201767 404958 18.90% 67.40% 13.80% 35.2 4778 1.20%
2020 205739 203950 409689 18.90% 67.00% 14.00% 35.4 4731 1.20%
2021 208264 206103 414367 18.90% 66.80% 14.30% 35.7 4678 1.10%
2022 210757 208231 418988 18.90% 66.50% 14.60% 35.9 4621 1.10%
2023 213218 210323 423541 18.80% 66.20% 14.90% 36.1 4553 1.10%
2024 215636 212378 428014 18.80% 66.00% 15.20% 36.3 4473 1.10%
2025 218021 214394 432415 18.70% 65.80% 15.50% 36.6 4401 1.00%
2026 220370 216378 436748 18.60% 65.70% 15.80% 36.8 4333 1.00%
2027 222681 218321 441002 18.40% 65.50% 16.10% 37 4254 1.00%
2028 224961 220231 445192 18.30% 65.40% 16.30% 37.2 4190 1.00%
2029 227203 222101 449304 18.10% 65.30% 16.50% 37.4 4112 0.90%
2030 229410 223933 453343 18.00% 65.30% 16.70% 37.5 4039 0.90%
2031 231577 225723 457300 17.80% 65.30% 16.90% 37.6 3957 0.90%
2032 233717 227481 461198 17.70% 65.30% 17.00% 37.8 3898 0.90%
2033 235828 229199 465027 17.50% 65.30% 17.20% 37.9 3829 0.80%
2034 237922 230888 468810 17.40% 65.30% 17.30% 38 3783 0.80%
2035 239993 232549 472542 17.20% 65.30% 17.50% 38.1 3732 0.80%
2036 242050 234188 476238 17.10% 65.10% 17.80% 38.2 3696 0.80%
2037 244093 235806 479899 17.00% 65.00% 18.00% 38.3 3661 0.80%
2038 246138 237404 483542 16.90% 65.00% 18.10% 38.4 3643 0.80%
2039 248176 238985 487161 16.80% 64.90% 18.30% 38.4 3619 0.70%
2040 250220 240559 490779 16.80% 64.80% 18.40% 38.5 3618 0.70%
2041 252263 242126 494389 16.70% 64.80% 18.50% 38.5 3610 0.70%
2042 254309 243686 497995 16.70% 64.70% 18.60% 38.5 3606 0.70%
2043 256354 245241 501595 16.70% 64.60% 18.70% 38.5 3600 0.70%
2044 258405 246795 505200 16.70% 64.40% 18.90% 38.5 3605 0.70%
2045 260458 248344 508802 16.70% 64.30% 19.00% 38.6 3602 0.70%
2046 262510 249889 512399 16.70% 64.10% 19.30% 38.7 3597 0.70%
2047 264556 251433 515989 16.70% 63.80% 19.50% 38.7 3590 0.70%
2048 266597 252957 519554 16.70% 63.50% 19.80% 38.8 3565 0.70%
2049 268641 254491 523132 16.80% 63.20% 20.00% 38.8 3578 0.70%
2050 270678 256028 526706 16.80% 62.90% 20.30% 38.9 3574 0.70%
2051 272700 257555 530255 16.80% 62.70% 20.50% 39 3549 0.70%
2052 274715 259072 533787 16.80% 62.40% 20.80% 39.1 3532 0.70%
2053 276712 260580 537292 16.80% 62.20% 21.00% 39.2 3505 0.70%
2054 278687 262082 540769 16.80% 62.00% 21.20% 39.3 3477 0.60%
2055 280647 263575 544222 16.80% 61.80% 21.40% 39.5 3453 0.60%
2056 282583 265057 547640 16.80% 61.70% 21.60% 39.6 3418 0.60%
2057 284472 266510 550982 16.70% 61.60% 21.70% 39.7 3342 0.60%
2058 286311 267933 554244 16.70% 61.50% 21.80% 39.8 3262 0.60%
2059 288104 269339 557443 16.60% 61.50% 21.90% 39.9 3199 0.60%
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment