People are used to financial data being represented as plots of value against time. Other visualizations might provide a different understanding of what is going on. This is a soap bubble animation of the main composite indices of six major countries, based on weekly values between 2000 and 2010 that I stole from Yahoo! Finance:
Dow Jones
CAC 40
Footsie 100
DAX
NIKKEI 225
SSE
The radius of the bubble represents the value of the index: the scales have been arbitrarily chosen so that all the bubbles have the same size in January 2000.
Viewing the data as an animation instead of a plot really helps underline the meanings of «sudden» and «simultaneous» that would otherwise be lost with a static representation, especially around August 2002 and August 2008. The huge, screen-blotting Chinese bubble is quite impressive, too. In the end, most bubbles are as large as they were in the beginning, if not smaller.
For historical reference, these are the plots for the six indices:
What are your opinions on this animation? Does it work on your browser? Are there any similar data visualizations you would like to see here? Is there a point in explaining the bloody technical details behind rendering this baby?
Noticed the [type Function] bug in the bottom left corner of the Yahoo Finance image?

Hi. I'm Victor Nicollet,
That’s a pretty slick way to display the data. Your animation makes it harder to interpret the results intellectually, but I think it makes it much easier to understand emotionally. When China was ballooning out of control I found myself panicking about America’s future (which is not my reaction when I see the traditional plots). It would help to add a slider so that the user could manually control the date, but I realize this was just meant to be an experiment.
Also, I learned a couple jQuery tricks looking through your code. Thanks for this post.
Very interesting, but somewhat misleading in that we are more sensitive to the *area* than to the length/radius of 2D figures. You could easily correct this, and it may lessen the drama of the Chinese bubble to more reasonable proportions.
@Tyler: thank you for your comment. I’m glad I still know enough about jQuery to help people learn about it! Though in this case, the hard part was making the bubbles stick to each other.
@DH: I know
I originally corrected for this by using the square root of the variation as the scale. But my girlfriend thought it felt less dramatic, and I’m a weak, weak man. Besides, there are other flaws (such as the arbitrary scaling, which is very misleading because it would imply the economies are of approximately the same scale, which they are not – the US are an order of magnitude greater than France, for instance).
Nice one !
It would be even better, could be viral actually, if you used unscaled stock prices of say Microsoft / apple / google /yahoo / nokia for the last 20 years while adding information anims for the important happenings (iphone / vista / chrome) and added a cute song.
Vengeur out !
@Le vengeur masqué: an interesting suggestion, indeed!
As Tyler said, it’s difficult to see what’s going on. Bubbles grow, shrink, and at one point you realize that it only measure the stock index.
Maybe it would have been a good idea to use a ratio stock index / GPB. Or something like that.
Anyway, I find the idea interesting, and there should be some data somewhere that could be animated this way.