SVG-based, linked-data-driven chart widgets

In Feburary I was asked to have a pop at visualising some spending data for some local UK councils. The data was in linked data format (RDF/Turtle) - so stored in a RDF store somewhere and had the Linked Data API layered on top (the Puelia implementation).

The brief was to build an open-source, interactive, cross-browser dashboard of widgets; that would allow the comparison of council's spending data, say, per month.

After a little time spent researching, I came to the conclusion that RaphaelJS (an open-source JavaScript vector library) would fit the bill for this project nicely. The documentation wasn't great (I'm used to that though as I've been using theJIT library for previous visualisation work), but understandable enough to pick some of the demos apart and get the hang of how things worked within a few days.

The great thing about RaphaelJS is that it's simply a drawing library, so you can create a static SVG image of a banana or you can create a animated, multi-coloured, shape-shifting, real-time rotting banana, thanks to being able to manipulate and listen to events on the SVG DOM elements that form the vector image.

I opted to make use of three of the demos available - two versions of line chart and a pie chart.

After getting familiar with the innards of the demos, the next stage was to groom and convert the JSON data returned by the Linked Data API into a processable array of numbers to feed into the functions provided by RaphaelJS - once that was working then customisation could begin, letting colours, spacing and familiar chart techniques to help convey the data.

To emphasize the project backbone - open data - I threw in a sortable and paginated table inside each widget, so the user isn't simply presented with a summarised chart, they can dig down a level and manipulate and scan the actual figures being used to create the visualisations.