As a great fan of treemaps, I’ve posted a couple of times about the various ways in which they may be used to provide glanceable views over the makeup of local council committees (e.g. Glanceable Committee Memberships with Treemaps, Treemapping Council Committees Using OpenlyLocal Data.
Prompted by Dev8D hackery last week, I spent a little bit of time getting a version of the JIT treemap working with data feeds from the OpenlyLocal website, as hinted at in Some of My Dev8D Tinkerings – Yahoo Pipes Quick Start Guide, Cross-Domain JSON with JQuery and Council Committee Treemaps from OpenlyLocal.
If you want to grab a treemap for a particular council, you need to find it’s Openlylocal ID number. This appears in the various URLs for council pages – can you guess the ID number for the following council?
– http://openlylocal.com/councils/298-Isle-of-Wight-Council
– http://openlylocal.com/committees?council_id=298
Plugging this number into the following test URL should raise the treemap:
http://ouseful.open.ac.uk/councils/demo-embed.php?id=ID
For example: http://ouseful.open.ac.uk/councils/demo-embed.php?id=298
(I haven’t got colours set for every party type yet… Chris – any chance of a list of all party types across all councils??? ;-)
You should be able to embed the treemap in your own page within an iframe:
<iframe src="http://ouseful.open.ac.uk/councils/demo-embed.php?id=298" width="800" height="600" scrolling="no"></iframe>
To get the JSON data into the page from Openlylocal, I run it through a Yahoo Pipe so that I can then grab a JSON-P feed from the pipe. (Currently, Openlylocal just exposes a JSON object. To load this directly into a web page, we need to wrap it in a callback function – that’s all the pipe does – provide a callback…)
Here’s how I get the council committee data into the page with a JQuery call:
function get_ol(id){ var url="http://openlylocal.com/committees.json?council_id="+id; url="http://pipes.yahoo.com/ouseful/jsonproxy?url="+encodeURIComponent(url)+"&_render=json&_callback=?"; $.getJSON( url, function(data) {ol_cttees(data.value.items[0]); } ) }
The pipe simply grabs the JSON data and then re-exposes it:
To find out how the Openlylocal data is transformed, you can try and dig through:
http://ouseful.open.ac.uk/councils/ccl-treemap_files/example2-dyn.js
The function that kicks everything off is init2(id), with id set to the Openly local council id number. (Reader beware: the js file may contain unused and/or broken legacy code as well as the operational stuff…;-)
Note: thanks to Chris/@countculture for annotating the Openlylocal JSON feeds for council committees with council name data over the weekend so I could create these visualisations more easily :-)
PS for an alternative take on how to use the same data, but in XML form, from the Openlylocal site, see@kitwallace’s The party make-up of council committees – doing it the XML way. Very nice :-)