An interactive data visualisation in canvas, with data stored in a Google Spreadsheets. Ain’t that cool or what?

We needed a way to visualize our web design school’s yearly pedagogic calendar in a digestible, visual manner for our second and third year bachelors. It had to be easily changed by several persons.

The solution i came up with was to use Google Spreadsheets, a tool often used by our teachers (no learning curve – great!), to encode the events (conferences, seminars, holidays), and feed the data in json format to a custom script sitting on our LAMP server using the Google Docs API via the Zend GData open source php package. The script produces an interactive data visualization in Canvas, built using the awesome kinetic.js library.

Requirements

Should you want to try this sort of architecture, you’ll need the following:

Result

The In’s …

printscreen of Google Spreadsheets data
Here is the data in a Google Spreadsheets

…and Outs.

Printscreen of the data visualisation produced
Printscreen of the data visualisation produced using kinetic.js

I must say that i’m amazed at how powerful and easy kinetic.js (on top of jQuery) made the whole visual logic. If you fancy coding for canvas, it’s a library really worth checking out, folks.