MapExperiment

forked from anonymous's block: MapExperiment

<!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 + '% stream</div>';
            },
                //dataJson: topoJsonData
            },
            fills: {
                'MAJOR': 'rgba(55,59,87,1)',
                'MEDIUM': '#0fa0fa',
                'MINOR': 'rgba(74,79,116,1)',
                defaultFill: '#dddddd'
            },
            data: {
                'BC': { fillKey: 'MAJOR',
                      	streamers: '44',
                      	region: 'British Columbia'},
                'AB': { fillKey: 'MINOR',
                      streamers: '40',
                      	region: 'Prairies'},
                'SK': { fillKey: 'MINOR',
                      streamers: '40',
                      	region: 'Prairies'},
                'MB': { fillKey: 'MINOR',
                      streamers: '40',
                      	region: 'Prairies'},
                'ON': { fillKey: 'MINOR',
                      streamers: '39',
                      	region: 'Ontario'},
                'QC': { fillKey: 'MAJOR',
                      streamers: '44',
                      	region: 'Québec'},
                'NB': { fillKey: 'MINOR',
                      streamers: '39',
                      	region: 'Atlantic'},
                'NS': { fillKey: 'MINOR',
                      streamers: '39',
                      	region: 'Atlantic'},
                'PE': { fillKey: 'MINOR',
                      streamers: '39',
                      	region: 'Atlantic'},
                'NF': { fillKey: 'MINOR',
                      streamers: '39',
                      	region: 'Atlantic'}
            },
            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>

Modified http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js to a secure url

Modified http://datamaps.github.io/scripts/datamaps.all.js to a secure url

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

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.13.0/d3-legend.min.js

https://datamaps.github.io/scripts/datamaps.all.js