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!



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
close