Random Etc. Notes to self. Work, play, and the rest.
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"
Firehose
Update (June 20th): the 'Firehose' app described in this post relied on Twitter's public timeline IM support, which has been down for several days in a row. Firehose will return when Twitter gets their stuff back online.
About a week ago I made a proof of concept Flash site that I'm calling Firehose. It shows every post from Twitter's public timeline as fast as it can, in a BigSpy style.
I wasn't sure whether to make it public any time soon, but given how interesting people are finding sites like Twistori the time seems right. Blaine mentioned it on the Gillmor Gang podcast yesterday, and it hasn't gone down since so I assume it will cope with more viewers!
I'm using the XIFF actionscript 3 library to speak to a server running OpenFire, and that server has a bot that broadcasts items from Twitter's public timeline as XMPP (Jabber) instant messages to everyone viewing the Flash site. The main reason it needs its own server is because for socket communication Flash is only allowed to connect to the domain it was served from, and therefore it can't connect to Google Talk or AIM from any server I can host it on.
Anyway, you can probably tell that I'm more interested in the technology than whether it's useful or not. It really is just a proof of concept. It's a bit silly because it's too fast to be readable. But it works! (Except when it doesn't. Let me know in the comments if it doesn't work for you?)
Silly or not, Firehose does expose one tiny piece of functionality right now. There's no filtering yet, but it currently highlights "twitter" by default, and you can see what it looks like with other words highlighted by using the URL #fragment, like this, or this, or this.
Clearly there are several next steps I could take with this. The same setup could also be used to subscribe to a particular set of users, or tracked keywords, or (with a little more server-side work) to geocode the tweets and plot them on a map, TwitterVision style. We're just getting started with this, and Twitter is the only public jabber bot I know of with this kind of volume of output (this BBC one looks interesting too though).
NB:– Twitter is a former client of my employer Stamen but we're not working with them officially at the moment. This is the same Jabber PubSub feed they made public a few weeks back, that people are mainly using to power Twitter search engines.
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]
W(e are )here: Mapping The Human Experience
Eric is in Minneapolis at the moment talking about our work at the University of Minnesota. The talk has been in the works for a while but nicely coincides with W(e are )here, and exhibition we're participating in organised by Solutions Twin Cities.
We've prepared a special version of Trulia Hindsight for the show, using the experimental version of Modest Maps I made for Processing in February and animating data for around 1 million homes using OpenGL. We're not ready to distribute the data to a wider audience yet, but here's an example animation from the application:
Trulia Hindsight - Twin Cities Edition from Stamen on Vimeo.
Thanks to Jamie from Trulia for getting us the data we needed to present Trulia Hindsight in this way.
ArtNano (notes on Processing for design elements)
As I mentioned in my previous post, we were working with Geraldine Sarmiento on the ArtNano site, and she came up with the pixellised imagery you see throughout.
Towards the end of the project, I needed a few more of the pixelly images at short notice, to illustrate the essays and about pages on the site. Rather than bother Geraldine, I reached for Processing to see if I could match the look of the homepage imagery that she had created.
I came up with an applet that used a bit of blurring, a bit of distance fall-off, and a bit of perlin noise to create the effect that we were looking for (decorative, obscured, but related to the overall site). Here's an example of the imagery created from a picture of Scott Snibbe's Three Drops that we used on the page for Jennifer Frazier's essay:
You can see the full applet and source code here, and I think it's a good example of how a generative solution to design elements can keep a project flexible right up until launch (and beyond).
ArtNano (notes on Wordpress as a CMS)
I recently finished helping out on the back-end of the NISE Network's ArtNano site for San Francisco's Exploratorium. Working on a 'straight-up' website is a rare departure for us at Stamen, but we're big fans of the Exploratorium and were delighted at the opportunity to work with them.
The ArtNano site features contributions from several artists tasked with exploring the nanoscale. My favourites are Semiconductor's gorgeously glitchy 200 Nanowebbers video, Scott Snibbe's multi-scale Three Drops installation and Santiago Ortiz's Time Spiral. Also featured are artworks by Eric Heller, Victoria Vesna and Stephanie Maxwell.
If you're interested in that sort of thing, read the full version of this post for some notes on using the Wordpress blog platform as a CMS for a small website project like ArtNano.
mySociety Travel Time and House Price Maps
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.
Stamen ‘07
Eric just posted a review of what we got up to at Stamen in 2007. My second Thanksgiving at the end of November 2007 marked the end of my first year in San Francisco; 2 months after that it still feels new, fresh and exciting.
The variety of projects and clients at Stamen over the last year or so has been extremely satisfying. I probably won't get a chance to write them up thoroughly for myself, but I'm proud to have had a hand (large or small) in all the projects Eric wrote up (and several more besides!).
Here's to 2008!
Accidental Visual Resonance
In my post about the good people at Yahoo's design research group in September I suggested that some of their visualisations remind me of the movie War Games. I love the movie, but I continue to think that certain kinds of accidental visual resonance should be avoided. The 'incoming' visualisations by the good people at Dopplr have this problem too.
Today, Mike sent me the above image that Gem ffffound showing the devastation caused by the Oakland Hills firestorm in 1991. It's shocking, stunning and scary all at once to see so many homes ablaze like that. Mike pointed out that it looks like some of the work from our Trulia Hindsight project at Stamen.
Thankfully I think Mike was referring to the early prototypes I made in Processing using additive blending and a red-through-blue colour range. I've uploaded a movie of one of these prototypes to Vimeo so you can get an idea of what we're talking about:
San Francisco Property Prices, Animated from Stamen on Vimeo.
The fact that certain parts of the movie looked like San Francisco was burning, or being bombed, was definitely a problem we had to avoid for the final piece. It's something I wouldn't want to be thinking about addicentally if I was trying to find out about real-estate in the area. What we want is to make something that can illustrate the effects of real devastation if we want it to, without emotionally swindling you if you just want to think about urban growth. That's why we knocked out the red and orange hues in the colour range, added a drop shadow and ditched the additive blending. Ultimately, it was more appropriate to show data on the map than in the map.
So, if you want to you can look up some of the areas of Oakland affected by the fires in 1991, such as this example, and spot the clear rebuilding activity in 1992. With luck, the animation will illustrate some of the devastation caused by the fires, without looking like a simulated disaster.
← Back to Home
© Random Etc.. Powered by WordPress using the DePo Skinny Theme.