Categories
Data Graphics London Mashups

CityDashboard makes it to the Mayor of London’s Office and the BBC!

bbcipad1

bbcpiad2

CASA colleague Steven James Gray used the API from CityDashboard, which I created early last year by aggregating various free London-centric data feeds into a single webpage, to power the data for a 4×3 array of iPads, mounted in a wooden panel, itself iPad-esque in shape. The “iPad wall” was mounted in the Mayor of London’s private office high up in City Hall, so that the mayor, Boris Johnson, can look over the capital digitally as well as physically. The idea of having the digital view directly adjacent to the physical view was also captured in the fleeting but beautiful Prism exhibition by Keiichi Matsuda at the V&A, another use of the CityDashboard API.

Today the BBC has picked up on the iPad wall and featured it as London’s example of emerging smart city technology. Scrolling down the article reveals it in all its glory. It’s somewhat flattering for the iPad wall and CityDashboard to be included this way, seeing as it’s just a number of HTML scrapes regularly running from various webpages, bundled together with pretty colours. The concept only works because of the many London-centric organisations that make their data available for reuse like this, not least Transport for London. It’s not going to change the way London operates like grander Smart City ideas might, but crucially it’s already out there. The BBC emphasises that it’s cheaper than Rio’s (well, yes, because the physical bit was built in CASA on a cost-of-materials basis, as part of a UCL Enterprise grant) and that it’s available to all, not just the Mayor. Almost true – CityDashboard doesn’t quite look like the physical iPad wall, but I’m minded to tweak the design and produce a version that does.

Anyway nice to know, via the BBC, that the wall is running and the data is ticking. The Mayor of London’s team can change the content on a number of the panels to show their own custom statistics. I was pleased to see, looking carefully at the photo in the article, that my Bike Sharing Map also makes an appearance.

Categories
Data Graphics

Map of the Complexity Sciences

complexitymap

Above is a small extract of an interesting roadmap (also printable PDF version) from the Art & Science Factory, produced by Dr Brian Castellani. It was first posted back in early 2009, this is the fifth edition published earlier this month. It shows connections between the different strands of the Complexity Sciences and how they are linked to related disciplines. UCL CASA’s Prof Michael Batty makes an appearance – in the future section (2015) on the far right hand side, linking to his Cities and Complexity work – the Science of Cities.

The chart goes right back to Isaac Newton (the 1940s-1950s caption here perhaps not quite right!) and also references John Conway’s seminal Game of Life, as a feed into Cellular Automata models.

Castellani, Brian 2013. Complexity Map Version 5. Sociology and Complexity Science Blog. http://sacswebsite.blogspot.com/2013/07/the-complexity-map-version-5.html.

Categories
Data Graphics

Snowden Route Maps

Compendium of not-great maps produced by the media showing the alleged route that data leaker Edward Snowden may or may not have taken around the world. Thanks to Spatial Analysis for tipping me off with the Guardian’s effort and seeding the idea for this blog post.

Sky:
230613-snowden-route-map-v2-final-1-522x293

Apparently the route from Hawaii to Hong Kong goes via Brazil and Madagascar. The map’s filename includes “v2-final” indicating this is not a first draft. The labels variously show the city, the state, the country, or sometimes a combination.

BBC:
Screen Shot 2013-06-24 at 17.21.48

Better, although uses fake (but incorrect) Great Circle curves.

The Guardian:
Screen Shot 2013-06-24 at 15.04.27

Google Maps?!

Business Insider:
snowden-on-the-run-nsa-leaker-flies-to-russia-heading-to-cuba-and-then-to-ecuador-or-venezuela-reports

Google Maps!

Daily Mail:
article-0-1A78F3E2000005DC-774_634x480

The long way around to Hong Kong. Includes nice shadow effect showing that the curve is simply due to the height of the plane above the ground – the further you go the higher you fly!

Here’s how to do it – use Great Circle Mapper:
map_5segs

Great Circle Mapper is Copyright © 1996-2013 Karl L. Swartz. All rights reserved.

(N.B. Some long-distance air routes use jetstreams rather than Great Circle approximations, as this is more efficient in terms of fuel/speed, even if the journey is further.)

Categories
Data Graphics London

Google Maps 2013 – A Few Steps Forward, A Few Steps Back

googlemapsnew

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.

googlmapsold

Categories
Data Graphics London

London’s Oyster Card Tidal Flow

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.

Categories
Data Graphics London

A Periodic Table for London

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.

Categories
Data Graphics London Mashups

Update to CityDashboard CSV API & iPad Wall!

I’ve made some minor alterations to the CSV API for CityDashboard. The main changes are in the metadata rows (the top two) rather than the subsequent rows. Specifically, the top metadata row has now split out the description, source and source URL – which were previously rather messily combined into a bit of HTML – into three text fields; and the second metadata row now uses properly formatted names for value titles, i.e. including spaces, and units, for example “broken_pc” now becomes “% docks/bikes broken”.

The reason for these changes is to accommodate a new and exciting use of the API here at CASA – our lab hardware specialist has recently been hard at work building an “iPad wall” and one of the visualisations in it is of CityDashboard data. Here’s what the uncompleted – but operational – iPad wall looks like (source):

It’s a physical CityDashboard!

I also took the opportunity to fix a few bugs and typos – mainly just cosmetic, but including a pretty silly one for the Mappiness-sourced data that was over-reporting the true value by a large and variable amount. Entirely my fault. That will serve me right for doing a coding change during a colleague’s Ph.D viva drinks reception! I also handle temporarily unavailable source feeds a little better – they’ll now appear unavailable for one complete update cycle but it means the source server doesn’t get repeatedly hammered until it comes back up again.

Categories
Data Graphics London

The Electric Tube

[Update – An updated version of this is currently available as a limited edition A2 print.]

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. [Update – I’ve updated the map slightly to add in Tramlink and a few more connections.]

Categories
Data Graphics London

Prism: A Real-life CityDashboard

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.

Categories
Data Graphics Technical

CityDashboard Weather Forecasts – Yahoo! to the Rescue

After Google abruptly turned off their XML weather feed this week, I’ve switched to using Yahoo! Weather (an RSS feed) for the CityDashboard weather forecast module. Yahoo uses WOEIDs rather than city names, which takes a bit longer to configure but is unambiguous – Google just used the city name, so required careful specification to get Birmingham (UK) weather rather than Birmingham (Alabama, US) weather, for example. Google’s feed was undocumented (so, strictly, private) but was widely used on other websites.

I’m using the weather icons (which link to the codes supplied by Yahoo) from the WeatherIcon project.

It works well. Thank you Yahoo!

Maybe Yahoo! is about to become the new Google?