Skip to content

Instantly share code, notes, and snippets.

@majomo

majomo/C_H_N_data.csv

Last active September 24, 2015 00:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save majomo/8351836fbd1a2b6381e1 to your computer and use it in GitHub Desktop.
Save majomo/8351836fbd1a2b6381e1 to your computer and use it in GitHub Desktop.
Download ZIP
Scatterplot
Raw
C_H_N_data.csv
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
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Module 5</title>
<script type="text/javascript" src="http://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="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment