D3 Examples - Humanitarian population by major Canadian city, 2012

xxxxxxxxxx
 
<!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>
    