Showing data as a time series enables us to see “data paths” – to simultaneously observe past, present and future, and to begin to spot trends. However, sometimes overloading an already complex graphic with a persistent time series will make the graphic dense and unusable.
So what about representing time as time? Represent the passage of time via the updating of the graphic – essentially some form of animation (obviously, this isn’t possible for a static graphic, e.g. in a printed article). To my eyes, this can have the effect of accentuating dynamics and, by mapping time onto time, sometimes giving a more realistic sense of the process occurring, especially when related to spatial flows.
The example below is drawn from Mike Batty and Ollie O’Brien’s excellent recent work on Rank Clocks. The concept behind a rank clock is that of a polar time-series of “rank”. So, the time axis proceeds in a circle from 0 to 360 degrees, and the distance from the centre charts the value being measured. In a Rank Clock, the value being measured is the rank of something in a set of similar objects – so in the example below, the top 20 Japanese cities (by population) are plotted by rank. The lower the rank, the larger the rank value, and the further it appears from the centre – so Tokyo is 1st and appears close to the centre, the city which is 20th appears 20 times further from the centre.
Given that Rank Clocks have the word “clock” in the description, I wanted to animate it to map time onto time. As I said before, this has the effect of accentuating some of the fast dynamics – and it becomes immediately obvious how stable the biggest cities are well out of the long tail. The software offers tools for the user to select the rank range of interest (they can view all 300+ cities if desired, but messiness ensues), at what timepoint the colour scheme is decided, the speed of the sweep, and the background alpha value (see below).
The way the tool works is to draw a small circle for each data point in each frame, representing the rank value at each timepoint. In order to calculate the rank values between the actual datapoints, a simple linear interpolation is employed. So no actual data lines are drawn – what appear to be lines are just overlapping ellipses.
Setting the “alpha” value sets the transparency of a black box drawn over the whole data pane at each refresh – set this to a high value and the frame is refreshed completely each time, showing dots which represent the data at the current time; set this to zero, and each previously drawn frame will exist indefinitely, eventually plotting out the entire time behaviour. Intermediate values give the data points a comet-like tail, showing their recent past clearly, and their distant past dimly. These animations look like a frogspawn race, or possibly a cohort of sperm circling impotently around a central, elusive egg, and I rather like the aesthetic effect they produce.
This was written in Processing (with OPENGL and the ControlP5 toolbox to create control sliders), and this “alpha wipe” technique is one that’s very easy to use to to create these smooth transitions. Don’t use a “background(colour)” method – instead, at the top of your “void draw”, just add
fill(0, 0, 0, alpha);
noStroke();
rect(0, 0, width, height);
Setting alpha to the value you want. As I said, I allow user control of this variable. I use this technique A LOT for smoothing frame-to-frame transitions.
Sociable Physics 