Visualization of ND-GAIN data

Our program uses D3.js (http://d3js.org/) to visualize the data downloaded from the ND-GAIN website (http://gain.org/). D3.js supports so-called modern browsers, which generally means everything except IE8 and below. This program has been successfully tested on Chrome, Firefox and Safari browsers. 

=== Data preprocessing ===

Due to the fact that some countries' data are (partially) missing, for simplicity, we linearly interpolate the data for the subsequent visualization. A total of 180 countries are kept, which is the same as the number of countries visualized at the ND-GAIN website.

=== Circle's coordinates, radius, color and trajectory ===

In the visualization, each circle represents a country, the x- and y-coordinates of the circle are readiness and vulnerability values, respectively. We also draw the trajectory of readiness vs. vulnerability over the 19 years (1995-2013).

The radius of the circle at a year is proportional to the country's certain index (capacity, GDP/capita, population, etc.) at that year. A minimal radius is set so that all countries would be clearly visible for interaction. The categorization of the six regions follows the example shown at Gapminder (http://www.gapminder.org/).

When the program first runs, we randomly select each country in an animated fashion for highlighting its information. 

=== User interaction ===

1. Time slider: users can drag the time slider to see the vulnerability vs. readiness results over the years. The year label is displayed at the lower-left corner of the drawing.

2. Mouse over: when users mouse over a circle, the country's name is displayed at the upper-left corner of the drawing.

3. Mouse click: when users click a circle, the circle is highlighted, the trajectory is shown, and the country's name is displayed at the upper-left corner of the drawing. Other circles will fade into the background with less saturated colors. Users can click multiple circles of interest one by one for comparison. Users click the same circle again to deselect a country.

4. Country checkbox option: users can select the countries by name. Users can select multiple countries, deselect a country one by one, or deselect all countries. The country checkbox selection result is synchronized with the mouse click selection result and vice versa.

5. Region select option: users can select a group of countries based on geographic region.

6. Trend select option: users can select a group of countries based on trajectory similarity. We compute the trajectory similarity for every pair of countries based on their Cosine similarity and Procrustes distance (after Procrustes superimposition with scale and translation). Then we use the affinity propagation algorithm  (https://en.wikipedia.org/wiki/Affinity_propagation) for clustering. The best result yields nine clusters.

7. Radius select option: users can map the radii of the circle to different indices (more indices will be added).