Recently I’ve been messing around with processing as a way of visualising cartograms dynamically. The link below is a fairly striped down ‘sketch’ that shows the geographic representation of London Boroughs morphing to a cartogram representation. Thus cartogram describes a situation in which each London Borough’s area is represented not by its physical land area, but by its relative 2001 population size.

Cartogram for London 2001 Census Population

If you click the above image you will be linked to a page which contains the Processing Java applet. The only interaction I’ve employed is the mouseclick, which resets the animation, allowing you to watch it morph again and again, and really get a sense of how many people are crammed into inner London. (NB You will need Java installed).

Actually making this animation was surprisingly simple. The Cartogram is pre-rendered using the ArcGIS cartogram extension, and the coordinates for the cartogram and the original London Shapefile are exported and read into Processing as an array. The array is visualised using Processing’s built in ‘Shape’ class, so you simply position your list of vertices between a ‘beginShape()’ and ‘endShape()’ tag and Processing draws the rest for you. Naturally, some manipulation is required – the British National Grid (BNG) coordinates need to be converted to screen coordinates, to do this I’ve used Processing’s built in ‘map()’ function.

The ‘morphing’ process that takes place is actually called ‘tweening’, which stands for ‘inbetweening’ – essentially this means rendering a smooth transition between known points. In order to effect this I used the ‘megamu.shapetween‘ library for processing which is very good, their website is worth checking if only for the ancillary resources they have included. Integrating this library is very simple, as is the entirety of the code, if you click on the image and then on the source code link you’ll be able to view it.

I’m hoping to be able to integrate more of the population data into the visualisation and make a dynamic visualisation across a number of years. The data is freely available from the london.data.gov site, the geographical data is not unfortunately and is a simplified version of the boundaries available from UKborders.