By Eric and Beth, cross posted from Markets for Good
This post is a check on both our ambitions and our processes. The uses of data visualization are different according to whether the goal is to communicate a specific thought for a single moment, e.g. as a poster, or the goal is to provide a durable tool for social change. It should be mighty safe to say that we want the latter, i.e. to take full advantage of the ability to create dynamic, interactive, real-time stories that make data plain and useful. Eric Rodenbeck, CEO & Creative Director, and Beth Schechter, Education and Outreach, Stamen Design offer a fundamental insight to inform data strategy: think about the future – how you will maintain your visualization outputs and capabilities (both human and technical) on a shifting landscape.
The data visualization community is a large, diverse, and growing one. As different as we all are, there is a vein that runs through all of us: earnest pursuit of the truth, love of information, and desire to share it in a beautiful, clear, understandable way. It is from this desire that the data visualizers produce some of their most impactful work, like Periscopic’s U.S. Gun Deaths in 2013, or Hyperakt and Ekene Ijeoma collaboration The Refugee Project. For us, one of these works is Crimespotting.
Crimespotting began as an independent guerrilla project, organizationally attached only to Stamen. We realized that it was important for residents of Oakland – a Bay Area city with a crime-addled history – to have more information about the crime in their neighborhood than just seeing police cars whiz by, sirens ablaze. Former Stamen partner Mike Migurski started scraping the Oakland Police Department’s API and sorting police reports by time, block, and report type. After Chauncey Bailey, a prominent local journalist, was assassinated in broad daylight in downtown Oakland, we decided to make this data public on an interactive map.
Not long after launch, two things happened. First, the City of Oakland turned off our access to their servers, which effectively shut down the project until we were able to connect with the city’s crime data department, who eventually turned into one of the project’s biggest supporters.
Second, the City of San Francisco asked us to create an officially sanctioned version of the project for San Francisco, which we did do. The San Francisco instance was launched in 2009, with Mayor Gavin Newsom at our side.
All of this happened over half a decade ago. In the years that followed, the project apexed with tremendous impact and support – including coverage in the New York Times and this video with Hans Rosling. But over the years, the project started wavering. Oakland’s API has sputtered to the point of being nonfunctional, rendering Oakland Crimespotting totally spotless. (see below) Although the San Francisco version has fared slightly better thanks to Stamen partner Shawn Allen and Jeff Johnson at the SF Department of Technology, it’s also broken several times. Only in the past couple of weeks have Shawn and Jeff found time to work on fixing it amid a medical leave. If not for these volunteered efforts, the San Francisco version would be as comatose as Oakland’s.
Watching the static nature of this project play out is painful, as is answering countless emails asking about why they are broken and when they will be fixed. We want to say that it will happen soon, but we know that reality dictates otherwise. We also know that it’s no longer acceptable to tell the public, “Sorry, it’s just that the code is creaky and the database is full.” We’ve come a long way since 2007, and the public expects better. They expect it to just work, and rightfully so.
I tell you this story because at this point it’s as archetypical as [a damsel in distress]. Too often we build works like these, only to see them falter and fail as browsers upgrade and technology evolves.
If you build a bookshelf, you take the time to design it once, to build it once, to finish and install it once. Dynamic data visualizations and other Web-based works are not quite the same. They’re more like plants, sprouted from the seed of an idea. Data visualization in particular also has a beautiful blossoming to it, one that happens naturally in response to the data, illustrated as pixels and color.
If you plant a flower in a garden and then never give it water or light, it will in fact die. Unless, of course, it happens to placed in just the perfect spot, in which case it will need to be pruned. Either way, some kind of tending is always required.
We don’t always think of digital works in the same way, perhaps because their metaphor of creation more closely resembles that of a built object, like a bookcase or building. But even buildings need maintenance, and after so many years, the shelves on the bookcase may falter and need new ones. We need to be more conscious about this aspect of dynamic data visualization, at the outset.
I urge of all our clients, in particular those who are making works for the public (which is most of them), to consider plans for maintenance. Luckily a lot has changed since 2007, and now more of our clients have some kind of web or technology team to take this work on. It’s part of their operating strategy. Clients in the nonprofit and municipal centers typically do not have those kinds of resources, and if they do, they are usually limited. What’s troubling is that these are the clients typically commissioning some of the most socially relevant work, yet their funding models typically only call for the build, and nothing beyond that. Nonprofits have the advantage of being able to fundraise (which is a TON of work), whereas governmental departments must rely on strict, slow process and very limited budgets.
If you are one of these bodies and you want to make socially relevant work, then we urge you too to think about how these works will live beyond the build and to come up with a plan (or at least funding model) for how it can be maintained. If not, all that work and money and time is going into something which is sadly, inevitably doomed. It’s not enough to visualize data, or to make it public: as data visualization moves from a flashy experimental genre to one that the public relies on, we need to come up with solutions that let them grow and change over time—to take the time to water and prune, just like we do our gardens.
When I first discovered Pinterest about two years ago, my heart exploded and my mind was blown in the best possible way. One simple interface allows me to visually browse all of the beautiful stuff I find on the internet and beyond, and to organize it how I please. It feels friendly & welcoming—a place where I know I’ll find good things to look at and that I carefully put things I want to use later.
So you can probably imagine the heart-explodiness that’s rolling through my corner of the studio this evening, with the release of Place Pins, featuring a beautiful new map designed by none other than us! Place Pins let you map the things you love, near and far, making the pins more actionable and bringing out the explorer in all of us. You can view and create these Pins on your desktop or on mobile, when you’re actually out and about exploring. You can also collaborate with friends and family, using it to plan your next vacation or a tour of your favorite architecture.
Making a map fit for this kind of activity was a fun one. Pinterest loves color and texture and a feeling authenticity, all of which you might find in a paper map. Our house style, to the degree that we have one, tends to veer towards the bright and sparkly, and this design challenge was the perfect opportunity to break from our mold and try something new. Which we did, using rice paper texture, subtle color washes, and a mixture of unicode and hand-drawn fonts. We’ve also added some extra touches, like using OSM ids to introduce just a bit of entropy into the angle of all of the place labels to introduce some variety and get away from the hyper-precise default modern way that these things tend to settle towards. If you look carefully you'll notice that the spacing of the letters on street labels varies a bit from road to road. This is an intentional gesture towards making maps more human. The result is a map that (we hope) has a bit of soul and variety to it, not just another one-off, and is just asking for pins to be put all over it.
I’m also pleased to announce that for the first time we’ve shifted the backend infrastructure burden of one of our projects to that developed by our colleagues at Mapbox (you can read their take on all this here). The whole process of getting this thing online and polished was incredibly smooth and hassle-free, totally different from the wailing & gnashing of teeth that historically has accompanied the release of our worldwide maps. Honor is due to those guys for solving a hard problem and for making it possible for this kind of project to flow smoothly. I’ll follow up in a separate post about some of the finer details we included in the project and some ways that I think things could get even better.
All in all, we’re delighted to have been asked by Pinterest to participate in this project, and we hope the results are to your liking. Let us know what you think, and we hope you’ll share your maps with us and others. And happy Place Pinning!
Here's the city view of Amsterdam. At this particular zoom level, the small details of roads and buildings amplify the textures that are being used for land and water.
The Bay Area. At this zoom level, we start to see the emergence of parks, as well as major roads. These elements, along with the textured waterways, reveal many layers of detail that work together quite beautifully.
The street level view of Boston is shown below. Here we see a nice combination of road labels, buildings, parks and waterways.
At the country level, a large portion of Europe is captured in this image. The forests become visible, giving the landscape another layer of texture.
Karlsruhe, Germany. At this street view, we see several detailed components, such as parks and foot paths, rail lines and building density.
Hong Kong captures one of our main design goals with the Pinterest project. The "hand-crafted" look and feel is quite evident with the contrast of textures, especially where the water meets the land.
Manhattan and the surrounding boroughs. Like the image of Amsterdam, this zoom level captures several detailed elements - roads, highways, waterways, buildings and parks.
"In September 2013, students in Webutuck High School art classes participated in a mapping workshop where they made maps of their lives--things they did, things they liked, things they didn't like, and things they'd like to see. They drew the maps on Field Papers, which were scanned, edited, and turned into geotiffs and markers. This is what they look like all together."
"Thanks to The Wassaic Project, Mr. Fitz at Webutuck High School, and Stamen for making Field Papers, seriously.
Maps and kids drawings FTW!
The Humanitarian OpenStreetMap Team (HOT) has been doing incredible work in coordinating the mapping the parts of the Philippines affected by Typhoon Haiyan / Yolanda. I encourage you donate to support their important work here. Our Field Papers project is seeing active use in this effort, with 256 atlases made in the Philippines as of this writing. You can contribute to the project starting here.
Most maps of sea level rise are underwhelming, visually. By focusing on the land that's shrinking as sea levels change, they give the impression that there's lots of land left over, even after the oceans change the shape of the coastline.
Climate Central's new Surging Seas project (available in New York and New Jersey to start) turns this issue around by placing the visual emphasis not on the land that's left over, but on the land that's lost as the ocean rises. Ten feet sounded like an unrealistically high number when we started the project, but Sandy's storm surge of 13 feet changed our minds pretty quickly.
New in this version is the introduction of two new datatypes, also emphasized according to the level of sea rise: population density and social vulnerability. So in this view of Manhattan and eastern New Jersey, you can see that the Lower East Side, as well as Jersey City, both have a high number of people who'll be affected by the change:
In sharp contrast to one another, though, the Lower East Side contains a high number of socially vulnerable people, whereas in Jersey City people are generally less unprotected (the yellow bits near the harbor):
Here's what the Rockaways look like as sea level rises in high- and low-population densities near the beach:
Big data is a big deal, for sure, but small data can be beautiful too. A work of art, even! We’ve been exploring these themes with Wong Doody Crandall Wiener in a new data viz piece in the lobby of Cedars Sinai Medical Center West Hollywood.
To house their most state-of-the-art research and outpatient care, Cedars Sinai built a new Advanced Health Care Science Pavilion. They envisioned an art piece that could speak to cutting-edge technology and, at the same time, be soothing for visitors and the people who work there. It needed to be both intriguing for the doctors and nurses who’d pass it every day, and accessible for the patients seeing it for the first time.
We loved the idea of using their data sets to depart from by-the-numbers visualization to create a work of data art. The video above gives you an idea of what you experience drifting over six large monitors across from a bank of ground-floor elevators.
The data set Cedars gave us tracked around 140 monthly metrics from different departments. Geraldine and Zach took that data and assigned each metric a line, with denser lines representing higher numbers. The circles and wave-like motion are designed to project a sense of calm without being too "institutional."
Based on feedback from Cedars Sinai, for the final piece it was narrowed down to just 12 data points per year, including: number of babies born, volunteer hours and pints of blood donated. Now we had a much smaller data set and these higher-concept numbers would be easier to digest while you're waiting to be whisked up to, say, the Heart Institute or headed to the cafe.
Then it came time to bring it into the real world, which is kind of new territory for us, since most of our work (when it's not turned into a tablecloth or napkins) lives on the Internet.
Zach spent a few days on-site ensuring that the final result would sing. First he had to get it to work, finding himself on that awkward battleground where the design studio Mac world confronts a real-world PC environment. There were a few skirmishes over HDMI cables and countless diplomatic missions to a nearby Apple store, but he found common ground and made it work. (OpenGL also helped.) He also did a bunch of walk-bys of the six monitors at different times of day leading to a few tweaks in speed and color to improve the overall flow.
"When I started the installation, people passing by would see me draped in cables and ask if I was making the world's biggest Xbox or something. Then when it was done, they would stop and say 'Dude, that's awesome!' You don't get that visceral reaction to online work so much—at least, not so you can hear it in person."
We put together some experimental visualizations earlier this year for quantified self device hot shots Jawbone, showing the behavior of several hundred TED attendees during this year's conference in Monterey. We worked with their data team to gather up the activity that each of the devices send back to the service, and after carefully combing through to make sure that we respected people's privacy, combined them into a single visualization that updated throughout the conference and represented the collective behavior of this self-selecting cohort.
One thing you can immediately pick out is that there are patterns in the behavior of people as they filter in and out of sessions; similar to the way traffic snarls move backwards along a freeway, but in reverse. People trickle in to the starts of talks over about a ten minute period, and you can see that quite clearly, and then stand up en masse as the talk ends and they filter out into the halls.
As usual, we started from the data instead of comps, and very quickly hit on the idea of a ring of people's days, organized by when they wake up. Red is awake, blue is asleep, and each ring is a day. The closer to the center you are, the earlier you wake up:
Looking at the edge of waking makes it clear that for lots of people, the passage from sleep to waking is far from linear—this is why lots of these lines turn from red to blue, and back again:
We broke the TED audience into a variety of cohorts: light sleepers, heavy walkers, 40+ and so on, and designed an interface to let attendees switch between them to get a better sense of their activity, both individually and collectively.
We've been working on designing a bike map for the City of Copenhagen, the number one bike capital of the world. Emil Tin, IT and Process Specialist from the City of Copenhagen, has been giving me frequent tours on our weekly Skype calls, going over every map feature that would be most helpful for navigating the city on a bike. Having only experienced biking in San Francisco, I quickly discovered that in Copenhagen, the biker's experience is quite the opposite. I learned that, in Copenhagen, cars and bikes coexist harmoniously, and that highlighting bike lanes is not as important as it would be in San Francisco. Cars are accustomed to bikes and while there are designated bike lanes and raised curbs, most roads are bikable in the city of Copenhagen. It really is bike heaven. It's irresistible to bike! I wish I could say the same for San Francisco.
My first task was a broad color exploration of color possibilities with the idea of highlighting a line. Below are two examples:
I also tried the highlight effect as a halo:
A few weeks later, we finally arrived at this color scheme. Clear, minimal and bright. The green and blue would fit perfectly as well, since we wanted to give prominence to green and water areas, two key features that Copenhagen bikers use in navigating around the city.
Knowing what to display and what not to display (or visually minimize) became rule #1 in creating a clear, concise and readable bike map. Below is an overview of key features on the map.
Bike Lanes and Tracks
I ended up using the halo highlight effect for bike lanes and tracks in yellow. This solution works particularly well for highlighting various road types, with road line-widths varying for each type. It's a clean and clear solution, by avoiding layering colors on top of one another, thereby avoiding the mixture of colors whenever adjusting the opacities of features. Below are the two types of bike lanes highlighted on the map:
- Street with a painted line
Tags: highway=primary, cycleway:left=lane, cycleway:right=lane
- Street with a raised curb
Tags: highway=primary, cycleway=track, cycleway:left=track, cycleway:right=track
- Purple - National Cycling Route
- Blue - Regional Cycling Route
- Green - Local Cycling Route
Read more about cycle routes
No Access Roads
Push Your Bike
Bike Obstructions or Difficult for Bikes
The gray dotted lines indicate cobblestone streets.
Bike barriers are indicated by 2 diagonal lines. Especially important for cargo bikes.
BIKE RAMPS ON STEPS
Steps are in orange. Blue indicates that a bike ramp is available.
Our goal here was to indicate one-way streets for bikes only. For this we followed the same logic IBikeCPH uses in their routing code. Read more about one-way here.
Thin gray lines indicate footpaths. Dashed lines show you paths where you must push your bike.
Check out the full map online at http://www.ibikecph.dk
We have a billboard!
Hear this: the billboard space at 14th and Valencia shall forever henceforth be known as Stamen Watercolor Billboard. Working with an anonymous benefactor, we generated what I think is the largest of our maps so far: 25 by 12 feet, big enough for our whole team to cavort along. It's right down the street from HQ in the sunny Mission, which means it will probably last a day at most without being tagged or otherwise messed with, but for now it's hopefully making the neighborhood we love and work in a little snazzier. Congrats to Geraldine and Zach for making work that can beautify a city street!
I'm pleased to announce another product offering from Stamen; to satisfy your map object cravings, we're partnering with the smarties at Dodocase to bring you custom wooden iPad cases, with maps from the maps.stamen.com project on the inside.
For now, they're available in two styles: a modified version of Toner called Toner-lines and Watercolor, and in three cities: our hometown of San Francisco, New York, and Los Angeles. We're starting with these for now, and hope to iterate with new styles and cities in the near future.
So far New York is the clear winner sales-wise, with San Francisco a close second and LA lagging farther behind than we were expecting. I think this is because NY and SF have the benefit of clear geographic boundaries and classic coastlines; in order to get all of LA in the frame you have to zoom out pretty far and it doesn't look like much. So I'm looking for feedback on what a better view of LA would be—maybe I can get some enterprising mapmakers to head over to maps.stamen.com and build me an image of your LA? And if you'd like to see other cities in a Dodocase, you know how to find us, so please let us know.
(Indicentally, savvy viewers will note that the case with San Francisco in it actually has an iPad with a background image of the eastern side of the city itself, just to give you a sense of the level of detail the good people at DODO bring to their endeavors)
The partnership with DODO is giving me something I've wanted for a while now: the ability to set a process in motion and then make changes to it depending on what happens in the marketplace. What we can do now is release a product, in fairly short order see how the different products are doing, and adjust accordingly. So that's fun.
and here's Watercolor:
And check out that ribbon!
They're available for the iPad mini, you can customize them over here, and there's an interview with me on the Dodocase blog. Go DODO!
Good-looking maps used to be the domain of experts. That’s been changing quite a bit in the last few years, and it’s easier than ever now for developers to access mapping data (the recent State of the Map US conference was a great place to hear about this). Never content to leave well enough alone, we thought we’d kick this sideways a bit and make it easy for the rest of us to make some great stuff.
We call it Map Stack. It's a bit like Instagram for maps.
The maps.stamen.com project was designed to let people easily use Open Street Map data in their own applications, and to provide well-designed map styles that would raise the bar for what people expect from open data. We're taking this a step further now, with http://mapstack.stamen.com/. Map Stack is about putting your creativity on the map, making it radically simpler to design your own map styles, without having to know any code, sign up for anything, install any software, or do any typing. We provide different parts of the map stack: backgrounds, roads, labels, and satellite imagery and straightforward controls for manipulating things like color, opacity and masking.
Watercolor punched through by satellite imagery from MapBox.
You don't need to sign up for anything, know how to code, or know much about cartography to make great looking maps. You just need to decide where in the world you want to go, a web browser, and about five minutes.
So now you can make all kinds of cool maps — say, this map of the Pentagon (which appears aglow with all the PRISM data flowing through it) — in no time:
We’d originally talked about calling the project the “map sandwich,” since it’s all about the stacking of layers of maps. You know, like a sandwich! The first WhereCamp DC used a sandwich as its logo and the idea stuck. From there we went to “delicatessen,” 'cause that's where you go to have your sandwiches made. (We went through lots of names - “mappuccino kundalini” was a favorite for a while.)
The deli name went away but the idea of a neighborhood, brick-and-mortar shop with regular hours stayed. We’ve decided, for the sake of Seth’s sanity, that Map Stack will be open for business Monday to Friday, from 11 a.m. to 5 p.m. PST until we can sort out what kind of infrastructure the project will need given the level of interest we’re seeing. You can tweet us during those hours with questions or give us a shout out to show off your smorgastrata at: http://twitter.com/mapstackStamen.
In its first day, viewers to the site generated about 10GB of map tiles—there are 10GB of new maps in the world! Which is great, but that’s a lot of tiles. We’re not getting paid for this—yet—and part of the project is figuring out what the business model might be.
A few initial ideas: we might offer the map backgrounds as a hosted service, we might sell prints (like we do via Soft Cities, 20x200 (sadly down but apparently coming back soon), and as of today, DODOcase), we might integrate it with Pinterest or Twitter or Facebook better (there’s a conversation about this very thing happening on Twitter right now)—we’re not sure. One thing we do know is that the best way to find this information out is to release projects into the wild, so!
Here are some examples, a short menu of maps that we and others have worked up to get you started. You can also view a gallery of images that people are creating here. Enjoy!