Data Graphics London

On Colour Ramps and City Dashboards

Here are the colour ramps I am using for numeric measures in the recently launched CityDashboard (which by the way now has a new URL –

The colours have been designed to be clearly distinguishable from the white text that is on top of them.

Here is the PHP code that I’m using to choose the appropriate colour for each measure, and which I also used to produce the above ramps – the reverse colour and bad value handling is only implemented where I currently needed, ideally these would be implemented for all the ramps:

$na_rgb = 128;

function getGreyRedHex($val, $min, $max, $reverse=false, $processing=false)
	$val_0_255 = getNormalisedVal($val, $min, $max);
	$r = 128 + 0.5*intval($val_0_255);
	$g = 128 - 0.5*intval($val_0_255);
	$b = 128 - 0.5*intval($val_0_255); 
	return getHex($r, $g, $b, $processing);

function getGreyBlueHex($val, $min, $max, $reverse=false, $processing=false)
	$val_0_255 = getNormalisedVal($val, $min, $max);
	$r = 128 - 0.5*intval($val_0_255);
	$g = 128 - 0.5*intval($val_0_255);
	$b = 128 + 0.5*intval($val_0_255); 
	return getHex($r, $g, $b, $processing);

function getColdWarmHex($val, $min, $max, $reverse=false, $processing=false)
	$val_0_255 = getNormalisedVal($val, $min, $max);
	$r = intval($val_0_255);
	$g = 255 - 2*abs(127.5 - $r); 
	$b = 255 - $r;	
	if ($reverse)
		$r_temp = $r;
		$r = $b;
		$b = $r_temp;
	return getHex(0.8*$r, 0.8*$g, 0.8*$b, $processing);

function getGreenYellowRedHex($val, $min, $max, $reverse=false, $processing=false)
	global $na_rgb;
	if ($val === "n/a") { return getHex($na_rgb, $na_rgb, $na_rgb, $processing); }
	if ($val === "?") { return getHex($na_rgb, $na_rgb, $na_rgb, $processing); }
	$val_0_255 = getNormalisedVal($val, $min, $max);
	$r = intval($val_0_255);
	$g = 255 - intval($val_0_255);
	if ($g > 128) { $g = 128; }	
	$b = 0; 
	return getHex($r, $g, $b, $processing);

function getRedGreyGreenHex($val, $min, $max, $reverse=false, $processing=false)
	global $na_rgb;
	if ($val === "n/a") { return getHex($na_rgb, $na_rgb, $na_rgb, $processing); }
	$val_0_255 = getNormalisedVal($val, $min, $max);
	$r = 255 - intval($val_0_255);
	$g = intval($val_0_255);
	if ($g > 128) { $g = 128; } 
	$b = 128 - abs(127.5 - $val_0_255);
	return getHex($r, $g, $b, $processing);

function getNormalisedVal($val, $min, $max)
	if ($val < $min) { $val = $min; }
	if ($val > $max) { $val = $max;	}
	$range = $max - $min;
	return ($val - $min)*(255/$range); 

function getHex($r, $g, $b, $processing)
	$hex = str_pad(dechex($r), 2, "0", STR_PAD_LEFT) 
		. str_pad(dechex($g), 2, "0", STR_PAD_LEFT) 
		. str_pad(dechex($b), 2, "0", STR_PAD_LEFT);

	if ($processing) { return "FF" . $hex; }
	else { return "#" . $hex; }

I’ll be presenting CityDashboard at the forthcoming Wherecamp EU unconference which is taking place in Amsterdam this weekend.

Data Graphics London


CityDashboard is the main project that I have been working on for the last few months. It aims to summarise quantitative data (both officially provided and crowd-sourced) for the major UK cities, in a single screen. Point data is also shown in an alternate map view.

It was launched at the CASA Smart Cities conference last Friday, for eight cities – London, Cardiff, Edinburgh, Glasgow, Manchester, Leeds, Birmingham and Newcastle. London has the most dashboard “modules” at present, with a number of London-specific modules from Transport for London, the Port of London Authority, and CASA’s own sensors. Other cities have several more generic modules (such as weather and Twitter trends) and more city-specific modules will be added to these in due course. I am also looking at improving the overall look and feel of the website, possibly by using the BBC Glow API that was suggested to me at the conference (but just now took me half an hour to find on the web!)

CityDashboard features specially curated Twitter lists. For each city, there is a general news list, featuring tweets from local newspapers, local correspondents for the BBC and other TV and radio channels, tourist organisations and the official accounts for the relevant local authorities. There is also a universities list, with the official Twitter accounts for the main universities in each city, as well as their student unions. It is hoped that this latter list with detail the latest university research outputs, coming out of that city. The account that manages the lists is CityDB and the lists take the form of, for example, and Anyone can subscribe to these lists, you don’t have to only view them through CityDashboard.

You can visit CityDashboard live, right now, at

The project is an output of NeISS, which is funded by JISC.

Olympic Park Orienteering

Stratford City Race

Yesterday was the Stratford City orienteering race, organised and planned by Josh Jenner, with the map done by myself. The map was a real fiddle to do, requiring four site visits and many hours in front of the computer to build up the six mapped levels (the top half of the is shown above) but the race went well in the end, with no major complaints, only minor ones (a few people found the level change arrows hard to spot, and some people didn’t spot some Out of Bounds areas and so ended up in an area that wasn’t mapped to detail.)

The weather was great (cold and clear outside, warm inside!) and nearly 100 people raced in five waves, including, notably, a wheelchair competitor. Not many “regular” orienteering areas are both wheelchair friendly and traffic free. I did have to hang some of the controls very high though – a couple over six foot off the ground – to use suitable mounting points. The centre management were enthusiastic about the race, and another edition is possibly in the future – possibly using a different format to keep the idea fresh.

After the race, two of the controls were missing – it turns out that one of the collectors had kept one by mistake, and the other had been retrieve by a concerned member of the public (it wasn’t locked down to the chair) and handed in to security, so eventually we were reunited with them all – a good thing as the control boxes are very expensive! The centre was, as expected, almost deserted for the earlier waves, but from 11am it started to get a good busy and it was a good thing the orienteering was out of the way.

I managed to get a run in myself, taking part in the last wave. I was strictly non-competitive, as I knew exactly where all the controls where and the best route to take between them. Despite this I was still beaten by Ed. My route was around 5.5km, I don’t think it would have been possible to visit all the controls and run in under 5km, which is not bad for a site that is only 400m across. The format of the race was score, i.e. controls could be visited in any order.

Some photos from me are here, and more photos and the results are on Josh’s website.

Thanks to Josh for the concept and organisation, and Westfield centre management for letting it happen and giving us full reign through the centre and even control suggestions!

Conferences London

CASA Smart Cities

[Updated x2] Just a note to say that I will be presenting some of my work, at the CASA Smart Cities free one-day conference. Over 200 tickets have already gone, but there are, at the time of writing, a few left.

There will be an exhibition at the conference, some people in the department have been building some very cool things which will be unveiled there. Unfortunately I’m not allowed to talk about the very coolest one of all, but I have been allowed to post the above graphic which has got something to do with it…

(If you want to have a guess at what it is, leave a comment!)

[Update 3/4 – Tickets are sold out, however I think an extra batch will be available soon.]
[Update 13/4 – A few more tickets now available.]

Olympic Park Orienteering Orienteering Events Log

Five Level Orienteering – Stratford City Race

If you thought the Barbican’s three levels were tricky to orienteer through, then you haven’t seen anything yet – there will a race taking place in and around the Westfield Stratford City retail complex in east London, on Sunday 15 April. The race will be over five levels of the indoor shopping centre area, plus the surrounding outside area.

The race is being organised by Josh Jenner, his website has full details and entries are open. I’m doing the map, which will be a 1:4000 A4 full-colour ISSOM map on waterproof paper. As you would expect, there are a number of special measures need for the event. The event is pre-entry only and it will be a mass start 45 minute score, with five “waves” starting between 9am and 10am – the early finish is needed to ensure that orienteers will have the space to run in, before the crowds arrive for the midday opening of the larger stores. Stratford City gets amazingly busy inside on a Sunday afternoon!

This will be the closest you will be able to get to the Olympic Park on an orienteering race for a few years to come – the park surrounds the triangular site on two sides, with the Athletes Villages to the north and the Olympic Stadium and the Aquatic Centre to the west. It’s the first orienteering race to take place here (the development has only been open for a few months) but it may well also be the last ever race here – with Sunday trading laws due to be relaxed for the Olympics and possibly becoming permanent after them, there may never be another opportunity to run around Westfield Stratford City free of crowds!

Olympic Park

Games Maker

Yay! I finally heard today that I have been accepted as a volunteer for the Olympic Games in London this summer. It won’t be a particularly glamorous role – I’m not going to be the guy that hands Usain Bolt his towel on the finish line – but I should be within the Olympic Park at least some of the time during my 10 days of volunteering.

Following my interview I had heard nothing, while various other members of SLOW (my orienteering club) had been accepted into various roles and had subsequently gone through the induction training programme, so I assumed the worst. Nice that it came through in the end.

I’ve managed to spend a little bit of time in the Olympic Park already – attending test events at the Copper Box (formerly the Handball Arena) and at the Velodrome. Plus I am also working on a very interesting project in and around the Stratford City retail complex that is surrounded on two sides by the Olympic Park – more on that soon.


A Gate as a Map

Part Two in an extremely rare series of ornate metal maps on features, is this map, which is on the gate to a student block in Tottenham Hale. The map is only in the correct orientation (i.e. eastwards to the right) when viewed from inside, so I’ve flipped the photo around so that it makes sense.

The gate/map shows the Walthamstow Reservoirs, as well as the surprisingly large amount of green space surrounding the area (which is part of the Lea Valley). The block itself is coloured in black. The dotted pattern appears to have no significance other than to add structure to the built-up areas where the road network doesn’t help.

Bike Share

So How Big Was the Big London Bike Share Expansion?

As planned, Tower Hamlets (east London) and Shepherd’s Bush (west London) saw a big expansion of bike share docking stations, overnight last Wednesday night. There’s also been some incremental additions to the existing zone, and a build-out of Camden Town in the days leading to the “big bang” expansion.

So where are the new docks? As Diamond Geezer has noted, the all four compass points have received new bike share docking stations recently.

The map below shows (in colour) the new docking stations – those that were installed since 1 January 2012, and are currently operational. The old ones are in grey.

The numbers:

Area New Docking Stations
East 91
West 9
North 5
South 6
Central 27
Docking Stations Stands
Old (2011-) 410 3937
New (2012+) 138 10071
TOTAL 548 14008

There are a few more “ghost” docking stations that appear on the map, these are old docking stations that have been decommissioned or more new ones that were recently in testing and so appeared on the official map – TfL have promised an additional 10-15 docking stations) will go in in early April.

Background map CC-By-SA OpenStreetMap contributors.

Bike Share London

London Bikeshare Expanding East and West

The Barclays Cycle Hire bikesharing system (map) in London is due for a major expansion on 8 March. Overnight on the 7th, operators will be working flat out to add 2300 1700 1900 new bikes into 4800 3000 3400 new stands, clustered in the 200 150 new docking stations that have been tested over the last few weeks, across the East End of London (Tower Hamlets, Shoreditch/Hackney Road and Canary Wharf). Also going live the same day will be a much smaller expansion west to the area round the Westfield shopping centre in Shepherd’s Bush in West London. Another small expansion around Camden Town has just been completed, adding several new stands to the northern tip of the system, including handily around Camden Town tube station and Camden Road train station, allowing commuters from the north and the Overground network (like me!) to avoid the expensive Zone 1 fares and Boris Bike the last few kilometres to work.

The expansion will move London up the league table of bike share cities from 7th to 5th – in a top 20 dominated by China. It will remain the second largest system outside of China, after Paris, although New York’s planned system will be even larger:

The Biggest Bike Sharing Cities (March 2012)

City Country Bikes
Mar 2012
Nov 2011
(If Different)
1 Wuhan China 70000 Now believed closed
Bejing (planned) China 50000
2 Hangzhou China 60600 24000
3 Paris France 18000
New York (planned) United States 10000
4 Taizhou China 10000
5 London (8 March+) Great Britain 7200 5000
6 Yantai China 6000
7 Shanghai China 5700
Chicago (planned) United States 5000
8 Guangzhou China 5000
9 Barcelona Spain 4700 4400
10 Kaohsiung China 4500
11 Montreal Canada 4220*
12 Foshan China 4000
13 Lyon France 3400 3060
14 Zhangjiagang China 3200
15 Munich Germany 3000
16 Wuham/Qinshan China 3000
17 Toulouse France 2500
18 Brussels Belgium 2180 2060
19 Seville Spain 1950
20 Changshu China 1700 1440

* Currently closed for winter.

Data sources: Scheme operator websites (through my live map),,,, press releases/newspaper articles on new schemes, Wikipedia articles. If you are aware of any mistakes, please let me know and I will correct. Photo: CC-By-NC IanVisits.


Extracting Feature Geometries from OpenStreetMap


I’ve recently been extracting some river geometries for major cities around the world. The data needs to be a list of latitude/longitude coordinates, representing the nodes on the shape for the river concerned.

I’m sure there’s easier ways to do this, but here’s my technique, shown here for Minneapolis. Click the images for larger version.

1. Extract the data from OpenStreetMap. Use the Export function, and draw out the area concerned with a bounding box. Choose OpenStreetMap XML as the format. I originally tried SVG, but this presents you with screen coordinates instead of latitude/longitude pairs.

2. Open the resulting file in Quantum GIS (QGIS). I used QGIS 1.9. You need the OpenStreetMap plugin installed, this will allow the OSM file that was created in Step 1 to be read straight in (in fact you could download the file directly from the OSM servers, if you wanted to).

3. Select the feature you are interested in. My river (actually a waterbank polygon) is a “hairy feature” as it extends well beyond the extent of the data that was downloaded. Make sure you are selecting it (feature turns yellow) rather than highlighting it for feature information (feature turns red). Otherwise, the subsequent file is, rather unhelpfully, blank.

4. Do Layer > Save Selection as Vector File. Choose “KML” as the format. You probably don’t need to change the coordinate reference system (CRS) as the data will already be in WGS 84, and this (“normal GPS-style latitude/longitude) is the CRS you want.

5. Edit the resulting file, removing the XML tags, and header/footer, and replace spaces with return characters, to leave a long list of latitude/longitudes, ready for importing into your visualisation code.