Sources:
Statistics Canada - Total entries of humanitarian population by province or territory and urban area
This code adapts a choropleth map tutorial by Scott Murray and replaces using a range of colours with a tooltip similar to the one used here.
Canada.json is a GeoJSON file created using data from the Natural Earth repository of Shapefiles and Ogre, a web client to convert Shapefiles to GeoJSON.
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Humanitarian population by Canadian provinces and territories, 2012</title> | |
| <meta name="author" content="Alison Benjamin" /> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <article> | |
| <div id="tooltip" class="hidden"> | |
| <p><span id="migrants"></span></p> | |
| </div> | |
| </article> | |
| <script type="text/javascript"> | |
| //Width and height of the canvas | |
| var w = 500; | |
| var h = 500; | |
| //Define projection | |
| var projection = d3.geo.mercator() | |
| .scale([250]) | |
| .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 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("migrants_by_region.csv", function(data) { | |
| /* Load in GeoJSON data for Canada*/ | |
| d3.json("canada.json", function(json) { | |
| //loop through the CSV | |
| for (var i = 0; i < data.length; i ++){ | |
| //get the province/region name | |
| var provinceName = data[i].iso_3166_2; | |
| //get the number of migrants in that province/region | |
| var numberOfMigrants = data[i].migrants; | |
| for(var j = 0; j < json.features.length; j++){ | |
| if (json.features[j].properties.iso_3166_2 == provinceName){ | |
| //make an entry into the JSON with the value of the # of migrants | |
| json.features[j].properties.value = numberOfMigrants; | |
| //stop | |
| break; | |
| } | |
| //draw the province or region | |
| svg.selectAll("path") | |
| .data(json.features) | |
| .enter() | |
| .append("path") | |
| .attr("d", path) | |
| .style("fill", "#1d5b85") | |
| .on("mouseover",function(d,i){ | |
| d3.select(this) | |
| .classed("highlight",true) | |
| d3.select("#tooltip") | |
| .classed("hidden",false) | |
| .select("#migrants") | |
| .append("text") | |
| .classed("hidden",false) | |
| .text(function(){ | |
| return d.properties.name + ", " + d.properties.value; | |
| }) | |
| }) | |
| .on("mouseout", function(d,i){ | |
| d3.select(this) | |
| .classed("highlight",false) | |
| d3.select("#tooltip") | |
| .classed("hidden",true) | |
| d3.select("#migrants text") | |
| .remove(); | |
| }) | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> |
| region | iso_3166_2 | migrants | |
|---|---|---|---|
| Alberta | CA-AB | 1,065 | |
| British Columbia | CA-BC | 1,175 | |
| Saskatchewan | CA-SK | 71 | |
| Manitoba | CA-MB | 108 | |
| Ontario | CA-ON | 12,222 | |
| QuŽbec | CA-QC | 4,695 | |
| Newfoundland and Labrador | CA-NL | 33.75 | |
| Prince Edward Island | CA-PE | 33.75 | |
| Nova Scotia | CA-NS | 33.75 | |
| New Brunswick | CA-NB | 33.75 | |
| Yukon | CA-YT | 0.66 | |
| Northwest Territories | CA-NT | 0.66 | |
| Nunavut | CA-NU | 0.66 |
| body { | |
| font-family: Helvetica, Arial, sans-serif; | |
| } | |
| #tooltip { | |
| position: absolute; | |
| padding-left: 5px; | |
| padding-right: 5px; | |
| background: #ECF0F1; | |
| font-size: 10px; | |
| pointer-events: none; | |
| } | |
| .hidden{ | |
| display: none; | |
| } | |
| #tooltip p { | |
| margin: 0; | |
| font-family: Helvetica; | |
| font-size: 15px; | |
| padding:5px; | |
| line-height: 20px; | |
| color: #2980b9; | |
| } | |
| aside{ | |
| font-size: 12px; | |
| float: right; | |
| width: 400px; | |
| } | |
| svg{ | |
| background: #3498db; | |
| } | |
| path.highlight{ | |
| opacity:0.6!important; | |
| fill: #ECF0F1!important; | |
| } |