D3 Examples - Census Urban

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: Arial; font-weight:bold; font-size:12pt;}
    #hoverinfo {
      font-size: 12pt;
      font-weight: bold;
        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">Streaming Usage by Region (A18+)</div>
  
  <div id="demo"><a href="ChartExperiment.html">Chart</a></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 + '% urban</div>';
            },
                //dataJson: topoJsonData
            },
            fills: {
                '80': '#253494',
                '6079': '#2c7fb8',
                '4059': '#41b6c4',
                '2039': '#a1dab4',
                '20':   '#ffffcc',
                defaultFill: '#dddddd'
            },
            data: {
                'BC': { fillKey: '6079',
                        streamers: '69.0',
                        region: 'British Columbia'},
                'AB': { fillKey: '6079',
                      streamers: '69.6',
                        region: 'Alberta'},
                'SK': { fillKey: '4059',
                      streamers: '48.5',
                        region: 'Saskatchewan'},
                'MB': { fillKey: '6079',
                      streamers: '60.9',
                        region: 'Manitoba'},
                'ON': { fillKey: '80',
                      streamers: '81.5',
                        region: 'Ontario'},
                'QC': { fillKey: '6079',
                      streamers: '70.6',
                        region: 'Québec'},
                'NB': { fillKey: '2039',
                      streamers: '36.3',
                        region: 'New Brunswick'},
                'NS': { fillKey: '4059',
                      streamers: '43.7',
                        region: 'Nova Scotia'},
                'PE': { fillKey: '20',
                      streamers: '0',
                        region: 'Prince Edward Island'},
                'NF': { fillKey: '2039',
                      streamers: '39.6',
                        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(["Less than or equal to 41%", "Greater than 41%"])
  .range([ "rgba(74,79,116,1)", "rgba(55,59,87,1)"]);
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("path", d3.svg.symbol().type("square").size(100)())
  .shapePadding(10)
  .scale(ordinal);
svg.select(".legendOrdinal")
  .call(legendOrdinal);
</script>
</body>
    