Human Development Index visualisation

By Aaron Schiff 08/04/2015

The United Nations Development Programme’s Human Development Index reflects health, education, and income levels for most countries of the world over time. As part of the Cartagena Data Festival, the UN is running a competition for visualisations of the HDI data. I decided to put together an entry, which you can play with here.


The HDI dataset is quite detailed — for each country in each year you get the overall index, plus sub-indices for the health, education, and income measures. Rather than creating a comprehensive visualisation of this data I decided to only try to present the main patterns and trends in the overall HDI. I started with a simple line chart for each country, but it was kind of boring given that the HDI for almost all countries have upwards trends. I experimented with using population-sized circles for each country in each year, but given the number of countries it was too messy. Eventually I landed on this dot-based chart, where the dots are derived from the country-level data and there is a fixed number of people per dot. This number is calculated when you load the chart based on your screen’s size and resolution, so if your screen has more pixels there will be fewer people per dot.

I use random rounding of populations so that small countries are still represented. For example, if the scale is 10 million people per dot, ordinary rounding would round all countries with populations smaller than 5 million down to zero dots. Instead, for a country with 4 million people, random rounding means there’s a 40% chance of drawing a dot for that country in any year. This isn’t perfect — it means that small countries show up in some years but not others — but it does at least allow them to be partially represented.

I also jittered the dots slightly in both horizontal and vertical directions. I think this makes for a more attractive display, but it does mean that the chart no longer exactly represents the data. The jittering is done in your browser before the chart appears, so there will be some subtle differences if you reload it, but the overall patterns and trends will remain.

The colours are by Wes Anderson 🙂

Given the random elements, the chart is more of an ‘interpretation’ of the HDI data rather than a precise visualisation. An interesting part of this exercise for me was thinking about exactly what I wanted the chart to show and how precise (or not) it needed to be to achieve my objectives.

If you have any comments, find me on Twitter.