datamaps

Datamaps provides interactive, SVG-based geographical data visualizations. It requires D3.js and Topojson to function. You can include it via CDN, NPM, or Bower.

Prerequisites

1. Include d3.js on your page.
2. Include topojson.min.js on your page.
3. Include the Datamaps script (e.g., datamaps.world.min.js).
4. Add a container element with position: relative and defined width and height.

Installation via NPM

npm install datamaps

Then reference the file in your dist directory.

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="/datamaps.world.min.js"></script>
<div id="container" style="position: relative; width: 500px; height: 300px;"></div>
<script>
    var map = new Datamap({
        element: document.getElementById('container')
    });
</script>

A choropleth map color-codes different states or countries based on data. You can use 2-letter state codes (e.g., NY) or 3-letter country codes (e.g., SCT).

Colors are applied in this priority order: fillKey (from the data object), then fill (a literal color string), and finally defaultFill.

To draw a legend, call map.legend() after initialization.

<script>
    var map = new Datamap({
        element: document.getElementById('container'),
        fills: {
            HIGH: '#afafaf',
            LOW: '#123456',
            MEDIUM: 'blue',
            UNKNOWN: 'rgb(0,0,0)',
            defaultFill: 'green'
        },
        data: {
            IRL: {
                fillKey: 'LOW',
                numberOfThings: 2002
            },
            USA: {
                fillKey: 'MEDIUM',
                numberOfThings: 10381
            }
        }
    });

    // Draw a legend for this map
    map.legend();
</script>

The bubbles plugin renders circles on specific coordinates. Each bubble object in the array must contain at least:

• latitude
• longitude
• radius

Optional properties include fillKey for color coding and any custom data to be used in the popupTemplate.

var bombs = [{
    name: 'Joe 4',
    radius: 25,
    yield: 400,
    country: 'USSR',
    fillKey: 'RUS',
    significance: 'First fusion weapon test by the USSR',
    date: '1953-08-12',
    latitude: 50.07,
    longitude: 78.43
}];

// Draw bubbles
bombMap.bubbles(bombs, {
    popupTemplate: function (geo, data) {
            return ['<div class="hoverinfo">' +  data.name,
            '<br/>Payload: ' +  data.yield + ' kilotons',
            '<br/>Country: ' +  data.country + '',
            '<br/>Date: ' +  data.date + '',
            '</div>'].join('');
    }
});

// To erase all bubbles:
// map.bubbles([]);

The following configuration options are available when initializing new Datamap(options):

{
  scope: 'world', // 'usa' or 'world'; custom maps can specify their own
  setProjection: setProjection, // Returns a d3 path and projection functions
  projection: 'equirectangular', // e.g., "mercator"
  height: null, // Grabs height of 'element' if null
  width: null, // Grabs width of 'element' if null
  responsive: false, // If true, call resize() on resize events
  done: function() {}, // Callback when map is done drawing
  fills: {
    defaultFill: '#ABDDA4' // Maps keys to the "fillKey" of [data] or [bubbles]
  },
  dataType: 'json', // 'json' or 'csv' (CSV requires an 'id' column)
  dataUrl: null, // URL to fetch map data
  geographyConfig: {
      dataUrl: null, // URL to fetch TopoJSON
      hideAntarctica: true,
      hideHawaiiAndAlaska : false,
      borderWidth: 1,
      borderOpacity: 1,
      borderColor: '#FDFDFD',
      popupTemplate: function(geography, data) { return '...'; },
      popupOnHover: true,
      highlightOnHover: true,
      highlightFillColor: '#FC8D59',
      highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
      highlightBorderWidth: 2,
      highlightBorderOpacity: 1
  },
  bubblesConfig: {
      borderWidth: 2,
      borderOpacity: 1,
      borderColor: '#FFFFFF',
      popupOnHover: true,
      radius: null,
      popupTemplate: function(geography, data) { return '...'; },
      fillOpacity: 0.75,
      animate: true,
      highlightOnHover: true,
      highlightFillColor: '#FC8D59',
      highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
      highlightBorderWidth: 2,
      highlightBorderOpacity: 1,
      highlightFillOpacity: 0.85,
      exitDelay: 100,
      key: JSON.stringify
  },
  arcConfig: {
    strokeColor: '#DD1C77',
    strokeWidth: 1,
    arcSharpness: 1,
    animationSpeed: 600,
    popupOnHover: false,
    popupTemplate: function(geography, data) { return '...'; }
  }
}