DataMaps

• Downloads
• World (38KB gzip)
• World Hi-Res (141KB gzip) ^New!
• USA only (15KB gzip)
• More versions

• Documentation
• Getting started
• Custom map data
• 
  [フレーム]

• See Datamaps on
• In the USA, Who Runs the Fastest, the Farthest [...] ^New!
• Our World In Data
• Animated Choropleths with R
• The Wide World of Economic Growth
• Realtime Wikipedia Updates

• Latest How-to's and Guides
• Try it in your browser
• Creating custom map data
• Creating a plugin
• All Guides

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

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
 }
 };