Exploratory Data Visualization: United Nations Human Development Index

The United Nations Development Program is putting on a data visualization contest to based on its own human development data. Since I’m enrolled in a Data Visualization with D3 MOOC, I thought this dataset might be a good dataset to use for the class exercises. But until we get further into the course to learn D3, I thought it might be useful to do some exploratory data visualization analysis using Processing to evaluate various data visualizations to try to represent.

United Nations Development Program Human Development Data Visualization Competition

HDI Exploratory Data Visualization 1:Line Graphs

In this first exploration, each country is represented by a line in a line graph for 34 years of data. It’s does a decent job of showing the collective trends of all of the countries, but there’s too much clutter to make it useful for evaluating one country or comparing countries. A dropdown menu to select and highlight a particular country while fading the others would help this one out.

HDI Exploratory Data Visualization 2

The second visualization is very similar to the first, except each the HDI values for each country and each year are represented as small rectangles rather than continuous curves. A bit less cluttered, but it suffers from the same drawbacks as the first and could use menus and filters to interactive with the graph to help the user highlight points of interest.

HDI Exploratory Data Visualization 3: Heat Map

The third example is a heat map, where the rows are the countries and the columns are the years. Each year for each country is color-coded to represent the HDI value. I think it’s an improvement over the previous two, but color isn’t the best way for our brains to make comparisons so it’s got limitations as well.

HDI Exploratory Data Visualization 4: Lollipop Chart

The fourth example is a lollipop chart that takes better advantage of position as the key encoding mechanism. Each country has a horizontal line associated with it with a circle to represent the HDI for 1980 and another at the right end of the line to represent the HDI value for 2013. So, two HDI values are represented for each country allowing users to easily see what countries have progressed the most over the time period, which ones have hardly changed at all and also compare countries. I’ve also color-coded the circles and lines to the HDI values even though that’s redundant to the position, just because I thought it made for a more interesting-looking chart. Note, this example isn’t interactive. The Javascript version that Processing put out on this example had some formatting issues.