DataMaps

Customizable SVG map visualizations for the web in a single Javascript file using D3.js

  • Need help?
  • All Guides
  • Open an issue

Changelog

v0.2.10: Allows `height`/`width` as option parameters, fixes IE mouseover issue

v0.2.7: Added dataUrl to remote fetch JSON or CSV data

v0.2.6: AMD fixes, New ISO values for Western Sahara (EHS) and South Sudan (SSD)

v0.2.5: bubbles now optionally accepts centered instead of latitude/longitude

v0.2.2: updateChoropleth to update colors after drawing, custom labels for legends


Examples

Basic:

Options: All default options.

Choropleth:

Options: Mercator projection, custom country fill color data, and updateChoropleth()

State Labels:

Options: USA projection, state labels plugin (USA map only), custom country fill color data

Bubbles:

Options: Bubble plugin with custom hoverover template, disabled map hoverover.

Arcs:

Options: USA projection, custom country fill color data, arcs plugin.

Zoom:

Options: Custom setProjection() for zooming, with bubbles

Configuration options and default settings:


var defaultOptions = {
    scope: 'world', //currently supports 'usa' and 'world', however with custom map data you can specify your own
    setProjection: setProjection, //returns a d3 path and projection functions
    projection: 'equirectangular', //style of projection to be used. try "mercator"
    height: null, //if not null, datamaps will grab the height of 'element'
    width: null, //if not null, datamaps will grab the width of 'element'
    done: function() {}, //callback when the map is done drawing
    fills: {
      defaultFill: '#ABDDA4' //the keys in this object map to the "fillKey" of [data] or [bubbles]
    },
    dataType: 'json', //for use with dataUrl, currently 'json' or 'csv'. CSV should have an `id` column
    dataUrl: null, //if not null, datamaps will attempt to fetch this based on dataType ( default: json )
    geographyConfig: {
        dataUrl: null, //if not null, datamaps will fetch the map JSON (currently only supports topojson)
        hideAntarctica: true,
        borderWidth: 1,
        borderColor: '#FDFDFD',
        popupTemplate: function(geography, data) { //this function should just return a string
          return '<div class="hoverinfo"><strong>' + geography.properties.name + '</strong></div>';
        },
        popupOnHover: true, //disable the popup while hovering
        highlightOnHover: true,
        highlightFillColor: '#FC8D59',
        highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
        highlightBorderWidth: 2
    },
    bubblesConfig: {
        borderWidth: 2,
        borderColor: '#FFFFFF',
        popupOnHover: true,
        popupTemplate: function(geography, data) {
          return '<div class="hoverinfo"><strong>' + data.name + '</strong></div>';
        },
        fillOpacity: 0.75,
        highlightOnHover: true,
        highlightFillColor: '#FC8D59',
        highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
        highlightBorderWidth: 2,
        highlightFillOpacity: 0.85
    },
    arcConfig: {
      strokeColor: '#DD1C77',
      strokeWidth: 1,
      arcSharpness: 1,
      animationSpeed: 600
    }
  };

Fork me on GitHub