So Google has released an invitation-based beta of their new Google Maps version for 2013, at their developer conference (I/O) last week. I’ve been trying it out over the last few days. Compare the new version above, with the old version at the bottom of this post.

The good:

• The new fonts used look great.
• Covering the whole page with the map is great.
• The cartography has improved a lot. I particularly like the slighty text buffering, and the subtle shading effects at the edge of areas of water. The world looks a lot more beautiful.
• Fewer red pins – now, selected features show up in a bold, dark red font.
• The old green and orange road major road colours have just been replaced with yellow and light orange. Much more soothing to the eye.
• All vector based, so generally is more responsive (snappier) to use. Zooming in and out is very smooth.
• Public transport display is much improved, both with timetables and route option itineraries, and the display of metro/rail networks and “sign” labels along the routes you take for journeys.
• Selecting bicycle mode is much more obvious.

The bad:

• I cannot specify a specific point on the map any more for a pin – it tends to jump to.
• I cannot switch off display of my “home” and “work” points on the map.
• I cannot view the (large) map and Street View at the same time, or navigate around the map and have Street View move at the same time.
• No Pegman any more! I cannot see what streets are on Street View, except by navigating around Street View itself.
• The image carousel at the bottom seems unnecessary and a waste of bandwidth – although it’s easy enough to switch off.
• When selecting a POI quite near where I live, Google automatically draws a recommended road route from my home to it, and there seems to be no way to switch this off.
• “My Maps” seems to have disappeared.
• Terrain view seems to have gone.
• Little explanation of symbology or colour meanings – I think this is deliberate, to reduce clutter, but it can be annoying. However key colours do have keys that pop up when needed, e.g. cycle route type, congestion scale.
• The internal maps for major buildings (stations, shopping centres) seem to have gone.
• You cannot zoom into the aerial imagery as far as before.
• There are two few area/district names appearing at many zoom levels, e.g. in central London.
• Overall feeling is that Google has stripped away too many features, and made doing anything more than a basic look at the map (or finding directions) a bit harder, requiring long mouse clicks or options that are hidden away.

So it looks prettier, and it’s easier to use. But some key features for me (such as the split screen between map and Street View) have disappeared – hopefully only temporarily – so for day-to-day use I find my self using the old map.

Here is an animation I created a couple of years ago, one of a number I created for the “Sense and the City” exhibition at the London Transport Museum, which ran from Summer 2011 to Spring 2012. A version of this animation was branded appropriately for the exhibition and shown upstairs in the interactive section. I also created a similar animation of the Barclays Cycle Hire, and colleagues created other map-based visualisations of the moving city.

The animated map shows the touch-ins (going into the network) and touch-outs (leaving the network) of Oyster cards at London’s tube and train stations, including a few beyond the Greater London boundary which still accept Oyster cards. Oyster cards are London’s travel smartcards. As the animation moves forwards in 10-minute intervals during the typical weekday, the balance between touch-ins and touch-outs is shown by a colour scale. Red indicates the great majority of taps are touch-ins, and green indicates mainly touch-outs. White is the “neutral” colour, indicating that roughly as many people are entering the network as leaving it, at that period in time.

Here is a webpage that uses my own CityDashboard API*, to build a Periodic-Table inspired “data artwork” of live London information, as a series of coloured square panels on a website. The squares update regularly with fresh information, and throb red (or blue) if there are particularly extreme values present.

As an artwork, it’s deliberately not 100% clear what it shows. A key on the bottom right will help a bit, but a degree of guesswork will be needed for some of the panels. With a bit of thought, almost all of the panels should be decipherable.

It’s a super-simple webpage. I’m using CSS3 for the animations – no Javascript used. The page is customised to be most relevant to the CASA office here in central London – the chosen weather station, bike share stands, air quality monitor and variable message road sign have been chosen accordingly. A more sophisticated version – which doesn’t currently exist but would be simple to do – would use a combination of the location information in the CityDashboard feeds, and the HTML5 geolocation functionality of many browsers, to show a version more relevant to where in London the viewer is.

As the page is so simple, it displays well on mobile browsers – on my iPhone, the webpage shows four panels on each row. On larger displays, it will rearrange appropriately. See the acknowledgements link on the page to see where the data’s coming from – the same sources as CityDashboard, including TfL, DEFRA, Yahoo! Finance and Mappiness, as well as CASA’s own sensors.

I created the piece for the ODI’s recent Data as Art installation competition – I didn’t win, but decided to do it anyway.

Live version here.

*Strictly, I’m using my Bike Share Map data for the individual docking station information – this could be easily added to the CityDashboard API in due course.

In six weeks time, London will have a second orbital railway. The Circle Line has been running for just over 100 years, and on 9 December will be joined by the latest addition to Transport for London (TfL)’s Overground network – a link between Clapham Junction in the south-west and Surrey Quays in the south-east. This means that the West London Line, North London Line, East London Line and South London Line will all be linked up (you won’t be able to travel 360 degrees on one train though – you’ll need to change at both Highbury & Islington and Clapham Junction, and often Willesden Junction, to complete a circuit). Should you travel around the complete loop, you’ll pass through areas as varied as Imperial Wharf, Dalston Junction, Whitechapel and Peckham Rye.

Anyway this was a tenuous excuse for me to produce a diagram – above – of London’s TfL-owned network – the Underground, the Overground, the DLR, Tramlink and the Cable Car. Click the graphic for a larger version. My starting principles for the diagram were concentric circles for the orbital sections of the Circle Line and the Overground network, and straight lines for the Central and Piccadilly Lines, with the latter two converging in the centre of the circles. I then squeezed everything else in. I realised that the Northern Line’s Bank branch passed the Circle Line three times so was going to need something special, so I added a sine wave for this section, and extended this north and south as much as possible.

The River Thames is on there – because any tube diagram doesn’t look correct without the river – and the diagram is topologically accurate – everything connects correctly, and features are in an approximately correct geographical position relative to their neighbours, but not to the diagram overall. Only stations that are designated intersections, or have connections with National Rail stations, are shown. I haven’t labelled anything. It’s art.

I was also thinking about physics when creating the diagram – specifically Feynman diagrams, bubble chamber traces, particle physics collisions, magnetic flow lines and electrical circuit diagrams (as was Beck himself). Hence why I’ve called it the Electric Tube.

The work was also inspired by the likes of Fransicso Dans (more) and Project Mapping, as well as of course the famous Official Tube Map. 1 November Update – I’ve updated the map slightly to add in Tramlink and a few more connections.

I was at the V&A earlier today to see Prism, a new installation by digital artist Keiichi Matsuda which is part of the London Design Festival.

Prism uses data from UCL CASA’s CityDashboard and other London open data sources, to visualise London in a novel way. The exhibit, which consists of triangular sails joined together in an irregular pattern, and lit from within, slowly pulses and evolves as the data that the patterns and colours are showing, changes. The visualisations are derived from fast-changing weather, travel and other London data sources. There is no key at all so you have to use your imagination to hypothesise what each panel is showing – although a couple have TfL roundels and bike share bikes on them, hinting at their purpose. Prism’s shape and positioning makes it look slightly organic, as it appears to about to burst through the floor and into the gallery space below.

Seeing Prism is a bit of a mission – it requires first going to the sixth floor of the V&A – not immediately obvious to find – then signing a disclaimer, ascending – in small groups of just 6 – a tiny spiral staircase. You then move across a narrow ledge, before finally you enter the darkened room. Prism is suspended in the middle, allowing a 360-degree inspection, and also a glimpse of the galleries beneath. Another spiral staircase, in one corner, then allows visitors to get a different, surprise view.

If you want to see Prism you need to book a timed ticket (free) in advance, and be aware it’s only on for the next 10 days. If you don’t manage to get a ticket, you can still see a glimpse of the base of Prism, as it is suspended over one of the galleries on the sixth floor of the museum.

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 – http://citydashboard.org/):

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.