Customizable SVG map visualizations for the web in a single Javascript file using D3.js
Now available in Hi-Resolution formats for large displays!
updateChoropleth
now accepts a reset option parameterdataUrl
to remote fetch JSON or CSV data
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
}
};