Data true animation

Jump to the demo immediately: DEMO

In datavisualization, animation is often used to show a fluent transition from one data point to the next data point. For example, the length of a bar in a bar chart can be animated to go from data point A to data point B.

In many cases, animation is used to obtain a pleasurable user experience. This is a functional design decision, because it may be an affordance for the user to start exploring the possibilities of the visualization. But the side effect is that the animation may tell the wrong story. If data point A indicates the temperature at 1:00h p.m. and data point B indicates the temperature 6 hours later, a linear motion from point A to point B is an incorrect visualization of what really happens.

In this study, I explore some possibilities of a ‘data true’ animation. I will take the population pyramid as a starting point.

The graphic above was published in 1947 and shows the population of two cities in The Netherlands: Zeist and Eindhoven. The graphic shows the situation in 1930.

If we want to convert this graphic into an interactive application and show how the population changes as a function of time, we can use animation to go from year A to year B. For example, during the time transition, we can shrink or grow each row representing an age class to end up in a visual that represents the population in year B.

However, this animation suggests that each age class is a separate group that moves independently of the other age groups. In reality, during time people move upwards through the pyramid until the moment that they either die or leave the city. At the same time, people may move to the city. I tried to capture these dynamics in an experimental visualization.

Above, you see a screenshot of the experimental visualization. It shows icons leaving the pyramid and thereby symbolizing leaving the country. The visualization uses two different ways to tell what ‘really happens’:

  • change symbol
  • change location

Have a look at the visualization: DEMO

If you want to explore the visualization, please use a modern browser like the latest version of Safari or Chrome. For the techies: the visualization uses CSS3 for flipping symbols.

While the visualization gives information about “what’s going on” it fails in presenting a clear difference in the population numbers between two consecutive years.

Together with Danielle Roberts, with whom I worked during the initial phase of this study, I have gathered many data files from Statistics Netherlands to be able to visualize the real data. However, I didn’t manage to get all numbers such that it all added up nicely the way it should. So I decided to use the real data for the population. I manipulated the data for the dynamics (births, deaths, migrations and immigrations) to fit the model and these numbers are, thus, fake.

Data source: Statistics Netherlands


Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>