Source: Statistics Canada
GEOJson data by Johan Sundström
Totals for major cities (shown) is 6,979. Other Quebec, Other Ontario, Manitoba, Saskatchewan, Other Alberta, Other British Columbia, Territories, Province or territory not stated not shown (21,302).
Last active
March 1, 2023 14:18
-
-
Save radiocontrolled/7032353 to your computer and use it in GitHub Desktop.
Humanitarian population by major Canadian city, 2012
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
City | Migrants | lat | lon | |
---|---|---|---|---|
Montreal | 1,675 | 45.512303 | -73.554431 | |
Toronto | 4,449 | 43.64856 | -79.385324 | |
Calgary | 283 | 51.04522 | -114.063014 | |
Edmonton | 178 | 53.5333 | -113.5 | |
Vancouver | 394 | 49.26044 | -123.114034 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8" /> | |
<title>Humanitarian population by major Canadian city, 2012</title> | |
<meta name="description" content="" /> | |
<meta name="author" content="Alison Benjamin" /> | |
<meta name="viewport" content="width=device-width; initial-scale=1.0" /> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<link rel="stylesheet" href="style.css"> | |
</head> | |
<body> | |
<article></article> | |
<div id="tooltip" class="hidden"> | |
<p><span id="value"></span></p> | |
</div> | |
<script type="text/javascript"> | |
//Width and height of the canvas | |
var w = 400; | |
var h = 400; | |
//Define map projection - guide to D3 projections is here: https://github.com/mbostock/d3/wiki/Geo-Projections | |
var projection = d3.geo.mercator() | |
.scale([200]) | |
.translate([w*1.3,h*1.3]) | |
.precision(.1); | |
//Define path generator | |
var path = d3.geo.path() | |
.projection(projection); | |
//Create SVG element | |
var svg = d3.select("article") | |
.append("svg") | |
.attr("width", w) | |
.attr("height", h); | |
/* Load in GeoJSON data for Canada | |
* Source: Johan Sundström | |
* https://github.com/johan/world.geo.json/blob/master/countries/CAN.geo.json | |
*/ | |
d3.json("canada.json", function(json) { | |
//Bind data and create one path per GeoJSON feature | |
svg.selectAll("path") | |
.data(json.features) | |
.enter() | |
.append("path") | |
.attr("d", path) | |
.style("fill", "#1d5b85"); | |
}); | |
/* Load CSV data. | |
* Source: Citizenship and Immigration Canada. | |
* "Canada - Total entries of humanitarian population by province or territory and urban area" | |
* http://data.gc.ca/data/en/dataset/86ff3e0e-bef4-4257-88ea-7fe5fdba3f5c | |
* humanitarian-migrants.csv 2012 data figures for major cities. | |
*/ | |
d3.csv("humanitarian-migrants.csv", function(data) { | |
//Put a circle on the map for every city | |
svg.selectAll("circle") | |
.data(data) | |
.enter() | |
.append("circle") | |
.attr("cx", function(d) { | |
return projection([d.lon, d.lat])[0]; | |
}) | |
.attr("cy", function(d) { | |
return projection([d.lon, d.lat])[1]; | |
}) | |
.attr("r", 3.5) | |
.style("fill", "#ffffff") | |
.style("opacity", 0.6) | |
.on("mouseover",function(d){ | |
// on mouseover, position and style label with the number of Migrants | |
// some guidance on adding labels is here: http://chimera.labs.oreilly.com/books/1230000000345/ch10.html#_html_div_tooltips | |
d3.select("#tooltip") | |
.style("left", projection([d.lon, d.lat])[0] + 15 + "px") | |
.style("top", projection([d.lon, d.lat])[1] + "px") | |
.style("fill", "#ffffff") | |
.select("#value") | |
.text(function(){ | |
return d.City + ", " + d.Migrants; | |
}) | |
//show the label | |
d3.select("#tooltip").classed("hidden", false); | |
}) | |
.on("mouseout", function(){ | |
//on mouseout, hide the label | |
d3.select("#tooltip").classed("hidden", true); | |
}) | |
}); | |
</script> | |
</body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
font-family: Helvetica, Arial, sans-serif; | |
} | |
svg{ | |
background: #3498db; | |
} | |
#tooltip { | |
position: absolute; | |
padding-left: 5px; | |
padding-right: 5px; | |
background: #ECF0F1; | |
font-size: 10px; | |
pointer-events: none; | |
-webkit-border-radius: 2px; | |
-moz-border-radius: 2px; | |
border-radius: 2px; | |
} | |
.hidden{ | |
display: none; | |
} | |
#tooltip p { | |
margin: 0; | |
font-family: Helvetica; | |
font-size: 12px; | |
padding-top: 1px; | |
line-height: 20px; | |
color: #2980b9; | |
} | |
aside{ | |
font-size: 12px; | |
float: right; | |
width: 400px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment