Rather than painstakingly mimicking the entire infograph in detail, with all the listed countries and exact positions, I replicated the look, feel and functionality of the infograph in a simplified version—and using absolute bogus statistics. In fact, I’m purposefully not even using units.
Anyway, here it is: the CSS Infograph.
Details of the experiment
Before anything else is said, I should stress that it only works 100% as intended in Safari 3.1 (Windows or Mac). It also works in WebKit nightlies, but several of the nightlies of the past week have a fatal bug in them that causes Webkit to crash on this experiment, so be advised if you’re running a WebKit nightly from anytime between the 15th and the 22nd of September. Also worth noting: since Internet Explorer still doesn’t support the
:target selector, the whole thing doesn’t do anything in that browser.
The biggest problem I had to overcome was the fact that, visually, there’s only four elements that animate around, but in reality, I’m showing 16 elements. In order to make them transition seamlessly from one into the other, I ended up positioning all 16 elements according to the four visible positions, for each of the four states. The 12 elements not shown are set to a very low opacity, and only the needed elements become opaque while the previously shown set transitions into transparency again. This solution works just fine, although it did highlight some tiny performance issues in WebKit’s animation engine. Minutiae, really, but noticeable to the keen observer.
:target selector prevents me from changing the not-targeted elements around as desired. Since this is merely an experiment in CSS, I’m okay with it.
Here is a screencast of the CSS infograph in action in Safari 3.1, in all its glory:
I’ve also put up a set of screenshots of the CSS Infograph on my Flickr, showing its rendering in other browsers. Of particular interest is Google Chrome‘s rendering of it; Chrome supports CSS Transitions as the only non-Safari (but still Webkit) public release browser, but because their graphics engine is still in relatively early stages of developments, the final result in Chrome is, well, abysmal.