D3 Examples - Immigration Map

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { 
      margin:0;
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0; }
    #label { font-family: Avenir; font-weight:500; font-size:14pt;}
    .hoverinfo {
      Font-family: avenir;
      font-size: 12pt;
      font-weight: normal;
        background-color: #000000}
  </style>
</head>
​
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.13.0/d3-legend.min.js"></script>
<script src="https://datamaps.github.io/scripts/datamaps.all.js"></script>
<div id="canada" style="position: relative; width: 750px; height: 550px; font-family:Arial; font-size:10pt;"></div>
  <div id="label">Percentage of provincial population that immigrated between 2011 and 2016</div>
<script>
var can_map = new Datamap({
            element: document.getElementById('canada'),
            scope: 'canada',
            geographyConfig: {
                popupOnHover: true,
                highlightOnHover: true,
                highlightBorderColor: 'rgba(55,59,87,1)',
                highlightBorderWidth: 1,
                highlightFillColor: '#FFFFFF',
                borderColor: '#FFFFFF',
                borderWidth: 1,
                dataUrl: 'https://rawgit.com/Anujarya300/bubble_maps/master/data/geography-data/canada.topo.json',
                popupTemplate: function (geography, data) {
                    return '<div class="hoverinfo"><b>' + data.region +                                         '</b><br>' + data.streamers + '% immigrated between 2011 and 2016</div>';
            },
                //dataJson: topoJsonData
            },
            fills: {
                '01': '#eeee99',
                '12': '#d9f0a3',
                '23': '#addd8e',
                '34': '#78c679',
                '45': '#31a354',
                '56': '#006837',
                defaultFill: '#FFFFFF'
            },
            data: {
                'BC': { fillKey: '34',
                        streamers: '3.7',
                        region: 'British Columbia'},
                'AB': { fillKey: '56',
                      streamers: '5.1',
                        region: 'Alberta'},
                'SK': { fillKey: '45',
                      streamers: '4.4',
                        region: 'Saskatchewan'},
                'MB': { fillKey: '45',
                      streamers: '4.9',
                        region: 'Manitoba'},
                'ON': { fillKey: '34',
                      streamers: '3.5',
                        region: 'Ontario'},
                'QC': { fillKey: '23',
                      streamers: '2.6',
                        region: 'Québec'},
                'NB': { fillKey: '12',
                      streamers: '1.2',
                        region: 'New Brunswick'},
                'NS': { fillKey: '12',
                      streamers: '1.3',
                        region: 'Nova Scotia'},
                'PE': { fillKey: '23',
                      streamers: '2.4',
                        region: 'Prince Edward Island'},
                'NF': { fillKey: '01',
                      streamers: '0.7',
                        region: 'Newfoundland and Labrador'}
            },
            setProjection: function (element) {
                  var projection = d3.geo.conicConformal()
                .rotate([98, 0])
                .center([-20, 69.1304]) // always in [East Latitude, North Longitude]
                .scale(750)
                .translate([element.offsetWidth / 3, element.offsetHeight / 3]);
                var path = d3.geo.path().projection(projection);
                return { path: path, projection: projection };
            }
        });
  
var ordinal = d3.scale.ordinal()
  .domain(["<1.0%", "1-2%", "2-3%","3-4%","4-5%","5%+"])
  .range(["#eeee99", "#d9f0a3", "#addd8e", "#78c679", "#31a354", "#006837"]);
var svg = d3.select("svg");
svg.append("g")
  .attr("class", "legendOrdinal")
  .attr("transform", "translate(200,475)");
var legendOrdinal = d3.legend.color()
  //d3 symbol creates a path-string, for example
  //"M0,-8.059274488676564L9.306048591020996,
  //8.059274488676564 -9.306048591020996,8.059274488676564Z"
  .shape('rect')
    .shapeWidth(30)
  .shapePadding(10)
  .scale(ordinal)
  .orient('horizontal');
svg.select(".legendOrdinal")
  .call(legendOrdinal);
</script>
</body>
    