The making of voluntarysectorcuts.org.uk

Posted on by

I thought it might be useful to give some background on how the site is constructed, for anyone who’s interested.

The site was inspired by the Ushahidi platform, which is used to crowdsource information on a crisis. I didn’t use Ushahidi itself as I needed a bit more flexibility in terms of how the data is presented, and to allow us to include all the partners logos. So instead the site is build using wordpress, with the platform theme.

The form itself is an html page inserted as an iframe into a page on the site, which feeds into a Google spreadsheet. Rather than use form created in Google documents, it’s possible to build a customised form that submits using HTTP POST to the same spreadsheet. An example of this (and where I got the idea) can been seen on Google’s blog.

The map on the form is made using Google Maps Javascript API (version 3). Clicking on the map fetches the latitude and longitude of the point clicked, which are used to plot the points on maps. The latitude and longitude are then sent to MySociety’s MapIt service,  which allows you to get the country, region and local authority for the point clicked.

The two “tag” based questions are built using the jQuery tagInput plugin, written by Roberto Bicchierai.  The list of possible tags are currently stored in the form html itself, ideally these would be fetched from existing entries.

When a user submits a form, a row is added to the spreadsheet. The spreadsheet provides one way to look at the data, but not a very user-friendly one. To make it easier, we’ve included two Exhibit-based pages on the site. Exhibit is a web framework written by the Simile project at MIT.

Data is provided to Exhibit in a particular format. It will accept Google spreadsheets, but they need to have columns in a particular order, with particular names. The Exhibits on this site therefore take another sheet in the same spreadsheet as their source. Manually copying the records from one sheet to another is what causes the delay between submitting a form and it appearing on the map.

[Update 18/02/2011] I’ve since created a direct feed from the spreadsheet in Exhibit’s native json format, which means the spreadsheet no longer needs to be manually updated. You can use this json feed yourself.

The Exhibit pages are also inserted as iframes into wordpress pages. One uses the Map view to place all the cuts onto a map of the UK. The other uses the table view to display selected information about the cuts. The “facets” alongside the map and table allow the cuts to be filtered according to the tags they use, the region, and any other information. With just a small amount of HTML, Exhibit makes it easy to create sophisticated displays of information.

The other two parts of the site are widgets on the sidebar. One is the summary widget, which displays a map of the cuts so far with a short sentence saying how many cuts have been submitted and how much money they represent. This is created using a php script which scrolls through every cut in the CSV output of the Google spreadsheet, and counts how many cuts there are and sums their amount. The map is plotted using Google’s static maps API.

The other widget is another php script that displays the logos of the partners involved. To be fair to all of us and in the spirit of partnership, it made sense to randomise the order of the logos. So with the help of the PHP shuffle function you should see the logos in a different order every time you load the page.

So this site has come together thanks to the following web services, APIs and software – all of which are available for free:

One thought on “The making of voluntarysectorcuts.org.uk”