As a fairly simple but interesting way to familiarize myself with D3, I decided to put together a demo which illustrates some of its capabilities. The demo draws an SVG image with a series of circles. These circles are hooked up to a data set giving position and velocity to each circle. I created an animation loop which updates the data set to move the position of the circles based on their velocity and a redraws the circles at the new positions using the bindings to the data. To make the demo a little more interesting, I added a different kind of circle in yellow which follows the mouse. This circle adds acceleration proportional to the inverse of the square of the distance (i.e. gravity).
This demo is more like a game than a visualization, but I think what it illustrates well is the binding and manipulation of data and having that represented visually. I have an idea for my next demo of D3 which explores a novel way of representing multi-dimensional data in a way that is easy to visually pick up on variations and outliers. So stay tuned for that.
You can view the demo here (And yes the name “Gravity Balls” is horrible. I ran out of creativity.). Feel free to view or copy the source for your own uses. Note: requires a modern browser such as the latest Google Chrome, Firefox, or Internet Explorer 9 (I believe).