Friday, February 17, 2012

Learning D3

One thing that came out of our annual planning meetings last week in Arlington is that we're well overdue now for some serious data graphics work. To be honest I'd shied away from this as a result of trying to do too much fancy stuff right at the beginning and wasted a lot of time and money. We've got a solid core now though and in some cases a lot of data, so... visualizations!

Justas suggested D3, and after poking at it this week, I'm getting excited about it. I haven't been this stoked about programming in a while, which is a good thing.

Here's a good summary:

Data-Driven Documents, or D3 for short, is a new visualization library to build visualizations in SVG. But in my opinion, it's also the best javascript multipurpose SVG library when it comes to animation, interaction and above all for binding data to graphics. The community is very responsive, source code is very clean and the API is well written.

This is fairly low level -- you're making boxes and lines, not just plugging numbers into a prefab chart. I'm no guru but I've fiddled with enough infographics to know it doesn't take me too long to start wanting something very custom. In particular D3 is powerful enough to run a full custom data dashboard for SchoolTool users, which would be a huge feature for us.

What I notice so far is just how much the open web toolkit has matured. Chrome's Javascript development tools are nice; SVG works natively in all current browsers so you don't have to much around with Flash or plugins; people have come to some consensus on the best ways to write Javascript libraries.

My goal for the next couple weeks is a new D3 graphic every day. These will start out absurdly simple but hopefully turn interesting fairly quickly. I have plenty of raw material with the new NECAP scores...

No comments: