DataMaps

We are currently using the DataMaps library for our chart: http://datamaps.github.io/

Detailed information is available on the github page: https://github.com/markmarkoh/datamaps

Key properties to know:

1. element: You need to pass in an element property. This is the element on the DOM that the map will be attached to.

2. fills: this is an object that maps from a string to a color. example: `{javascript: 'yellow', python: 'blue'}

3. geographyConfig: here we can set properties for each country, such as whether to highlight on hover, border width and border color, and importantly, the format of the hover box.

4. popupTemplate within geographyConfig: here we set a template for what we want displayed in the hover box for each country. This is a function that receives as parameters a country and the data object for that country. What is returned from this function is a string that will eventually be rendered as HTML. You can use whatever templating engine you would like to generate this string (or not templating engine at all). From the author: "geographyConfig.popupTemplate just needs to return an HTML string, so feel free to use Handlebars or Underscore templates (instead of the terrible Array.join method above)."

5. fillKey: this is a property on the data object for each country. This is the property that gets looked up in the fills object. In other words, if you have {fillKey: 'javascript'} for a country, that will be looked up in our fills object on the map, and that country will then be filled yellow.