index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Average Household Income by Province and Territory - 2011</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
<style type="text/css">
body {
margin:0;
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
#container{
width: 700px;
margin-left:auto;
margin-right:auto;
margin-top:50px;
padding:30px;
background-color:white;
box-shadow: 1px 1px 3px 4px #ccc;
}
p {
font-size: 16px;
color: #4e5a64;
margin: 15px 0 50px 0;
}
h1 {
font-weight: 700;
color: #4e5a64;
font-size: 32px;
}
a:link{
text-decortion:none;
color:gray;
}
a:hover{
text-decoration: underline;
}
a:visited {
color:gray;
}
a:active{
color: skyblue;
}
svg {
background-color: white;
}
g.bar text, text {
cursor: pointer;
}
g.bar text {
font-size: 14px;
font-weight: normal;
text-anchor: end;
opacity: 0;
fill: white;
stroke: none;
}
g.bar:hover rect {
fill: skyblue;
}
g.bar:hover text {
opacity: 1;
}
.axis path,
.axis line {
fill: none;
stroke: #4e5a64;
shape-rendering; crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 12px;
fill: #4e5a64;
stroke: none;
}
.y.axis path,
.y.axis line {
opacity: 0;
}
</style>
</head>
<body>
<div id="container">
<h1>Core Housing Need in Canada - Part 1</h1>
<p>Average Household Income ($) by Province and Territory - 2011 <br>Source: <a href="//cmhc.beyond2020.com/">Canada Mortgage and Housing Corporation</a>, 2015</p>
</div>
<script type="text/javascript">
var w = 650;
var h = 450;
var padding = [ 20, 10, 30, 240 ];
var widthScale = d3.scale.linear()
.range([ 0, w - padding[1] - padding[3] ]);
var heightScale = d3.scale.ordinal()
.rangeBands([ padding[1], h/1.2 - padding[1] ], 0.1);
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom")
.ticks(7)
.tickFormat(function(d){return "$" + d; });
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left");
var svg = d3.select("#container")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("coreHousingNeed-prov-tert.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(+a.Average_Household_Income, +b.Average_Household_Income);
});
widthScale.domain([ 0, d3.max(data, function(d) {
return +d.Average_Household_Income;
}) ]);
heightScale.domain(data.map(function(d) { return d.Geography; } ));
var groups = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("class", "bar");
var rects = groups.append("rect")
.attr("x", padding[3])
.attr("y", function(d) {
return heightScale(d.Geography);
})
.attr("width", 0)
.attr("height", heightScale.rangeBand())
.attr("fill", "steelblue");
groups.append("text")
.attr("x", function(d) {
return padding[3] + widthScale(d.Average_Household_Income) - 3;
})
.attr("y", function(d) {
return heightScale(d.Geography) + 17;
})
.text(function(d) {
return "Average household income" + " " + "$" + d.Average_Household_Income;
})
rects.transition()
.delay(function(d, i) {
return i * 50;
})
.duration(1000)
.attr("width", function(d) {
return widthScale(d.Average_Household_Income);
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + padding[3] + "," + (h/1.11 - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
coreHousingNeed-prov-tert.csv
Geography,Year,Household_Count,Average_Household_Income,Average_Shelter_Cost,Average_STIR
NEWFOUNDLAND and LABRADOR,2011,201875,70936,754,18.3
PRINCE EDWARD ISLAND,2011,53620,68301,817,20.1
NOVA SCOTIA,2011,369760,69362,838,20.7
NEW BRUNSWICK,2011,298955,67122,757,19
QUEBEC,2011,3224260,68926,834,21.3
ONTARIO,2011,4600055,89873,1175,22.8
MANITOBA,2011,423200,74940,846,19.2
SASKATCHEWAN,2011,359375,81353,910,19.6
ALBERTA,2011,1285165,106241,1249,21.1
BRITISH COLUMBIA,2011,1610540,82674,1136,23.4
YUKON,2011,12950,92906,1084,19.2
NORTHWEST TERRITORIES,2011,14150,116039,1350,17.5
NUNAVUT,2011,8545,100417,852,11.1