Random Etc. Notes to self. Work, play, and the rest.
js-vector-maps on github
I've been experimenting with some javascript classes that mimic the structure of mapnik's Layer/Style/Rule classes and render OSM data (via GeoJSON) to a <canvas> element. I've also finally taken a look at how github works, so I've decided to share the initial code there in case people are interested. If you don't want to check the code out for yourself there's a demo page here (tested in Firefox and Safari only, so far).
Historical Hurricanes & Oakland Crime
Continuing three years of exploration and development at the intersection of mapping and time; a quick post about two new things I've been working on at Stamen.
Last week we released a Historical Hurricane map for msnbc.com, a follow up to our forecast tracker from last year which was recently accepted into the SIGGRAPH Information Aesthetics showcase. You can read more about the historical map on the Stamen site, or just go ahead and explore the finished thing:
Further to our updates earlier last month, we just released another round of improvements to Oakland Crimespotting. Mike and Eric have full details. I'm particularly pleased that we're able to open up our archive of around two years worth of data, but also that we're able to try something new with an interface for filtering by time of day.
We jokingly started calling this a time pie, and now we're stuck with it... in a good way. I'm still not 100% sure it's intuitive, but I think that working the real sunrise and sunset times in there should help. The only comparable interface I could find was this:
If you know of any other similar ways of selecting/filtering 24 hours, let me know in the comments!
Cloudspotting
We've been working on some updates to Oakland Crimespotting recently and Mike released the first iteration today. The most significant change is a switch to base maps using OpenStreetMap data. We're using the Pale Dawn cartography that we (Stamen) designed for CloudMade exactly as it's intended: a subtle backdrop for data that still includes the richer local information that OpenStreetMap contributors (like Mike) cover best.
Other changes we've made include numerous small performance optimisations, new sliders in the marker info-bubbles, date labels on the timeline and the crime-type filters now double as a full legend. The whole thing has had a design overhaul too thanks to Geraldine.
We've got a few more features planned for release soon, and we've started a blog to keep track of new developments. Now is a great time to let us know if you have suggestions or feature requests! Feel free to leave a comment here or email info@crimespotting.org if you prefer.
New Maps at London2012.com
At Stamen we've just finished building a new map for LOCOG (the London Organising Committee of the Olympic Games). This map builds on the work we did last year, with some new work on the back-end to expose a wider variety of content and another round of improvements to the Modest Maps powered front-end. This time we're trying to organise and make spatial sense of the thousands of geocoded articles and photos that the London 2012 team are producing, highlight the ongoing works in the Olympic Park, London and the UK, and showcase the depth and breadth of information available on the main site.
As always when we've just released something, I haven't had a lot of time to reflect on what's been done since I stopped working on it every day, but I wanted to get some words down while the paint's still wet. As always, but sometimes it's important to state clearly: I write for me here, not for Stamen (though I'm not sure what I'd change) and certainly not for LOCOG (you shouldn't take any of this as an endorsement from them). As always, and sometimes you can't say it enough: not all the work shown here is by me, I'm part of a bigger team at Stamen and almost all of us had a hand in this one. We also have very attentive and supportive clients!
We've had a lot of fun paying attention to their brand; going to town with the bright colours, seamless transitions, polygon shards, flags and so on whilst keeping that controversial logo moving nicely. It's sometimes tricky to stay within the guidelines and still have things make sense on top of the maps we've made, but the style guide is tough but fair and it's definitely worth it in the end. Since the branding already pushes things from the graphic design standpoint we've taken the opportunity to push the interactive end of things. The map allows you to filter the content by category, time, search terms and place, with all those (except the search terms) happening client-side to give you an immediate update.
From a technical standpoint the trickiest bit was getting the clustering right. It uses multiple levels of the UK's administrative hierarchy behind the scenes to group different categories of content together into those numbered and coloured flags. When you click on a flag we display an info bubble with tabs containing excerpts from all the content. All of those elements update when the filters change, either immediately or with a slight (and hopefully imperceptible) pause, and hundreds or thousands of animations get kicked off every second if you drag the time slider. With all that going on, the clustering had to be robust!
It's one thing to identify that your map has too much content when it's zoomed out, or that when you're zoomed in some things are overlapping. But it's another thing to group things together in intuitive ways, and yet another thing to have those groupings behave appropriately with other UI elements, and to have the content (which is really all that matters) remain accessible at all times. Throughout the final stages of the project we were worried about cramming too much stuff into the info-bubbles that appear when you click on the flags, and we considered sending you to a separate page section below the map to read extended search results. In the end though we went with the tabbed info bubble approach (I felt a little better about this idea after seeing that people like Mapeed were taking a similar approach). This can sometimes present you with a lot of scrolling to do, but with the added control given by the filters (and the constant updating of the content in the info bubble) we're happy with how that turned out.
Anyway, it's not all about technical achievement, even if that was my personal focus. Some of the features are very simple conceptually, such as showing and hiding webcams depending on whether you're zoomed-in or not. But if you zoom into the park and it happens to have snowed, you can be greeted with a pleasant surprise:
And sometimes we're really just trying to get out of the way, so that the park can speak for itself:
What's next? Well I probably shouldn't say... but since it's custom cartography season at Stamen at the moment, and we all make our interests public, you might be able to guess where we'll take things next. We'll see!
Speaking of tiny details
MSNBC just pushed a small update to our hurricane maps, so that the links to old storms will display the last update if the storm is no longer active. Clearly this is useful for those of us who linked to the Gustav map last month!
You can now view archived advisories for the following storms: Arthur, Bertha, Cristobal, Dolly, Edouard, Fay, Gustav, Hanna, Ike and Josephine.
New Work: Hurricane Tracker for MSNBC
Thanks to a glorious holiday weekend in Bodega Bay, I've been scooped once again by my esteemed friends and colleagues in announcing our work on MSNBC's Hurricane Tracker, which debuted on Saturday. I jumped on this project as soon as I knew we had a chance to work on it, and despite the inevitable project logistics and some awkward travel timing on my part I'm glad to say it made it out before the end of the hurricane season.
There are four storms active in the Atlantic right now:
There's much to say about this, not least the fact that it's the first thing I've ever really worked on that exists in a competitive environment with many credible alternatives.
However, there's still more to come so it will be a while before there's time to properly reflect. For now, let me echo Mike in saying I also think map design for the web continues to be an exciting and vibrant area to be working in, and leave you with a quote from Google's Ed Parsons:
That’s not to say the principals of design are not important in the creation of “maps” for screen display, indeed one could argue for the need of a “new” cartography which adopts rather than ignores the capabilities of screen based maps to portray information dynamically.
— Ed Parsons, "Cartography is dead, long live the map makers"
Visualizing Urban Data: A Journey Through Oakland Crimespotting
Liz Goodman recently invited Mike and I to speak at the UC Berkeley School of Information. We took the opportunity to give a full length talk about a single project, Oakland Crimespotting, which is something of a rarity since we normally try talk about lots of things a little bit, rather than one thing in depth.
Mike started and finished the talk with an in-depth look at the motivations, technical details and social issues surrounding the site, which you can read about on his blog. In the middle I gave a brief overview of related projects and talked about the how the site sits alongside our other mapping work at Stamen. Mike suggested I use a reverse-chronological narrative structure that he liked from a book about Polish history, so I started with the stuff we've finished recently and working back to Stamen's early work with MoveOn and Mappr.
Mike has since reprised the talk for the journalism school, and the whole hour is up on Youtube (part 2 here) if you have time to watch it. Alternatively, you can attempt to simultaneously read the full version of this post and Mike's post together to get a wordier overview of what we talked about.
[At this point Mike has briefly introduced the Oakland Crime site and flash map, and hands over to me for related projects and studio context]
OpenStreetMap GPS Visualisation
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:
Modest Maps vs Processing
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.
So:
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...
...And Processing
← Back to Home
© Random Etc.. Powered by WordPress using the DePo Skinny Theme.