Time series dataset animations

Written by Benny Jacobs

This document proposes a better way for generating - dynamic - animations from time series using a animation program specifically suited for this task.

Problem

There are a lot of different kinds of data. Every kind of dataset has its own best way of being shown.

But there are some rather complex datasets which cant be represented properly using a simple chart. Some can best be viewed as a animation which shows the dataset transform over time. There have been a number innovations in this area. Most notable is Gapminder. But animated charts does not solve all problems.

Data should be freed from the confines of the bubble charts and line charts. They should be shown in the researcher preferred way. This can be anything, from movable characters, rotating gears to scaling skewing cubes. More important, I wish to be able to animate rather extreme complex data structures. This includes nested data structures and changing size of datasets. How can this be animated? Lets take a look at how animations are made.

Static animations

Normal (static) animations are made using key-frames. The animator specifies at what time certain objects should be, and the software makes those objects move between the frames. This way of making animations is widely uses and sufficient quality software exist for these purposes.

Dynamic animations

Animations who represent some kind of datasource (A dynamic animation, who’s animation may change if the input changes) are made differently. Normal animation program do not feature a way to import data to be used in the animation.

Instead, the analyst have to resort to programming. Manually importing the data and drawing a graphic representation for every frame. This involves opening a file, using a library to read the formatted data, looping over the time series, and drawing a frame for every dataset in the time series.

Annoyance

There is no reason why dynamic animations should be this difficult. First, the various data formats (xml, json, database, csv, HDF5) should be available to the editor in a uniform way.

The next step is to show how the datapoints change over time and introduce the drawable objects who should be animated. This could be two lists, one for the dataset and one for the drawings. We wish to show a different frame for every dataset in the list, so every dataset will get a frame associated with it.

The last step is to link every dataset with the drawable objects. This is the tricky part and there might be a lot of ways to do this. The analyst should be able to link the drawings’s attributes (position, size, colour, stretch) to a relation (a column). This linking will allow the animation program to change the object’s attribute for every frame. For every frame, the object will be drawn using that frame’s datapoint.

How would such a editor look like?

Lets first take a datasource. This datasource represents a race between 3 competitors. The values are distance traveled.

Bunny,Squirrel,Turtle
5,4,2
9,7,4
14,11,7
19,14,9
23,19,11
24,23,14
29,25,19
32,28,24
36,29,26
40,33,30
42,35,35
47,36,40
48,41,42
52,42,47
54,45,50
56,48,55
60,49,58
65,51,61
67,56,66
69,60,71
73,62,74
76,67,77
77,69,82
79,72,85
81,76,87
82,81,90
84,84,91
85,88,96
86,93,100

For every row, a frame is generated by the animation program.

As you can see, every frame got a associated row from the csv file. These datasets will be used for the objects who will be drawn on the frame. Now lets draw something.

We have drawn something, but there is still no animation. We need to define how the drawing relates to the datasets. The most simple relation is no relation:

Drawing is now present on every frame, but it does not move. A rather boring animation. Lets relate the drawing’s x value to the distance the Bunny has traveled. This is as simple as putting dataset.Bunny for the x value.

Every frame is redrawn and now the x position correspond to the bunny’s distance. If we look at the last few frames, we see the bunny at its last location.

This is how a dynamic animation editor might look like.

Future

A animation editor like the one described should tackle a lot of different technical and user interface challenges.

  • How can the frames and associated data best be viewed?
  • What is the best way to show the dataset for every frame?
  • Which data structures will be supported (Lists, changing lists between frames, nested structures)?
  • How can the drawing properties best be linked to the datasets?
  • Can a static animation be combined with a dynamic animation?

Dynamic images allows researchers and analysts the maximum artistic freedom to show any data in any way possible. The underlying data in these dynamic animations can be changed outside of the editor, allowing truly dynamic images. The animation changes to whatever data the viewer provides (providing the data is in the same format as when the animation was made).

I hope more dynamic animation editors will be made and existing static animation editors will allow the creation of these dynamic animation using the fashion described above.

Race animation made using a dynamic editor

References

Prototype design inspired by “Dynamic Pictures”, Bret Victor