This last year was a busy one at the studio; good and full, but often busy enough that we were moving too fast to talk about what we did. Which is a shame, because I'm proud of all of it. Having spent the last week or so getting the screenshots together (and doing a few other things as well), I'm finally in a position to actually look at all of it in one place and gather some thoughts. As the number of projects we get involved with grows, it's getting harder to keep a handle on things! But lots of fun.
2011 was the year data visualization and custom mapping moved firmly into the mainstream of digital design work, and our client roster at least partially reflects this trend. We also saw two major museums recognize this kind of work, signaling a growing understanding that this work is moving from the realms of research into genre. Open source projects continued to be a major source of interest and value for our projects, client-facing and otherwise. And we took two first quiet steps into product design based on open data, both directly supporting the efforts of the mapping volunteers at Open Street Map, whose efforts are increasingly being seen as a reliable alternative to propietary geographic solutions. This kind of effort, where we can do good and earn money at the same time, is core to the studio's practice and I'm delighted to be able to still be in a position to support it, ten years on.
So without further ado, this is what we've been up to:
Oprah Winfrey Network: Oprah's Life Class
We designed and built an [interactive companion] to Oprah's return to network television, [Oprah's Life Class]. Class participants used Twitter to post answers to class questions, Oprah favorited the answers she liked the best, a live map showed participants the global nature of the event they were participating in, and Oprah used the piece during a series of live webcasts following the show.
FCC: Broadband Map of the US
[Broadbandmap.gov] collects internet connection data across the US. Funded by the FCC, the project lets viewers compare [connection type], [actual speeds versus those advertised], [availability compared to demographics], and other aspects of their broadband coverage. Working as a subcontractor to Computech, Inc. of Bethesda Maryland, we developed two of the maps found in the map gallery on the National Broadband Map website.
MapQuest: Map Equals Yes
We started off with Foodspotting data; investigating where people had posted food reviews. The project took a brief detour into replacing the names of places with the names of the most popular foods in those places—so "The Mission" became "Secret Breakfast Ice," and that was fun. Not every restaurant (or even city) has reviews, though and we started angling more towards images that showed where the data was instead of what the data was.
This turned into an interesting problem in its own right, and we ended up with maps of [where the buildings are, and only where the buildings are]. MapQuest's support of the OSM's XAPI makes it possible for others to do similar kinds of things with free public data, and the code for the project is open source and [freely available].
Paranormal Activity 3
A map and visualization letting people use Twitter to vote for which city they wanted Paranormal Activity 3 to be released early in. This was a whirlwind project with about a week from initial call to successful delivery, and one where all the [open source work we do] came in super handy. We designed a custom cartographic set (known as "spookymaps" in the studio), Houston took the prize for the highest number of tweets, and in the end PA3 turned out to be the top selling movie of the year.
Trip Advisor iPhone and Android Cartography
We developed artography designed specifically for Trip Advisors' apps for mobile devices, whose small size and high screen resolutions provide their own opportunities and challenges. These maps are themed to work with Trip Advisor branding & styling, and the typography reflects the neighborhood-by-neighborhood focus of their apps. The apps are available to [download from iTunes]
Live web analytics provider [MixPanel] asked us to provide visual design direction and implementation for a new product, User Activity Streams or Streams for short.
A set of maps for Airbnb.com, showing the explosive growth of the service since it started in 2008. Darker city blocks have less listings, brighter blocks have more. It's amazing to see how quickly some areas fill in as more and more people discover they can list their apartments—and to see which areas stay dark.
[Walking Papers] saw continued use by the OSM community and was featured in two museum exhibitions this year: [Hyperlinks], at the [Art Institute of Chicago] and [Talk To Me] at [MoMA in New York]. We started working to extend the project for use in disaster relief scenarios (part of Mike's ongoing [Camp Roberts] adventures); more about this in the coming months.
Our first [iPad app], for National Geographic; an [interactive globe] of the world draped with NGS' iconic cartography; designed with the help of longtime Stamen collaborator [Ryan Alexander] (whose amazing [stereographic streetview] is lighting up the internets lately); one big wet sloppy kiss from Stamen to National Geographic's cartographers.
Knight News Challenge: CityTracking
The CItyTracking project is in mid-swing, with http://dotspotting.org seeing active use. This year we're going to pull the pieces together that we originally [started the project with]: Walking Papers v2, Crimespotting v2 (in particular tying Dotspotting to Crimespotting), Tile Farm (which is already live in [stealth mode] and has some [new tiles available on Mike's blog]), and continuing work on Dotspotting. Everything's [available for download on GitHub], and we gathered 40 planners and visualizers at the inaugural [Data Visualization and Cities] conference.
We covered three live awards show with MTV in 2011: the [Video Music Awards] and [Spike Awards] in Los Angeles, and the [European Music Awards] in Belfast. Some of the visualizations were straight up tweet volume trackers, others mapped celebrity tweets to where they were sitting in the venue, and others tracked interest in photographs of things like Beyonce's baby bump. Unfortunately, Rachel only [met David Hasselhof] at one of the shows, so we're going to try and work on fixing that in the coming year.
Video Music Awards, August
European Music Awards, November
Spike Awards, December
California Healthcare Foundation
We designed two maps for the [California Health Care Foundation], a group that works to improve access to health care information in the state. The first, [All Over the Map], tracks the relative rates of elective procedures like [heart surgery] and [knee replacements], and the second tracks the rates of [surgical site infections] across the state. We're continuing to explore the possibilities of custom cartography with this work; the size of town names, for example, are sized not by how large they are but by [how much surgery is happening there].
A custom [cartographic and interactive suite] for Dutch broadcasting heavies [VPRO] (sort of a cross between Channel 4 in the UK and PBS in the US), to accompany the [Nederland van Boven] TV broadcast this year. The background maps are loosely based on the [toner cartography] we developed for the Knight News Challenge, with some snazzy additions (when did you ever see all-lowercase labels?) and icons as part of our continuing contribution to Nate Kelso's [Natural Earth project].
The Museum of Modern Art: Talk To Me
We designed and built the [online interactive bit] of the full-bore art and culture extravaganza that was the MoMA's [Talk To Me] show. Two Stamen projects, [Walking Papers] and [Prettymaps], were [ http://content.stamen.com/photos_from_the_moma_show part of] [the exhibition].
A data visualization for [One.org], tracking the G8 and EU's spending commitments to Africa. The site represents each member country as a [flag-filled circle], sized according to the relative size of that country's contribution.
Transit Maps for MIG
The [OneBayArea Travel Map] shows you approximately how far you can get from any point in the Bay Area by car, public transit, bike, or on foot, at [particular times of the day].
[Mondo Window], a site for in-flight wifi-enabled travelers, lets you look out the window of a plane and know what you're seeing on the ground. The site has been growing and changing since we helped launch it in April and was written up in the [New York Times] earlier this year.
PrettyMaps on 20x200
Last year's prettymaps project saw a different kind of distribution than is usual for us: you can order physical prints of several of the maps on Jen Bekman's fabulous 20x200.com. The prints are sized according to price, making art affordable for almost everyone. The project benefits the Open Street Map community too; all profits are used to support the Humanitarian OpenStreetMap Team.
SoftCities: Custom Map Textiles
Our second foray into product design in 2011 took a more, well, tailored turn: SoftCities pulls open data together with fashion design and lets people buy blankets and napkins based on Open Street Map data. The most exciting part about all of this to me (aside from a percentage of the profits going to the Open Street Map project, and that I get to work with my wife Nikki Gunn on a project) is that people are now contributing to OSM specifically to have those roads and stores show up on tangible objects that they can see and hold.
All right, that's enough of that. Happy 2012, everybody!
Aaaaaand, we're back, with another live twitter tracker, this time for MTV's Spike Awards, being held now in LA. Instead of celebrities, we're mostly tracking video game titles, and this means we can take a longer, leaner approach to the visuals than we normally can. And so: a full-width approach, with artwork from the games sized according to volume over time.
The interface gives a nod to the bzzzzt that shows up when something's wrong with the live feed in video games. The more you play with it, the worse this gets; kudos to MTV for letting us riff off of old video games in a presentation of this thoroughly modern phenomenon.
It's been a productive couple of months here at the studio, so much so that it's been difficult to find the time to blog about projects as they happen. We've added some new people, for one thing, and started to really get our hands around the operations side of the business. Which is great—but I'm now sitting on a serious backlock of communicating about the work we've been doing, and it's time to change that. I'm going to try and tackle these one project at a time over the next couple of days; hopefully I'll be caught up by the time we close for the last two weeks in December.
In late September we published some work with the California Health Care Foundation, mapping variations in Elective Procedure Rates across the state. In English, this means we looked at how likely people are to do things like have their gall bladders removed—surgery that's not done to immediately save their lives—depending on where they live.
It turns out that, all other things being equal, that there's quite a bit of variability across the state, depending on procedure. CHCF adjusts for demographics in a given HSA (Hospital Service Area), factoring out things like the age and income levels of the people that live there. Oroville, for example, has more than twice the number of gall bladder removals done than the statewide average:
And in Clearlake, you're more than 5 times more likely to have heart surgery than in the rest of the state. This report was picked up by several media outlets; turns out that Clearlake has an overenthusiastic heart surgery department (in addition to a population that smokes and drinks too much), but even factoring in people's lifestyle choices, the numbers just leap off the map:
Other procedures are less dramatically different from area to area, but there's still some variation, and these maps can start to serve as entry points into more detailed and nuanced conversations about why health care is so different from one place to another, even in an area as relatively homogeneous as the Bay Area. The whole point is to kill less people, and getting a grasp on how procedures vary from place to place is a good way to move the conversation further down that road.
The cartography for the project is custom, a modification of GeoIQ's acetate design that we built for them earlier this year. The sizes of city labels on most maps you see are based on the number of people that live there. Using Dymo, a placement script for map labels, we've gently subverted this so that the size of the town names reflects the number of procedures done in that town. By this measure, you can see that Clearlake, a small rural area, is basically off the charts:
OK. Killing less people. More to come.
Working closely with Dutch broadcasting heavies VPRO, yesterday we launched Nederland van Boven ("Netherlands from Above"), an interactive map of the Netherlands to accompany the forthcoming broadcast of a series of shows about this fascinating tiny country. As my friend Ben Cerveny is known to say: "New York started gentrifying in the 1970s, but Amsterdam started gentrifying in the 1790s," and the opportunity to design custom maps for a country that's essentially all infrastructure was one that we leapt at gladly.
The show runs in a series of episodes starting later this month, each addressing a different aspect of life in Holland. It starts with mobility, answering questions like "where can I live, if I work in Amsterdam and want to be able to finish the newspaper by the time I get to work on the train?" or "How far can I travel in two hours by public transport from Vlissingen?"
Upcoming episodes will deal with other ways of looking at the environment around you: examining the natural environment by comparing distances from buildings, open space, and the density of wild animals, the landscape of danger by examining rates of lightning strikes, flammable locations and the arrival times of ambulances, and the contours of the air around the country, looking at the density of birds, flght paths of planes and the highest places in the Netherlands.
The cartography for the project is custom-made for VPRO, designed to complement the channel's rich visual branding. Cities fill in based on a custom compilation we derived using a combination of NaturalEarthData and GeoNames sources, and and at lower zoom levels roads become visible and are drawn using data sourced from OpenStreetMap. On the most detailed zoom all roads are drawn and the arterial streets receive names. With roads come more place labels, now from OpenStreetMap and sized by population. Water bodies (black) are drawn using data from VPRO, as are park lands (black stipple pattern), airports, farm locations, pancake restaurants, neighborhood names, and zipcode shapes (the locations of pancake restaurants being as important to the Dutch as the locations of airports and farms, apparently).
The highlight layers are orange, because that's the national color of the Netherlands. Also, did you know that carrots are orange because that's the national color of the Netherlands; "in the 17th century, Dutch growers are thought to have cultivated orange carrots as a tribute to William of Orange – who led the the struggle for Dutch independence." So: orange maps over custom OpenStreetMap cartography, a client who wanted to tell a story and was willing to stretch what it means to design a map, and a country made of canals and land claimed from the sea. Hoera!
And now, on to the rest of the rainbow:
It's been a busy summer, and we've got a few things to share.
We're hiring a Developer
We're ready to hire again! If this is you, or someone like you, get in touch, wouldja?
Stamen's work is a creative fusion of design and technology, front-end and back-end. Behind the maps and visualizations in our projects are rivers and streams of changing information, and the practices supporting these flows are themselves in a state of constant change. We're looking for a candidate who can work with us in our San Francisco studio to advance the state of foundational technologies supporting the collection, processing and publication of big, live data, supporting a fast-paced client-focused production environment.
You'll be working with a small team of designers and engineers led by a creative director who will be looking to you to make their ideas feasible. You're excited by the possibility of cutting and bending data to fit it through the thin straw of the internet. You can look at a source of information and model it as resources, rows and columns, messages and queues. You have the programming experience necessary to write data processors and servers, the system administration experience to inhabit and actively guide a constantly-shifting technical environment of free & open source software, and the patience & grace to grant that PHP and spreadsheets might be appropriate tools when circumstances require the quick and the dirty.
You're up for the excitement of a continuous flow of new projects, and you're willing to try new things for the sake of learning and fun. You're able to work well with multiple inputs from a variety of sources: creative direction, technical direction, production expediency, and client feedback. You're friendly & courteous, good at finding ways to have fun under the pressure of deadlines, and you're OK with our carefully-selected and well-managed clients having the final say.
There are some other, somewhat similar positions posted at FlowingData, so if this sounds interesting I'd encourage you to check them out as well. More on the position at http://stamen.com/hiring_developer/.
MTV #VMA 2011
Shawn, Mike and Rachel headed down to LA for our third Video Music Awards project for MTV, a real-time Twitter visualization that was used alongside and within the live TV broadcast. One of the great things about working for MTV is that they're always looking to do innovative things with their projects. In this case that meant a few new things (aside from the complete visual re-design):
- we shifted the display technology from Flash to HTML5 (sorry, Adobe, we loved you long time)
- Paparazzi, which tracked the live popularity of retreated celebrity images, including Beyonce's by-now-legendary announcement of her baby bump, which quickly took over the whole of time and space
- since we knew what celebrities were there, where they were sitting, and what their twitter accounts are, we could build a Hot Seat visualization of who was saying what and when
- the work was used as a backdrop to the show on the main stage of the event
The visualization is online at http://vma-twittertracker.mtv.com/live/.
A nice side effect of using HTML5 is that the project works on mobile devices as well, which lent a nice bit of contrast to seeing the same designs on a 4" iPhone screen and a 40' high display in the Nokia Theatre in Los Angeles:
We Can Create, Auckland
In the middle of all this excitement I was on the other side of the planet in Auckland, New Zealand at We Can Create, a design conference put on by THECHURCH, talking about open data and exuberant cartography and iPad apps and all the usual goodness.
A highlight was being able to spend time with two of my long-time design heroes: Frank Kozik, whose amazing blend of punk rock and up-front commercial sensibilities puts him near the top of any list of designers to admire, and Thomas Roopert, whose amazing history with antirom and tomato (I know, right? how much cooler can you get) have landed him at a really interesting place taking advantage of the overlap between social media and television at the Rumpus Room. And meeting Morag Meyerscough and Eike König was a treat I won't soon forget; it was basically super fun to be in a room full of amazing design talent and dream about the future. I'm grateful in particular to THECHURCH for putting on such a classy show, you guys really have your act together.
State of the Map
Mike and Aaron spent this last weekend at State of the Map, the annual OpenStreetMap conference in Denver. You can take a look at Aaron's talk at http://sta.mn/hqk, and here are a couple memorable quotes from twitter about their talks:
schuyler: "If we held language to the same standard of accuracy as we hold maps, we would not have literature, humor, philosophy..."
StevenFeldman: "I don't want to live in a world where the pinnacle of our achievements are driving directions," says @thisisaaronland #sotm11 < Me neither
DeadlyiCoN@schuyler @thisisaaronland I can't imagine saying "this is one hilarious map!" and it being a good thing
Someone also seems to have used Soft Cities, my wife Nikki's new venture making custom blankets and napkins from OpenStreetMap data, in a slide at the conference, so if anyone out there knows who's presenting in this photo, would you let me know?
Our friends at MySociety have gotten further along in making the Mapumental work that we did with them live-er, and are offering limited-edition prints and embeds of the travel time isochrone maps. It's been a long time coming, and working with Tom Carden on the ways in which the data and display layers fit together was a really foundational time for the studio which continues to resonate forward, so I'm delighted to see this project start to see some sunlight. Some samples of the maps:
And that's what's going on!
The hurricane tracker we designed for MSNBC a few years ago has been pressed back into service, with Hurricane Irene barreling up the East Coast with 115mph winds lashing the sea just east of Fort Lauderdale:
The crazy thing (for me, an ex-New Yorker) is that it looks like they might actually get some pretty serious winds as far north as New York:
The World, Stamen's first iPad app and our first project with the National Geographic Society, is available for download from Apple's app store today.
The heart of the app is a globe of (you guessed it) the world, with overlays of National Geographic's unmistakable cartography available for the different parts of the earth. Each of these maps can be layered over a reference, terrain or ocean globe, and you can mix and match the different styles as you like.
National Geographic has their act together in the map department, as you can imagine, and it was a great pleasure working with some of the best cartographers around (and classy too: I got a yellow border pin for my suit lapel as part of the deal). The maps are up to date, and just before launch we were glad to be able pull in a map for the newly formed Republic of South Sudan (which Google doesn't show yet on their maps almost a month later, nyah nyah):
NG's mapping style also allows for some really wonderful cartographic moments, like this example of Taumatawhakatangihangakoauauotamateapokaiwhenuakitanatahu spilling out into Hawke's Bay:
It's easy to lament the move to online and digital mapping as being a move away from the tactility of paper maps; to pine for a time when decisions about line weight and printing layers mattered. One of the great pleasures of working on this project has been that the app allows for investigation of the cartographic decisions that National Geographic's map makers made even beyond what would be available in print without a loop. Jess Elder, our project sponsor at the Society, agreed early on to supply us with maps that had been generated at a minimum of 600dpi and in some cases as high as 2400 dpi (paper maps are generally around 300dpi).
So without too much effort you wind up being able to really get in there and see the kinds of decisions that go into the distinctive nature of these maps:
There's alot else happening in the app—nations, maps, and pictures too, and especially the ability to tweet, mail and post screenshots directly to Facebook—but I'll save those for a later post. From my perspective the project is basically one big wet sloppy kiss from Stamen to National Geographic's cartographers.
This project wouldn't have happened without the hard work of Ryan Alexander on the 3d spinny map action and Zain Memon on the back end. We usually don't call out individual people at Stamen—we're a collaborative studio and everyone has their role to play in contributing to each project—but in this case I'd be remiss if I neglected to mention the hard work that Jeff Easter put in to both learning iOS from scratch and pulling the whole experience together.
You can download the app here.
One of the great things about Eric Fischer's map experiments on Flickr is that he actually takes the time to geolocate everything. So if he's making, say, a map of where people tweet vs where they upload photos in Montreal, the photo will tell you that it was taken in Montreal. Or if it's he's scanning a plan for the freeway design of South Valley Freeway, Highland Avenue to Day Road (1959), it'll actually be in between Highland Avenue to Day Road.
Which means we can make maps in Dotspotting that look like this:
Eric Fischer's 'See Something or Say Something' photos from Flickr on Dotspotting
And like this:
Trafficways Plan for Santa Clara County California, January, 1959 by Eric Fischer on Dotspotting
(thanks to Sha Hwang for providing the impetus for this post)
There are three basic parts to working with online representations of urban civic data in Dotspotting: coallating the data, manipulating it, and then sharing and publishing it. Up until now we've been focused on the first two, which makes sense: obviously you need to be able to gather and work with the data before you can share it. Today we're announcing the inclusion of the project's most requested feature: embedding the maps that people make into sites of their own.
The "embed/export" feature has been reworked to include the ability to generate html code that you can configure to your own specs, depending on how your site is formatted. Basic embed code is available in default mode, which will generate a map that looks pretty much the way that it does on Dotspotting:
CALIFORNIA STATE PRISONS on Dotspotting
There are a couple of different options in embed; so for example you can swap out the normal toner cartography for Bing's new (awesome) map tiles:
CALIFORNIA STATE PRISONS on Dotspotting
We've been working with Mission Local, a news organization that reports on our home base of the Mission District, to find ways to take the lessons learned from the Crimespotting project and give this ability to local publications and advocates. The crime theme we've developed with them lets you generate maps that look like the one below, if you provide a "crime type" value in your data:
crime June 21st-28th updated on Dotspotting
And my favorite so far is the photo theme, which takes a 'flickr:id' or 'photo_url' field from your data (say, a set on flickr) and generates a visual mapping of where the photos are:
Dots on the pavement from flickr on Dotspotting
We're planning on releasing more of these as time goes by; if you've got ideas for a theme you'd like to see, please upload some data and get in touch!
Aaron went to the opening of Talk to Me at MoMA last night, and sent back some lovely
photosynths autostitches and photos of the event. I've been back here in San Francisco working on the exhibition website and other things so wasn't able to attend the opening, but I'm looking forward to seeing it when I'm in New York next week. In any event, some photos of Walking Papers and Prettymaps, in the show. Hooray!
Photos by Aaron.