Recently the World Bank made its data catalog open and asked developers to try and make applications that visualized it. 214 countries, 3000+ data points across 16 categories going back 50 years in some cases.
I had the luck of being in the middle of a residency at Fabrica at the time and went about trying to produce something that could be used to compare all the data in the catalog.
In this video you can see changes made to the Orbital Comparison chart to make it more flexible in order to handle this data set. It became clear that to make the chart less daunting to new viewers there needed to be a way to allow them to view it in a form they were comfortable with, allow them to become familiar with it in that state and then give them the option to add more data when they thought they needed to. In this way the chart could serve simple or complex searches for people new to data visualizations or people used to seeing data in new ways.
This also served as my submission to the competition, as time became a factor and I was not able to finish all the aspects I had designed. Managing the amount of data, formatting so that it was usable and developing a GUI to make navigating it proved to be more challenging than I expected, but having gone through that I have learned a lot about time management, coding and working on such a large project.
There were two other charts I developed to handle issues in the World Bank data.
Bull’s Eye Chart
One of the first issues I found with the data was the consistency of what data was available for which country when. At its core this is a simple question – For a given year and country is the data I am interested in actually in the data set? You can represent this simply enough with a circle that is either filled in or not. So to design a tool to help people using my application I started from there and expanded on it to make it useful.
Here is the chart at a very simple level, 1 country and one topic. In this chart the outer most ring represents the oldest year in the current selection and the inner most ring the newest year in the period (another chart was used to select the time period as it affected several of the other charts and menus). On the right you can see a more complicated version of a 1 x 1 version of this chart, showing 5 years at a time, each ring having a border to ensure a series of years without data didn’t become confused with a single year.
But the application allowed for 8 countries and 8 topics to be compared at once.
Which creates a chart with a pop art aesthetic, especially using a simple mock as in this example, for better or worse. Again, to allow people to learn the chart more easily, the number of countries and topics being displayed at once could be changed to scale to whatever the user needed or was comfortable with. In this way it became easier to be able to find a set of countries that had data for the topic you were interested in or vice versa in order to make a complex comparison with the data.
The next chart I needed was one to handle data over time. I needed a chart that could fit a lot of information into a small space because of the rest of the information that would need to be displayed, so I decided to try to make another chart based around a circle. Creating distinct, static sections of the circle to display data allows the user to become familiar with reading one section, become familiar with it and not having to reinterpret the display as they would if the sections of the circle were based on the number of data points. Again years are ‘stacked’, with the oldest year on the outside and newest in the center.
The function of this chart is to be able to show in each section a single data point for one country over five to ten years, be able to display averages over those numbers as a point of reference and to build up to being able to make more complicated over time comparisons. Eight sections allowed for a good amount of data to be shown without becoming anymore complicated that it admittedly already is. This complexity does allow for some valuable comparison possibilities: One piece of data across eight countries over ten years, eight data points for one country, four data points for 2 countries, etc. Missing data points would appear as full black arches to avoid any confusion between a very small value and no data.
On the left is how the chart was designed to appear in the project. Starting from the bottom, a toggle to show/hide some averages and quick access to the data availability chart. Above that is a read out area, displaying the information listed based on mouse position. “Actual Number” would be the value of the last selected section of the graph.
The chart itself is percentage based, 100% being the highest value for all countries across the time period, but 0 being zero. The angle of the arch represents the data value, which can be tricky to interpret, especially slight differences. To ease that, when the user is hovering their mouse of the chart a line is drawn from the center to their mouse with a read out of the value that line represents and supplying an easier way to be sure of the comparison of two angles in the same section.
On the right is a larger example of the chart. Here you can see that the layout of two sections, assuming they are the same data point, create white space that shows the difference between the two. In the system, each of the sixteen different data topics were represented by a distinct color, so this example is eight data points for one country.
The example on the right here represents 4 data points for 2 countries, arranged so that the same data point graphs are adjacent. Another menu, not shown, would handle arranging what selected data goes where on the chart in a drag and drop interface with some automatic functions to make use easy, but customizable. On the right is a chart of 8 different country graphs for a single data point as well as an alternative layout that loses the white space comparison in order to keep the growth of all sections from 0 to 100 going the same direction. This has its advantages and disadvantages, but I am generally inclined to allow users to customize a chart as much as possible to help them understand it.
Just so you can see it, this is the final design of the project, with every possible menu open at once.
It included straightforward menus for countries, topics, time and ranks. On the bottom is a slit eye view of the Orbital comparison chart, this could be swapped with the map currently underneath everything. I hope to get around to putting it all together and working out the kinks in those charts above soon.