I frequently get emails asking me about visualising collections of GPS traces as an animation. The OpenStreetMap community is way ahead of me on this one, and has a tool called Party Render to create animations of mapping activity.
Here's one that Mikel just pointed out from a recent mapping party in Mumbai:
Since Mike simultaneously outed me and out-did me and linked to the Processing folder of the Modest Maps source at the same time, I thought I'd better post a version of the library I've been working on so that I can stop thinking about it for a while.
Modest Maps is a BSD-licensed display and interaction library for tile-based maps in Flash (ActionScript 2.0 and ActionScript 3.0) and Python...
O'Reilly Radar has the scoop on the most recent thing I've finished working on at Stamen. Interactive travel time and house price maps for London. Go play, and read what mySociety have to say, including the ones for BBC TV Centre and the Olympic Stadium site. Then come back and read this full post if you want the background info...
I've had a slow debate running with mySociety's Tom Steinberg since Euro FOO '06 about the best way to present travel time mapping, after we compared notes from my travel time tube map for London and the work Chris Lightfoot did on mapping transport travel times in the UK as a whole.
It seemed like the best way to settle this debate would be for mySociety and Stamen to work together updating their maps and see if we could get the best of both worlds. MySociety had comprehensive travel time data that they, uh, acquired from Transport Direct and Transport for London's journey planners. They also had an ace up their sleeves with the purchase of house price data for London from the UK's land registry. So far the volunteer-led map design had come up with strong proofs of concept, but a consistent set of presentation material was needed to make a compelling argument about the usefulness of these maps in the general case.
Our initial attempts to update the map began with a couple of days of Tom Steinberg and I alternately hunched over Photoshop and poring over the Edward Tufte books (passages recommended by the man himself) and looking for an appropriate colour gradient to represent travel contours (I didn't know about this resource at the time). All the while Francis Irving was back in the UK working on the heavy lifting behind the project, getting the data gathering and overlay rendering up to speed. We tried a few different things, but actually I thought that the palette Tom had worked on with mySociety volunteer Richard Pope was pretty good, and that's the one we used for these static contour maps. (Early mySociety results on the left, updated one in the middle, my final one on the right).
These maps got much less satisfying with the addition of the house price zones, however. That was what Tom had originally asked us to help with; a thorny problem that needed a new approach. After poking around with the various two and three colour overlays with my colleague Mike it became clear that the combinations of masks and outlines were immensely confusing to work with. In addition to this problem, Tom and Francis at mySociety wanted to be flexible about the most appropriate configuration of house prices and travel times to tell a convincing story about the data later. My initial plan had been to set up a workflow in Photoshop to quickly produce the image files they needed. As the complexity of that task became clear, it got less and less attractive.
I had been resisting reaching for a programming solution to the design and cartography problem, but it became clear the manual processing was going to be onerous and difficult to keep consistent. So I asked Francis to provide me with a house price overlay that displayed small price increments using a grey-scale gradient, instead of solid colours between large price bands. Then whilst Tom Steinberg was out at a meeting I cooked up a quick slider experiment in flash to see if the approach had merit, and the difference was astounding. From that moment I was hooked on giving everyone access to what we were playing with, even if it meant working on it over Stamen's christmas break (time/budget constraints had already excluded building a slippy Google-Maps-style map, for example).
Here's a picture of what the house price masks looked like at that point, two colour bands on the left (constrained, harsh), and the new small price increment one (cloudy, beautiful) on the right:
The next task focused on getting a consistent set of base maps for the work, rather than using a hotch-potch of Ordnance Survey maps. The OS maps are world-class for accuracy, of course, but the cartography changes radically at each different scale and the maps aren't designed for on-screen viewing, let alone for data presentation. Naturally (given my history with the project) we turned to OpenStreetMap as a data source and asked Nick Black from ZXV to help produce maps that would be a drop-in replacement for the OS maps mySociety had been using so far.
One thing that Nick's involvement got us was separate layers of data (above), which let us get more fancy with the presentation later on, and keep the labels on top of the data. Of course flexibility giveth, and flexibility taketh away: later on, it took me a while to figure out how to get the text rendering in Flash to match the mapnik style Nick was providing us (more on that later).
So, armed with new map layers, gradient overlays and masks for travel time and house prices, I set about creating a Flash piece that Tom and Francis could configure for themselves (and they did). They're tough cookies to please, of course, and getting something ready that we were all happy with (on volunteer time, across an 8 hour time difference) took patience on everyone's part. Looking at the finished pieces I hope you'll agree that it's worth it, and if you happen to be a transport routing expert sitting on a system that could help produce these maps for everyone, working around the issues Francis identified, then I hope you get in touch!
I have to leave this post here for now, but I hope to go into more detail about the Flash code (which is over here, under a BSD license) in a future post.
Visually, my favourite map is definitely the one entitled "Social and Functional Analysis", which has a beautiful cellular structure:
But lest I get too involved with the aesthetics or content of any one particular map, or the print quality of the book, or the sheer Londonness of the thing, there's also the "Fetish Map of London", whose description warns:
[Chris] Kenny draws attention to the way that maps can become fetishised objects, by creating links between Kongo fetish figures—with their nailed in 'pledges' or 'commitments'—and the pins in a wall map. His map of London is covered in such pins, tacks and nails to the point of rendering it almost unitelligible.
Normally that reference would be enough to keep me quiet, except I'm delighted to find that I'm mentioned in the book, on page 137 for my Travel Time Tube Map. Sadly the link is a little muddled (pointing people to del.icio.us instead of here) but I hope that can be corrected in future editions.
That aside, the book is of a very high quality and full of historical and contemporary mapping gems from all kinds of sources, including many that I can't find anywhere online (who says print is dead?). I've taken a few snaps of my favourites so you can get an idea of what's in store if you buy a copy, and I can definitely recommend that you do.
I'd been saving this title for a potential Pecha Kucha presentation, covering 20 different maps of London, but it doesn't look like happening any time soon. Meanwhile, maps of London are on my mind: watch this space for some new ones coming soon!
Over at Data Mining, Matthew Hurst takes exception to JC Herz's assessment of his map of the blogosphere as "(approx.) "completely useless"". Having recently engaged in several discussions about beautiful-but-useless visualizations I continue to insist that not everything has to be useful; perhaps Matthew doesn't intend for his map of the blogosphere to necessarily be useful in a traditional sense. That said, I have to admit that JC's blunt assessment is easy to agree with, and I had a similar reaction to the maps when I first saw them myself.
After the initial wave of early Google Maps mashups, some members of the mapping hacks community settled on the term "Red Dot Fever" (coined by Jo Walsh or Schuyler Erle, I think) to sum up the common patterns they were seeing. In a similar fashion (affectionate, but with a critical eye), my colleague Mike Migurski calls the prevailing network visualization technique the "Sticks and Rocks Diagram".
Matthew's images clearly have lots in common with the kinds of work catalogued meticulously at Visual Complexity. Sadly, I think a lot of the work there (some of my own included) is better at illustrating the problem than really informing us about the data that drives it. There's nothing intrinsically wrong with a popular approach to something, but when the results are so often misunderstood I bet we can all do better.
I've read a lot of research papers that would suggest that visualizing large complex networks is hard. Throwing the data at the screen and seeing what sticks is possibly a road to understanding, but I suspect it's an incredibly long one. Calling something "completely useless" doesn't drive our field forward or help open it up to new audiences, but the sentiment underpinning that reaction is something we could all work to understand better.
To me, red-dot-fever maps and sticks-and-rocks diagrams always look like works in progress.
Whilst I wrestle with my reaction to the reception of Twitter Blocks, it's interesting to look at what other people in information visualisation are working on.
Yahoo's new design research outfit, apparently also known as yhaus, have just put up a site outlining their work so far. The first thing I noticed is that they've snagged an amazing subdomain: design.yahoo.com. The second thing I noticed is that compared to other teams I'm aware of in the field (including Stamen) they have a pretty good gender balance (a thorny issue but I'm noting it anyway). The third thing I'll note is the guest appearance of non-Yahoo work in the portraits of the team: I see Torrent Raiders, Fidg't... what else?
Sadly, all but one of the demos there so far is a big Quicktime movie. I know that with millions of users Yahoo has to be a stickler for browser support and compatibility, but I hope they get a chance to take this work live on the web as well as demo it in movie form. There's some solid realtime Flash and Processing work hiding in there, and people (OK, I) want to see it in its interactive entirety.
There's clearly some healthy collaboration and influence going on there (much as in our work, e.g. Ben Fry's zipdecode looms large over the interactive version of our Trulia search animation). Yahoo's Aaron Koblin is best known for his Flight Patterns piece, and this visualisation by Michael Chang of Yahoo trip planner data is very similar:
Likewise, Aaron's work on traffic patterns bears a close resemblance to Flight Patterns:
I don't want to pick on them too much, because it's really beautiful work I admire a great deal (and it might seem like sour grapes), but both the pieces I've highlighted do suffer from something we've tried to avoid at Stamen: animated information graphics on top of black backgrounds and vector maps can easily look like screenshots from a modern-day War Games:
I'm glad other people as well as us are experimenting in public, and I'm glad sites like Infosthetics and Visual Complexity are cataloguing our efforts. We need our own visual language around this kind of visualisation that doesn't resonate with the imagery of war.
Apple's iphone has made a strong impression with slick transitions in its interface design, but the maps application still borrows from Google's pseudo-shadows and static pins. The playful interfaces of the Nintendo's Wii games certainly offer a different path, but the rest of the games (and movie) industry's cinematic-realism aesthetic exerts a strong influence over our generation of designers and it isn't going to meet these goals any time soon.
It's a fairly regular topic of conversation at Stamen: how can you make a visualisation of e.g. 911 calls actually look like emergencies, and not birthday parties or toilet flushes, without freaking people out and without making it mundane? Is it possible to use great circles to connect air travel destinations without it looking like missiles? Can you animate growing and shrinking red and yellow circles on an aerial map without it looking like Gulf War I weapons company propaganda?
It's a bloggy weekend here at Random Etc, if you're reading along I'm definitely interested to hear your thoughts.
Mike and I have been working on this all week, and it's time to let people see it.
Hopefully the site is self-explanatory, because now I have to work on all the things I wasn't working on so we could get it out there!
I'm just back from the Where 2.0 conference in San Jose where Shawn and I tumbled through a 15 minute summary of Stamen and our last few months of work: starting with Mappr, MoveOn and Cabspotting, through Mike's Oakland Crime visualisations, leading to Modest Maps, INdigital telecom and finally launching Trulia Hindsight:
Trulia Hindsight is the first project I've worked on from beginning to end at Stamen, and it's been a lot of fun. We developed the initial concepts as a group and then the ideas were fleshed out by me under Eric's guidance and with design input from Geraldine Sarmiento - thanks Geraldine!
We've got an initial write-up on the Stamen site, and Trulia's take on things is here. Hopefully we can get a chance to post some of the initial experiments that went into the piece and talk about some of the things we're proud of soon. For the moment though, it's time to breathe out and see what people think!
Over the last few weeks I've been collecting circular visualisations. This week, I seem to keep running into 3D globes and heatmaps. I'm all for 3D done right, but even with my fondness for circular visualisations I'm still wary of these things. (Of course I'm not denying the eye candy appeal of any of it!).
"The blogosphere is the total sum of all blogs connected into a social network. The term was cool a year ago but is too widespread now for the general blog crowd to use it. But since it's actually a useful term it is still referred to by the inner circle. From there it will work it's way back into the common language, acheiving a renaissance around febtuary next year."
I admire their thoroughness in doing the whole world (check the site for country by country breakdowns), and their multi-megabyte eye candy movies. It's a shame it's all based on a GDP-like measure, which isn't the most intuitive or easy to visualise thing itself. I'm reading their papers now to see what the story is.
Lastly, I'm really pleased Dan Catt over at Flickr/Geobloggers can't resist plotting his interestingness heatmaps in 3D inside Google Earth. When the sky goes pink you know it's because Yahoo's Dubai office decided to build it for real.
Update: Eric found this one from ESRI:
The key thing about Mapstraction is that you can switch APIs with only one line of code. If your business depends on Google Maps then you should already be doing this, but it also seems like a natural thing to open source. (UK property search engine Nestoria agreed, and funded the initial development). It's already in use in GeoPress, for embedding maps in Wordpress blog posts, and Phil recently used it to add maps to Pepys' Diary.
We hope to keep Mapstraction as a lightweight layer to make porting it to any future APIs as simple as possible. It also offers us the chance to normalise the functionality offered by different libraries, for example we offered a polyline implementation for Yahoo Maps before the functionality officially launched, and we intend to allow a choice of geo-coders for postcode and place-name lookup rather than be tied to the geocoder of your current API provider.
It's worth noting that other people are offering similar things (and more), most notably OpenLayers which offers a complete tiled "slippy" map implementation to make using with your own (or a third-party's) WMS (Web Map Server) as easy as possible.