DataMaps

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

Now available in Hi-Resolution formats for large displays!


  • Need help?
  • All Guides
  • Open an issue
  • Join the chat at https://gitter.im/markmarkoh/datamaps

Changelog

v0.5.0: High resolution maps now available

v0.4.4: updateChoropleth now accepts a reset option parameter

v0.4.0: Allows functions instead of literal values, many bug fixes

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


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.

Projections & Graticules:

Options: Orthographic projection, graticule plugin, custom projectionConfig for centering, greatArc for arcs

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'
    responsive: false, //if true, call `resize()` on the map object when it should adjust it's size
    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,
        borderOpacity: 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,
        highlightBorderOpacity: 1
    },
    bubblesConfig: {
        borderWidth: 2,
        borderOpacity: 1,
        borderColor: '#FFFFFF',
        popupOnHover: true,
        radius: null,
        popupTemplate: function(geography, data) {
          return '<div class="hoverinfo"><strong>' + data.name + '</strong></div>';
        },
        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
    }
  };

Fork me on GitHub