DataMaps Testing

by rushtonmd

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://datamaps.github.io/scripts/datamaps.usa.min.js"></script>
<h2>Datamaps Testing</h2>
<div id="map_election" class="map" style="position: relative; width: 90%; height: 400px;"></div>

JavaScript

var election = new Datamap({
  scope: 'usa',
  element: document.getElementById('map_election'),
  geographyConfig: {
    highlightBorderColor: '#bada55',
    popupTemplate: function(geography, data) {
      return '<div class="hoverinfo">' + geography.properties.name + 'Electoral Votes: ' + data.electoralVotes + ''
    },
    highlightBorderWidth: 3
  },

  fills: {
    'Republican': '#CC4731',
    'Democrat': '#306596',
    'Heavy Democrat': '#667FAF',
    'Light Democrat': '#A9C0DE',
    'Heavy Republican': '#CA5E5B',
    'Light Republican': '#EAA9A8',
    defaultFill: '#ABDDA4'
  }
});
election.labels();
election.bubbles([{
  latitude: 39.0997,
  longitude: -94.5786,
  fillKey: 'Republican',
  radius: 10,
  shipmentType: 'Corn',
  shipmentWeight: '6tons',
  date: 'May 5, 2015',
  company: 'Master Bate & Tackle'
}, {
  latitude: 43.0997,
  longitude: -91.5786,
  fillKey: 'Democrat',
  radius: 10,
  shipmentType: 'Wheat',
  shipmentWeight: '2tons',
  date: 'February 5, 2015',
  company: 'Daryls Truks'
}], {
  popupTemplate: function(geo, data) {
    return '<div class="hoverinfo">' + data.shipmentWeight + ' of ' + data.shipmentType + ' shipped on ' + data.date + ' by ' + data.company + ''
  }
});