D3 Datamaps : Pass additional values related to data on click of country

Question

I am using mark's maps for drawing graphs. I want to alert additional values related to country and not only country name. But only geography object is available inside onClick function. How do I access other data like

'numberOfThings'

inside onClick function?

Thanks in advance.

Answer 1

To setup a click handler, you'll need to use the done callback of Datamaps. Inside the click handler, you can use the id from the geography object to reference the map.options.data object to look up the relevant data.

A working example, where only the USA has some extra data, would be the following:

map = new Datamap({
    scope: 'world',
    element: document.getElementById('container1'),
    projection: 'mercator',
    height: 500,
    fills: {
      defaultFill: '#f0af0a',
      lt50: 'rgba(0,244,244,0.9)',
      gt50: 'red'
    },

    data: {
      USA: {fillKey: 'lt50', numberOfThings: 120132 },
      RUS: {fillKey: 'lt50' },
      CAN: {fillKey: 'lt50' },
      BRA: {fillKey: 'gt50' },
      ARG: {fillKey: 'gt50'},
      COL: {fillKey: 'gt50' },
      AUS: {fillKey: 'gt50' },
      ZAF: {fillKey: 'gt50' },
      MAD: {fillKey: 'gt50' }       
    },

    done: function(map) {

      map.svg.selectAll('.datamaps-subunit').on('click', function(geo) {
        var localData = map.options.data[geo.id]
        if ( localData && localData.numberOfThings ) {
          alert(localData.numberOfThings)
        }
      })
    }
  })

Link to demo: http://jsbin.com/nigifuyeqe/1/edit?html,output