Human development index

An interactive choropleth map that displays human development indices between 1990 and 2018

The challenge

The United Nations Development Programme presents Human Development Index (HDI) data in tables and interactive charts, which allows users to explore data in different ways.

My goal was to devise an interactive visualization that could answer complex questions such as which countries had HDIs between 0.550 and 0.700 in 2000.

A solution

I implemented a visualization comprising a choropleth map, an interactive legend and a year slider. The visualization offers the following interaction possibilities:

• Hovering over a country causes a tooltip containing the HDI for the chosen year to be displayed
• Moving the slider makes the map show human development indices varied between 1990 and 2018
• Clicking and dragging on the legend selects an HDI range. Countries whose indices fall within the said HDI range will be highlighted

In addition to watching the animated GIF, you can interact with the visualization (use a larger screen for better experience) and check the code used to create it.

Implementation details

React.js and D3.js were employed to build the visualization. React renders visualization components, whereas D3 handles data and calculations.

The D3 implementation of the Equal Earth projection is employed to render the map.