Animating horizontally ordered symbols

Many Isotype charts contain horizontal rows of symbols. An example is the classic population pyramid. An Isotype version can be seen below:

A common practice is to animate a single pyramid over time. Applying this to the Isotype population pyramid means that we have to introduce a user interface element to select a year and that the selected year defines the number of displayed symbols.

The question is: How do the symbols behave during the transition of one year to another year?

I have created a prototype to get practical experience. The prototype is based on a simpler layout than the population pyramid so we can focus better on the animation. The prototype is inspired by two original Isotype diagrams. The first diagram shows the consumption of different products per capita in The Netherlands, as seen below:

The second diagram is related to the number of university graduates per subject:

The final prototype visualizes a data set that corresponds to the first diagram and a layout that is somewhat similar to the second diagram. The data set contains data from the year 1899 to 2009. Unfortunately, the data is not complete, so per year we have to deal with missing data.

When I started a first protoype, my only focus was to develop an animation that ‘feels’ like it is compatible with Isotype. My interpretation is that the animation is functional, smooth and not going wild. This first prototype is described in my technical blog. Based on this first prototype, I started a second prototype using the data described above, because only real data can show you how good or bad a visualization is.

The screenshot shows how I dealt with missing data: greying out the description of the unknown variable. Whether this is a good solution or not, is left for a study in the future.

See for yourself how the interactive prototype functions.

In my opinion, the prototype is a nice and playful visualization, even considering the fact that it has some rough edges. But there is also a downside to the implemented animation strategy.

For example, say that each whole number is visualized by a single symbol. If a variable changes from value 10 to 11, it will cause one new symbol to appear. The symbol is animated from the left to the right, crossing a distance of 10 symbols. If, on the other hand, a variable changes from 1 to 2, the animation spans only 1 symbol. Even though the absolute increase is the same in both situations, the animation differs considerably.

When I realized this effect, it reminded me of the Lie Factor by Edward Tufte. Perhaps we can extend Tufte’s rule by stating that the ‘amount of motion’ has to be directly proportional to the value change. I do feel that not applying this rule doesn’t mean that you lie, so perhaps a different term must be coined.

What aspects of the motion should be considered is left for future study. I described the distance over which the symbol is animated, but speed may also be a relevant aspect.

For now, my conclusion is that if you want to minimize the Lie Factor, the best way to animate the symbols is a ‘curtain method’: hiding or showing symbols by moving a curtain.

It sure doesn’t feel that it is getting more exciting by applying this way of animating. In a next prototype, I will apply the curtain method and see what it will bring.




One thought on “Animating horizontally ordered symbols

  1. Very interesting work! And great dialoge about your design decisions.

    I would agree that the current animation is a bit ‘aggressive’. The sliding window approach seems like it should render the animation more subtle, but perhaps more in tune with the visualization style.

    I would also suggest the change in the animation be triggered as soon as the slider changes – rather then when the mouse release is detected.

    I believe this change, combined with the sliding window approach, would provide a more intuitive interaction – and would allow users to toggle between years very quickly, seeing the changes immediately.

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>