As I mentioned in a previous post, I was looking to link up the London Population data made easily available by the London Datastore with some sort of dynamic cartogram representation. I’ve now done that if you click on the picture below. It’s a fairly rudimentary little applet, but I think it tells an interesting story.

The slider bar at the bottom allows you to move between the London Geography (the first position) and the cartogram of any year by clicking between them, the years you have chosen and the direction of transition are represented by the text on the right. You can replay any transition by clicking on London. Clicking on the play button slowly cycles through all cartograms.

The initial state shows that from 1801 – 1851 the relative popualtion change in London was very minor, there was some expansion of the inner London boroughs, with the City getting proportionally smaller as a result, but generally London is best seen as what we now think of as the City of London. This trend increases with growing pace during the Victorian period which sees much more impressive growth of the Inner London boroughs up until WWI. From WWI until the 1939 census, the focus of London’s growth seems to shift to suburbanisation, and although fairly even at first, by 1939/1951 there is a clear preference for west London which diminishes the size of east London and shifts the position of the city to the east as a result. Perhaps this is due to the destruction of vast parts of East London during the blitz. From 1981 to 1991 it is clear the process of suburbanisation is slowing and the trend for growth in west London is diminished in favour of a small realtive growth in population in East London, and a slight general movement towards a recentralisation of population in inner London.

I think this is an interesting application of data, although I am slightly skeptical about linking cartograms in this way. The cartograms themselves are proportional to themselves, but not proportional across the whole timescale. If this were true then London would grow from a small image, representing a small total popualtion, to a much larger one by the 20th century as it becomes a global city with a large population. However, by holding the size temporally constant, the actual compositional changes of the different London Authorities do seem to show interesting and expected patterns.

If anyone is interested you can see the code, which is messy, by clicking source on the applet page, I haven’t really commented it, but am happy to discuss if anyone wants to.

NB: The applet will run at a speed that depends on your CPU, essentially it is trying to juggle loads of numbers which are then displayed in the applet window, the slower the CPU the longer it takes to handle the numbers, there doesn’t seem to be a way arouind this. Sorry if it is slow.

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.