This is Joe on Data.

Playing With D3.js

D3.js is a “JavaScript library for manipulating documents based on data.” D3 works a little like jQuery, but is focused on providing a set of tools for binding data to visual components and a rich set of plugins for many visualization features beyond simple line, bar, or pie charts. Take a look at the gallery for an amazing variety of use cases. D3 is perfect for building custom and creative visualizations to expose and explore new insights into data.

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).

One Trackback

Post a Comment

Your email is kept private. Required fields are marked *