<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Module 5</title>
<script type="text/javascript" src="//d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: #687372;
font-family: Helvetica, Arial, sans-serif;
color: #DCDCDC;
}
h1 {
font-size: 24px;
margin: 0
}
h2 {
font-size: 12px;
margin: 0
}
p {
font-size: 24px;
margin: 10px 0 0 0;
}
svg{background-color: #687372;}
circle {
fill: #9DFEFF;
opacity: 0.55;
}
circle:hover {
fill: #2BCC14;
opacity: 0.75;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering; crispEdges;
stroke: #DCDCDC ;
}
.axis text {
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
fill: #DCDCDC;
}
</style>
</head>
<body>
<p>Average annual income and average monthly shelter cost by Regional District in British Columbia, 2011</p>
<h2>Source: <a href="//www.beyond2020.com/">Stats Canada - via Beyond 2020 Browser</a></h2>
<script type="text/javascript">
var w = 750;
var h = 600;
var padding = [20, 10, 50, 50]; //top, right, bottom, left
var xScale = d3.scale.linear()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(11)
.tickFormat(function(d){
return "$" + d;
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(11)
.tickFormat(function(d){
return "$" + d;
});
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("C_H_N_data.csv", function(data) {
xScale.domain([35000, d3.max(data, function(d) {
return +d.Total_all_Average_Household_Income;
}) ]);
yScale.domain([
d3.max(data, function(d) {
return +d.Total_Average_Shelter_Cost;
}),
500
]);
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
// d.Total_Average_Shelter_Cost
// d.Total_all_Average_Household_Income
circles.attr("cx", function(d){
return xScale(d.Total_all_Average_Household_Income);
})
.attr("cy", function(d, i) {
return yScale(d.Total_Average_Shelter_Cost);
})
.attr("r", 0.5)
// .attr("fill", "#9DFEFF")
.append("title")
.text(function(d) {
return d.Geography + "'s average household income in " + d.Year + " was $" + d.Total_all_Average_Household_Income + ". Average shelter cost in the region was $" + d.Total_Average_Shelter_Cost;
});
circles.sort(function(a, b) {
return d3.ascending(+a.Total_all_Average_Household_Income, +b.Total_all_Average_Household_Income);
})
.transition()
.delay(function(d, i) {
return i * 90;
})
.duration(2000)
.attr("r", 9 )
.attr("fill", "#9DFEFF");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2] +10 ) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis);
});
</script>
</body>
</html>Geography,Year,Total_-_Regardless_of_Aboriginal_status_-_Household_Count,Total_all_Average_Household_Income,Total_Average_Shelter_Cost,Total_-_Regardless_of_Aboriginal_status_-_Average_STIR_(%),_Aboriginal_household_-_Household_Count,_Aboriginal_household_-_Average_Household_Income_($),_Aboriginal_household_-_Average_Shelter_Cost_($),_Aboriginal_household_-_Average_STIR_(%),_Non-Aboriginal_household_-_Household Count,_Non-Aboriginal_household_-_Average_Household_Income_($),_Non-Aboriginal_household_-_Average_Shelter_Cost_($),_Non-Aboriginal_household_-_Average_STIR_(%)
BRITISH COLUMBIA,2011,466650,55283,982,30.4,39035,46724,901,32.1,427615,56064,989,30.3
Alberni-Clayoquot,2011,3345,40198,757,30.6,620,32767,738,33.9,2720,41900,761,29.9
Bulkley-Nechako,2011,2795,47967,655,25.6,650,46104,670,27.5,2145,48531,651,25
Capital,2011,49215,50937,979,31.6,3550,46461,937,32.1,45665,51285,982,31.6
Cariboo,2011,4765,45468,691,27.6,1240,42173,736,30.5,3525,46626,675,26.6
Central Coast,2011,95,42985,543,21.3,40,41047,474,21.5,55,44438,599,19
Central Kootenay,2011,4595,43404,758,28.8,450,46694,822,31.3,4140,43047,751,28.5
Central Okanagan,2011,15615,52243,1066,33.2,1520,52241,1040,32,14095,52243,1069,33.3
Columbia - Shuswap,2011,3915,43380,799,30.2,475,34100,731,31.4,3435,44667,809,30.1
Comox Valley,2011,5735,44357,861,32.3,505,38567,884,35.8,5230,44918,859,31.9
Cowichan Valley,2011,5545,42312,825,31.3,770,39521,777,31.9,4770,42763,832,31.2
East Kootenay,2011,4640,53855,781,27.6,655,48887,804,31,3985,54672,777,27
Fraser - Fort George,2011,9110,45489,779,29.6,2050,39757,775,33.1,7060,47154,780,28.5
Fraser Valley,2011,22005,48406,863,30.3,2640,42951,882,33,19360,49151,860,30
Greater Vancouver,2011,270405,60135,1048,30.1,13800,51152,994,32.1,256600,60618,1051,30
Kitimat - Stikine,2011,2955,48905,695,28,1140,41892,682,30.4,1820,53290,703,26.5
Kootenay Boundary,2011,2230,44723,722,32.2,285,57263,804,28,1940,42872,710,32.8
Mount Waddington,2011,990,48033,659,24.3,260,38380,604,26,730,51445,678,23.9
Nanaimo,2011,13095,44906,898,33.6,1455,43875,917,32,11640,45035,895,33.8
North Okanagan,2011,6775,44939,867,32.3,680,40908,990,35.6,6095,45389,853,31.9
Northern Rockies,2011,490,71131,939,20.5,105,52531,917,26.2,380,76465,945,18.9
Okanagan - Similkameen,2011,7725,41637,860,33.5,630,39815,908,36.6,7100,41799,856,33.2
Peace River,2011,5955,66874,958,26,1230,55837,929,31.6,4725,69744,966,24.5
Powell River,2011,1770,40760,706,32.2,170,43111,771,42.2,1600,40510,699,31.1
Skeena - Queen Charlotte,2011,2155,48267,685,26,1135,40393,677,28.7,1025,56994,694,23.2
Squamish - Lillooet,2011,3595,59765,1170,32.4,300,57303,994,32.7,3290,59991,1187,32.4
Stikine,2011,80,79617,1070,17.6,35,116457,1758,14,55,57121,546,18.4
Strathcona,2011,3950,45729,801,31.4,715,48816,820,31,3235,45050,797,31.4
Sunshine Coast,2011,2055,53805,986,30.5,150,60034,1104,34.4,1905,53311,977,30.3
Thompson - Nicola,2011,11060,46135,833,30.3,1770,40574,860,35.1,9285,47196,827,29.4