Thursday, February 7, 2013

Easy infographics with D3.js!

For the Google Developer Group "Design in Action" hack-a-thon, we made an Android app that served up info-graphics of data about your location from public APIs such as the Met Police.

I used the amazing D3.js JavaScript library to whip up some quick and dirty JavaScript that convert JSON data into beautiful info-graphics.

D3 makes it really easy to implement your info-graphic designs in JavaScript with HTML or SVG elements that you can style with CSS.

D3 has DOM selector methods like in jQuery, but adds some special sauce to bind data to DOM elements in a declarative manner.

D3 also has some pretty cool animation methods to give your graphics that extra umph when elements "enter()" and "exit()" the stage.

See the results here:

The code is available at GitHub:

No comments: