Interactive map with D3

In this problem you will be analyzing geographical data with D3. The idea is to find a dataset that has data for each country (or most countries) in the world and use that data to make a choropleth map. Data you could use are the number of inhabitants, the GDP, or the population density, which you encode as color in your map.

D3 contains an add-on called datamaps which you can get at http://datamaps.github.com. Check out its various examples of usage, including http://bl.ocks.org/markmarkoh/4127667. You will need to adapt the data format to be compatible with that expected by datamaps. This very useful mapping between country codes and country names might come handy in this assignment. For example, if you were to modify the example at http://bl.ocks.org/markmarkoh/4127667, you will need to figure out the three-letter country codes:

fills: {
	_your_class_name_: '...', // your color here
	// fill more classes
	defaultFill: '#00446A' // Rest of world
},

// Fill in countries, key is three letter country name.
// data contains fillKey and tooltip (name)
data: {
	'MEX':{ // e.g.mexico
		fillKey: '..', // refer to class name, above
		name: 'for tool tip'
	},
	...
	// add more countries here
}
...

Interactivity

Datamaps also allows you to add interactivity to the map. In the example above country names appear upon mouse-over. You should also make country names, as well as the raw values of your data, appear on mouse-over. You can choose how to show this information, either as a tool tip or a label inside or aside the country. In addition you should also implement highlighting mechanism: change the stroke of the country that is being moused-over.

Discuss your interactivity choices

At the bottom of map.html (the HTML page that contains the map you are making) briefly explain the design choices you made with regard to interactivity. What kind of mouseover effects did you enable and why? What visual queries does your map support and which ones does it not?

Submit your completed files in a folder Week4 containing map.html, map.css, and map.js. Note that you may not need map.css here unless you would like to change additional styling with regard to text, margins, etc.

Submit instructions

  1. Publish your assignment through the github pages as usual.