DataMaps

bubbles for data bubbles

$("#map_bombs").datamap({
    scope: 'world',
    /*bubble data*/
    bubbles: [{
          name: 'Gerboise Bleue',
          radius: 20.4,
          yeild: 70,
          country: 'France',
          significance: 'First fission weapon test by France',
          date: '1960-02-13',
          fillKey: 'FRA',
          latitude: -0.325,
          longitude: 26.1840
    }, {
    name: 'Canopus',
    radius: 10.23
    /*...snipped, see source link under map */
        ],
    /*bubble config*/
    bubble_config: {
        popupTemplate: _.template([
            '<div class="hoverinfo"><stro...'
    },
    geography_config: {
        popupOnHover: false,
        highlightOnHover: false
    },

Source for this example

data for Choropleths

$('#map_election').datamap({
      scope: 'usa',
      popupTemplate: _.template('<div>...</div>'),
      fills: {
        'REP': '#CC4731',
        'DEM': '#306596',
        'HEAVY_DEM': '#667FAF',
        /*... snipped */
        defaultFill: '#EDDC4E'
      },
      data:{
        "AZ": {
            "fillKey": "REP",
            "electoralVotes": 5
        },
        "CO": {
            "fillKey": "LIGHT_DEM",
            "electoralVotes": 5
        } /* ... snipped */
})

Source for this example

World map

USA specific

$("#map_world").datamap({scope: 'world'})

$("#map_usa").datamap({scope: 'usa'})

South America

Africa

$("#southamerica").datamap({scope: 'southamerica'})

$("#africa").datamap({scope: 'africa'})

Europe

Middle East

$("#europe").datamap({scope: 'europe'})

$("#middleeast").datamap({scope: 'middleeast'})

Southeast Asia

Asia

$("#southeastasia").datamap({scope: 'southeastasia'})

$("#asia").datamap({scope: 'asia'})

Examples

Project Information

Uses D3.js
and Backbone, Underscore & Zepto
Delivered as a jQuery plugin
Optionally, if you use Backbone, also delivered as a standalone Backbone view
Available bundled with dependencies and without(for existing Backbone apps)

Available Builds

USA only w/ dependencies
USA only w/o dependencies (Backbone, _ and $ would need to be provided)
Countries only w/ dependencies
Countries only w/o dependencies
USA & Countries w/ dependencies
USA & Countries w/o dependencies

Default Options

{
      projection: 'equirectangular', // 'albersUsa'
      scope: 'world', // usa, asia, southeastAsia, middleEast, africa, southAmerica, australia

      /* geographical fills */
      geography_config: {
        borderWidth: 1,
        borderColor: '#FFFFFF',

        popupTemplate: _.template('<div class="hoverinfo"><%= geography.properties.name %></div>'),
        popupOnHover: true,

        highlightOnHover: true,
        highlightBorderColor: '#FA0FA0',
        highlightBorderWidth: 2
      },

      /* bubbles points */
      bubble_config: {
        borderWidth: 2,
        borderColor: '#FFFFFF',
        popupOnHover: true,
        popupTemplate: _.template(''),
        fillOpacity: 0.75,
        animate: true,
        highlightOnHover: true,
        highlightBorderColor: '#667FAF',
        highlightFillColor: '#667FAF',
        highlightBorderWidth: 2,
        highlightFillOpacity: 0.85
      },

      /* fill settings */
      data: {},
      bubbles: [],
      fills: {
        defaultFill: '#BADA55'
      }
}