An interactive choropleth map that displays human development indices between 1990 and 2018
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.
I implemented a visualization comprising a choropleth map, an interactive legend and a year slider. The visualization offers the following interaction possibilities:
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.
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.