When working on an interactive dataviz, think of it like this: the data points are actors and the designer is the scenographer. Your job is to give the actors different backdrops and force the audience to look at them from different angles. But it’s important to keep in mind your actors won’t always follow the script; they sometimes have their own ideas. (And that’s exactly as it should be.)
We recently launched a project that made me think of this scenography analogy, an interactive dataviz for UNESCO Institute for Statistics (UIS) that explored research and development spending globally. In it, each country had one visual representation which we kept as they journeyed from chart to chart.
I wanted to talk a bit about the tricky transition elements, UX, what didn’t work straightaway as we were choreographing the movements of each country through the viz, and how we found some solutions after some thinking and tinkering. This post is going to get into some data/design/dev nitty-gritty, so please bear with me. Let’s get geeky in here.
The data: meet our cast of characters
First, here are some highlights from the data so you know what this project was all about.
The top five R&D performers in absolute terms are all large economies, the heavy hitters:
- United States – $456,977.0M
- China – $368,635.9M
- Japan – $165,981.3M
- Germany – $106,276.7M
- Republic of Korea – $74,346.2M
No surprises there really. But if you look at R&D expenditure as a percentage of GDP, you see some different countries emerge:
- Republic of Korea – 4.3%
- Israel – 4.1%
- Japan – 3.6%
- Finland – 3.2%
- Sweden – 3.2%
Looking at growth is really telling too. China is hitting a crazy annual average growth rate of 18.3% in R&D spending, compared to just 1.4% across the rest of the world’s upper-middle-income countries. This means that China is catching up to current leader the United States (and fast).
What we did with it: UX and story angles
This is where you have to think carefully about data angles and how best to weave some kind of narrative while still offering flexibility in the UX. We originally wanted to open the story with a battle-of-the-superpowers ‘China vs. U.S.’ kind of scene, but in the end thought it was more compelling to let people find their own country and see how it stacks up. We didn’t want to be too heavy-handed in the way we presented the information, as we wanted people to really lean in and engage with the data, search for things and draw their own conclusions a bit. Part of the mandate for this piece was that it needed to be a resource for journalists and policymakers worldwide, so we had to think about the way people would search for and compare countries.
In the interactive you can access each country by clicking its bubble within the first chart.
However, with so much overlap it can be hard to find one specific nation, especially for smaller bubbles like New Zealand or Kazakhstan, so we included an alternative navigation through the dropdown menu.
Some countries had to be removed from the first chart—because they had one or two dimensions missing which prevented us from plotting them correctly—so we included them in the menu but greyed them out.
Plotting all the countries on the chart meant we were going to have problems with overlapping circles, so we came up with a clever interaction: when you click a bubble that intersects with others, it opens a short list of all the overlapping countries. This is especially helpful on the tablet version.
You may also like:
The bubbles from the first chart are designed to descend into the second chart as the user scrolls down through the interactive. This transition helps the user understand that we are showing the same thing as the first chart (countries) but under another lens (percentage of GDP vs. absolute). It’s an aesthetic touch that also makes the interactive more readable.
Originally the last chart was designed to arrange countries by ranking only. This was our solution to show the data and also to make sure that the lines would still be tap-able on tablet. However, UIS still wanted the absolute values included so we added that but compromised on eliminating the labels for all countries except China/USA for the Current/Constant views (otherwise they would have been overlapping). In that instance, it made sense because it draws focus to the interesting trend of Asia vs. North America.
A highly interactive piece like this needs a tight coupling between design and development. For our developer Sam, the biggest challenge was coding the flow between each part of the viz. It was quite difficult to get the layering (z-indexing) right, and he had to make sure that all the text and buttons were clickable/interactive at all times. Some browsers struggled with the (necessarily) irregular way he was positioning elements, so a lot of tweaks and research were needed to get it right and working smoothly.
In scenography, the look and feel of the work is naturally influenced by design trends and it is always interesting to see, say, a post-industrial design from Berlin compared with Japanese minimalism or something elaborately Baroque. The design is there for a reason: to imbue meaning, control pacing and offer a way in. But at the end of the day, scenography—like UX—simply needs to show off every element to its best advantage so the work offers a sense of clarity.