High resolution Datamaps options

An additional distribution version is now provided for DataMaps, offering a higher resolution than the default maps. Great for full screen maps, zoomed in maps, or just maps that need the additional level of detail.

More information provided at http://datamaps.github.io/hi-res.html

v0.4.4

New in 0.4.4

updateChoropleth now accepts a second parameter (an object). Currently the only key looked for is reset, which will reset the map to it's default state. All fill colors will be set to the defaultFill, and any corresponding data associated with the geography will be removed.

Example usages:

The following will reset the entire map to the defaultFill and update CA to be filled green.

map.updateChoropleth({CA: 'green'}, {reset: true})

The following will reset the entire map to defaultFill

map.updateChoropleth(null, {reset: true})

The following will reset the entire map to defaultFill, but update the corresponding data of NY.

map.updateChoropleth({NY: {numberOfVoters: 55452}}, {reset: true})

Bug fixes

updateChoropleth accepts a fillColor property now (#240), #244 addresses bubbles not updating properly when the underlying data updates, #238 is fixed after addressing a regression in an earlier PR merge.

Values can be functions or literals, changes to `fillKey`

The v0.4.0 release of DataMaps includes 3 major updates:

1. Instead of specifying fillKey for each geography, you can now specify a color value in fillColor.

Previously, the coloring of subunits (geographies - states & countries) relied on fillKey and a corresponding fills object. While this is still supported, you can now directly specify a color under the fillColor value.

For example:

new Datamap({
  element: document.getElementById('map'),
  scope: 'usa',
  data: {
    NC: {
       fillColor: '#FA0FA0'
     },
    TX: {
        fillKey: 'home'
     }
  },
  fills: {
     home: '#FA0FA0',
     defaultFill: '#DDDDDD'
   }
})

Live Example Here

In the above example, both North Carolina and Texas will be filled with the color #FA0FA0, while all other states will be filled with #DDDDDD.

For backwards compatibility, fillKey will take priority, then fillColor, then defaultFill.

2. Values can now be functions instead of literals

Instead of passing literal values in the configuration for your map, you can now pass functions to return values dynamically.

For example:

new Datamap({
  element: document.getElementById('map'),
  scope: 'usa',
  data: {
    NC: {
       fillColor: '#FA0FA0'
     },
    NJ: {
       fillColor: function(geography, data) {
          return '#00FF00'
       }
    },
    TX: {
        fillKey: 'home',
       governor: 'Abbott'
     },
    NY: {
      governor: 'Cuomo'
   }
  },
  fills: {
     home: '#FA0FA0',
     defaultFill: function(geography, datum) {
        if ( ['FL', 'MT', 'CA', 'OH'].indexOf(geography.id) > -1 ) {
          return '#000FFF';
        }
        return '#BAFBAF';
     }
   }
})

Live Example Here

A few things to note about the above example:

1. When dealing with states and countries, the function parameters will be geography and datum. datum will be undefined if there is no corresponding object in the data object ( *in this example, there will be 3 non-undefined datums: NC, NJ, NY, and TX. However all 50 states will have a defined geography, and it contains all of the GeoJSON data pertaining to that state.
2. When defaultFill is called for NY, the datum parameter will be an object like: {governor: "Cuomo"}
3. When defaultFill is called for AK, the datum parameter will be undefined, so you'll have to rely on the fact that geography.id is AK to figure out what fill to return.
4. Each function needs to return a value or unexpected things may happen (fills may be black, for example).

This also works with the arcs and bubbles plugins.

Example:

map.bubbles([
  {centered: 'NY', fillKey: 'home', radius: 10, highlightFillColor: '#aaafff'}, // literal value
  {centered: 'KY', fillKey: 'home', highlightFillColor: function(datum) { return '#fa0fa0'; }}, //function
  {centered: 'TX', fillKey: 'bubbleEx', radius: function(datum) { return 20; }}, //function
  {centered: 'CA', fillKey: 'bubbleEx2', radius: 46},
  {centered: 'GA', fillKey: 'Visited', radius: 15, highlightFillOpacity: function() { return 0.5 }}
],
{  popupOnHover: false,
   highlightFillOpacity: function(datum) { if ( datum.fillKey === 'home' ) return 0.8; else return 0.4; }
});

Live Example Here

The above code has a few examples of mix-and-matching functions and literals. For bubbles that don't have a value set explicitly, DataMaps will fall back to functions passed in in the second parameter. Otherwise defaults will be used.

map.arc([{
  origin: {
    latitude: function(datum) { return 30 },
    longitude: -97
  },
  destination: {
    latitude: 40,
    longitude: -110
  }
}]);

This example is a bit contrived - but it's just meant to demonstrate that almost any literal value can be replaced by a function.

3. Custom settings like highlightFillColor and highlightFillBorderWidth can now be set per country/state.

new DataMap({
   element: document.getElementById('map'),
   geographyConfig: {
     highlightFillColor: '#0FA0FA' 
   },
   data: {
        TX: {
          fillKey: 'home',
          highlightFillColor: '#FFF',
          highlightBorderColor: '#222',
          governor: 'Abbott'
        }
   });

Live Example Here

In the above example, all states except for TX will have #0FA0FA set on hover, while NY will use the custom value set (#FFF).

Dynamic zooming & dragging based on mouse wheel / scroll pad

This isn't a library update, but a great how-to for a commonly asked for feature.

Example:

var map = new Datamap({
  scope: 'world',
  element: document.getElementById('container1'),
  projection: 'mercator',
  done: function(datamap) {
     datamap.svg.call(d3.behavior.zoom().on("zoom", redraw));

     function redraw() {
       datamap.svg.selectAll("g").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
     }
  }
})

Live Example Here
Live Example #2

The done method is called after the map has drawn and it provides the D3 selection for users to add custom behavior to (like add event listeners, or in this case - set up zooming and dragging).

Graticule, local topojson and other fixes

DataMaps v0.3.4

New in v0.3.4:

1. Graticule plugin. Example
2. Builtin support for orthographic projections
3. Able to load local topojson data instead of loading from ajax call #121 thanks to @ramnathv
4. width and height settings available instead of inferring values from container element #95
5. bubbles can now have custom fillOpacity #90 thanks to @rimig
6. Load map data via ajax. Example #75

Fixes:

1. IE10 issue where map would display outside of container #102
2. Label text no longer respects pointer events #126
3. French Guinea and France separated #97 thanks to @joannecheng
4. bower_components directory fixed #113 thanks to @alexanderGugel
5. IE10/11 mouseover bug fix #94

Thanks to everybody who contributed!

• DataMaps

Updating Colors after drawing, Customized Legend

New features:

• updateChoropleth now updates the fill colors after the map has been drawn.
• legend can now take custom labels

Example usage for updateChoropleth:

Demo

var map = new Datamap({
  element: document.getElementById('container'),
  fills: {
    NotSnowing: 'green',
    Snowing: '#ffffff'
  },
  data: {
    CAN: {
      fillKey: 'NotSnowing'
    }
  }
});

//window.setTimeout(function() { 

  map.updateChoropleth({
    'USA': '#0fa0fa',
    'CAN': {fillKey: 'Snowing'}
  });

//}, 1000);

The above example will draw a map with Canada filled in green, then update Canada to white and fill in USA as '#0fa0fa'.

The values passed to updateChoropleth can be strings if they are a color, otherwise objects with fillKeys.

Example usage for custom labels in legend plugin

var map = new Datamap({
  element: document.getElementById("map"),
  scope: 'world',
  projection: 'mercator',
  geographyConfig: {
    highlightOnHover: false,
    popupOnHover: true
  },
  fills: {
    you: "red",
    spouse: "green",
    together: "blue",
    separately: "yellow",
    defaultFill: "#EFEFEF",
  },
  data: world
});

map.legend({
  legendTitle: "Where Have We Been",
  defaultFillName: "Whats left",
  labels: {
     you: "Fred",
     spouse: "Wilma",
     together: "Together",
     separately: "Separately",
  },
});