Humanitarian population by major Canadian city, 2012

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).

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

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

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