Humanitarian population by Canadian region, 2012

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="https://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"
			 * https://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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js