radiocontrolled/README.md

## README.md

      
    Raw
  

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

  
## canada.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              canada.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## humanitarian-migrants.csv

          
            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

## index.html
<!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>

## style.css
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;
}
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
	<!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([w1.3,h1.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>
	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;
	}