Stamen is a design and technology studio in San Francisco.

You are at Stamen's first blog, mostly written by Eric Rodenbeck. Visit our new blog! or come visit us at our newly designed stamen.com.

Contact Stamen, or follow us on Twitter

Recent blog posts

Oct 29, 2012

Stamen at State of the Map US and NACIS

I went to my first Open Street Map conference recently—State of the Map US, in Portland. Stamen was one of the conference sponsors, along with MapBox, and ESRI and TeleNav, among others, and it's great to see and be part of the different industries come together to support this effort. I went with Mike and Nathaniel, who are more directly involved with this community than I get to be, and those guys also stuck around in Portland for North American Cartographic Information Society annual meeting the following week.

Open Street Map is getting super interesting, with more and more companies and people signing on to use and contribute to the service. Carl Franzen wrote a three-piece article on the conference, starting with"The New Cartographers: OpenStreetMap’s World Takeover," and it was great for me to see the different forces at work in the OSM community up close and personal:

"Nevermind Apple’s maps misfire, the free, volunteer-made OpenStreetMap, may end up reigning supreme anyway, as companies increasingly choose it for map data over Google. But as the project grows, it’s becoming harder and harder for its members to agree on what direction to go in next.

OpenStreetMap, a free crowdsourced online world map started eight years ago, has seen its ranks swell to over 800,000 volunteer mapmakers around the world — 300,000 in the last year alone — rapidly becoming the go-to source of map data for successful tech brands including Apple, Foursquare and Wikipedia, as well as for government agencies like the National Parks Service, all of whom are wary of Google’s decision to begin charging for heavy use of its Maps API starting in January 2012.

But as the project grows and matures, it’s facing a whole new set of challenges, the biggest of which is the question of whether or not to commercialize and move away from its open source roots.

The tensions facing the community were on full display at OpenStreetMap’s annual “State of the Map USAconference in Portland, Oregon from October 13 through 14, a frenzied, jam-packed series of over 50 presentations and countless other informal talks between avid geographers and programmers who sprawled over a few generally overcrowded rooms at the Oregon Convention Center, fueled by coffee (beer at night) and their boundless enthusiasm for using and improving the vast and increasingly vital public map."

It's a robust (and growing) community, as you can see here (in more ways than one - look closely and you'll see my son on my lap among the babies in attendance):

Photo by Justin Miller on Flickr

Nikki was a hit too with her watercolor stockings and blankets (coming soon!) based on Open Street Map data and meshu necklaces. A big year for custom objects based on open data!

Photo by Justin Miller on Flickr

Mike and Nathaniel took the stage to demonstrate some forthcoming client work we're doing, extending the currently US-only terrain maps from maps.stamen.com to cover the whole world:

And Nathaniel took some time to do a Hangout with James Fee, talking about the San Francisco Giants (w00t!), Stamen, Natural Earth, SOTMUS and NACIS.

Oct 17, 2012

Facebook: Evolution of the Flowers

by George

This is a follow-up post about the piece we launched last week on Facebook Stories called "Data Visualization: Photo-Sharing Explosions." The project took us a little over 2 weeks from start to finish, and we wanted to show you a bit about how we got to the final piece.

The Facebook team asked us to visualize the remarkable volume and virality of sharing of some popular images, with hundreds of thousands of shares happening over just a few days. Since so many people are involved, we came up with the idea of representing people as particles in a big system. After recent R&D, we realized pretty quickly that WebGL would be a great fit for showing this volume of activity.

Sketch, Scribble, Select

When we are handed a new dataset to work with, it's imperative to begin sketching with it as soon as possible. Drawing pictures with the data can tell you all sorts of things, like the overall shape of the dataset, where there might be gaps or anomalies, and pointers towards which axes you might begin hanging things from to illustrate one element or another.

Here are a couple of screenshots and a video of Zach's first WebGL sketches of sharing activity for a single test image:

Even at this early stage, the "user as particle" concept felt right and continued to weave into most of our sketches after that. As we would discover, one of the challenges we faced was giving each person/particle a starting position that was meaningful in some way, not just everything emanating from the middle out. The data laid out a basic idea of generations of sharing through a social chain too, which we could exploit for better positioning.

Data Shape & Movement

Rachel came at the data from another angle, graphing all the shares on a variety of axes, to get a feel for its grain and distribution. Here you can see a graph that maps each time we see a new person sharing along the x axis (time), and shares originating from that person dropping down along the vertical axis. Lots of drops means lots of resharing.

Now that we had more of a feel for the overal sharing trajectory, we started working on motion, movement and feel. Rachel's first motion sketch was super exciting, and left us all giggling and gasping around her monitor. Look at what happens a few moments in:

I also really liked the "relief" of the shape left behind once the animation had run through and faded out. We ended up carrying this idea through to the final piece, where once the animation had played through, you're left with a snapshot that encapsulates all the activity you've just watched.

Getting It All Out There

The particles' movement was more or less random at this stage, so we set to work on hunting for variables we could use to inform the movement in the piece, perhaps to control velocity or direction of the particles. We had some basic anonymized demographic data like facebook age and friend count at our fingertips, which Shawn set about brute-forcing into a bunch of scatterplots in all combinations, so we could look for bumps or bunches or gaps.

Laying things out like this lets you examine the texture in the data, and perhaps even have a "what the heck is that?" moment. Even though there were a couple of data hillocks here and there, we didn't find any ZOMG bright spots for this single test image's data. What we were able to do, though, was to cut away a bunch of demographics that weren't at all interesting and highlight those we thought might be, like Facebook age (age of the account), and user age (as specified by the user), friend count and share count.

George Takei, Wikimedia Commons image
In the meantime, Facebook has settled on mapping the activity around 3 images shared by George Takei. He's incredibly popular and prolific on Facebook, with a ton of friends, and loads of content. While the 3 images themselves are, shall we say, possibly not going to end up in a museum, they are amazingly viral, with up to 900,000 shares or so for "Famous Failures." We took the demographic data for the 3 selected images and ran it through Shawn's scatterplot tool. Incidentally, we'd also refined the fields that we thought were interesting to plot like this, cutting out the combinations that seemed like noise.

You can see from the animation that each of the images had mostly similar patterns in these scatterplots, even with the differences in the number of shares per image. What we did notice was that the age of the sharers was slightly different amongst the 3 final images we'd chosen, so we explored a direction using age as a positioning device. You can see that come to light in the visualizations below, where we spawned branches based on the sharer's age (young on the left, old on the right), instead of from the center (or a node in a sharing branch) as before. We also introduced 2 colors into the mix, one for each gender in the dataset.

This same idea is rearranged slightly into a waterfall-y layout, where you can start to see the generations of sharing come to light as well, as we begin to look into color variations over time. The longer the sharing generation, the closer to white:

Particle Movement, Curves, Speed

Now that we had the basic idea in place, it was time to start refining the movement of the piece. Here is a series of riffs:

Particles on tiny curls:

Straight lines, and making the particles larger over time:

Curves on the paths:

And this crazy thing:

Here's an experiment with curving lines, redder tones, and eventually cyclical paths:

Inside, out:

The voluminous mass:

This last sketch was getting very close. Close enough that we chose that model to refine, in terms of particle motion, and finally color.

The "Arabesque" looked lovely, but had lost the feel of the branching in each generation:

The branching:

Blended together:

With more emphasis on branching and fewer inward-turning lines:

So we folded those all together into what was very close to the final "flower":

Color

It's not often that the Stamen design department swoops in at the end to "tart something up," but in this case, it worked just fine. Our magical color wizard, Geraldine, then worked within Zach's code to find the right color combinations for each piece. We wanted lighter backgrounds to try to emphasize the depth of each flower, and had our two gender colors to assign, each reaching towards white as the generation aged. It's definitely more efficient when you reach a certain point in development to make tweaks directly in code, as opposed to working in Photoshop...

And, whoosh! Just like that, we were right at the finish line. The motion was looking great, and we were all still very excited with ooohs and aaahs as we played each iteration. Zach and I sat together to gently tweak the final motion, adjusting things like particle size over time, and the amount of curl on each generation until we were happy with it.

So there you go.

And, here's the Facebook Stories page where you can browse each of the final pieces!

If you're interested to read more Stamen process blog posts, try the Esquire Where The Maps Come From post, or our various Watercolor map expositions. You can also browse other videos on the Stamen Vimeo page.

Oct 11, 2012

Facebook: mapping how viral photos spread

Following up on last month's map of the world's friendships on Facebook, we've released another visualization of relationships across social networks today. Called "Photo-sharing Explosions," these visualizations look at the different ways that photos shared on George Takei's Facebook page go viral once he's posted them.

Each visualization is made up of a series of branches, starting from George. As each branch grows, re-shares split off onto their own arcs. Sometimes, these re-shares spawn a new generation of re-shares, and sometimes they explode in short-lived bursts of activity. The two different colors show gender, and each successive generation becomes lighter as time goes by. And the curves are just for snazz.

The visualizations are live at facebookstories.com.

Oct 10, 2012

New Designs for Yandex Maps

A lot of what we do at Stamen is inventing things that haven't been done before; pushing the technical envelope on something like scary cartography, or inventing new techniques to animate the effects of climate change due to global warming. It's fun, and it's definitely a big part of what keeps my creative juices flowing: Hey, look at that shiny new thing! Are they really paying us to do this? Awesome! But it can also be stressful, particularly when you're planning your time and running the day-to-day operations of a studio, because fundamentally: if it's new, it's hard to figure out how long it's going to take. We have various mechanisms for accounting for this (including taking a loss on a project because we just can't help ourselves), but every once in a good while while we get lucky enough to take a second pass at something that smart people have laid a foundation for. This kind of work comes with its own satisfactions: polishing something to a high sheen, making it great instead of just good, really taking the time to pay attention to every detail and make sure that it comes out just right.

We're proud to announce today, along with our friends at Yandex, a redesign of the online maps for Russia's most popular search engine.

We have done the important stage of the project. We talked to designers, engineers and other smart guys during all time of the project. We achieved a lot of experience of mapping design. 

For example, at the the begining of the project we collaborated with Stamen. These cool guys helped us pick main issue definitions, refine ideas, get important recommendations what to improve. We implemented it into final design.

What follows are some before and after comparisons of the various design changes we recommended to Yandex.

Many maps account for many different kinds of roads: freeways, business routes, on ramps, off ramps, service roads, residential streets - and show those roads as different kinds of strips on the map. We reduced the number of roads to three, greatly simplifying the display:

District names are always tricky to label; you've got to decide how take into account things like major railway stations, and how they'e going to interact with one another. These choices have been improved:

Zooming in a bit, we brought down the emphasis on the subway labels themselves, and made sure to label them for easy legibility:

Zooming in further, we paid attention to the routes that the subway lines take under Moscow. Not having been there before, we needed to rely on our friends at Yandex for confirmation as to whether this looked right given insider knowledge of Moscow, but it turned out nicely:

One more zoom level in and there's enough detail for the subway icons to be colored according to which line they're on:

We did recommend a few new features, in this case one-way arrows indicating the directions that cars are allowed to travel in on different streets:

And finally we improved the rendering of freeway interchanges, which if you've ever tried it yourself, is no joke:

You can see the results for yourself at http://maps.yandex.ru/. And it's generally a good sign when your client, in town from Russia, comes to visit. Thanks Andrey, Alexander, Julia and team Yandex!

Oct 4, 2012

Map2Image: better, faster, stronger

The Map to Image bit of maps.stamen.com has seen steady use since we launched it in September: close to six thousand images made, about half of those watercolor, a third toner, about one every ten minutes. We've made some adjustments and improvements to it that should make it even easier to use, and easier to see what other people have made.

For starters, the results page has been reworked so it's a bit more navigable: where there used to be one long infinitely scrolling page with all the maps on it, each day now gets it's own page that fills up over a 24 hour period, so if you made an image on September 18, you're covered. There's also a graph at the top so you can see usage over time.

Each generated image also gets its own page now, and we've included Pinterest buttons so the images are easier to share.

Enjoy! http://maps.stamen.com/m2i

Oct 1, 2012

Comparing energy efficiency in the San Gabriel Valley

We've launched a new project for PMC, a consulting firm that advises municipalities on things like transit policy and energy use. Energy Efficiency in San Gabriel Valley looks at a variety of cities in southern California and reports how much electricity and natural gas people used, how far they drove, how much waste they generated, and other metrics. We compare each city to the others in the Valley, to LA and SoCal as a whole when we can, and plot these metrics on an interactive map and series of charts below. It works best in Google Chrome, as PMC's initial use for the project is a conference on energy efficiency and climate change, held last week in Monrovia.

We're using terrain background tiles, with terrain-lines overlaid), for the base maps. The outlines are loosely based on the municipality boundaries, and fill up and empty out based on whatever metric's being compared. La Cañada, Flintridge and Irwindale have the highest Vehicle Miles Traveled counts, and we think this is because they're furthest away from the center of the Valley:

VMT map

Measuring like this shows outliers pretty clearly. "Rock quarries dominate the small community of Irwindale, but the city is planning to attract more diverse land uses as some of the mines begin to close," and you can see this reflected in the Waste per Job statistics for that city. It also has many more jobs than it does residents, by about 13 to 1.

Irwindale waste

Further down on the page, the whole site is clickable, sortable, and otherwise interactive. Selecting a stat down below pivots all the rest of the data, so every location becomes a potential jumping off point for more comparisons.

Irwindale VMT

Irwindale waste

Compare the more industrial cities to largely residential ones, and the wealthier cities start to emerge, like Bradbury. With the smallest population, but highest residential electricity use, larger homes are implied.

Or, you can infer that La Puente is fairly "self-reliant", and people tend to stay nearby, since they travel the least:

The editorial is pretty terrific as well: who knew that Baldwin Park is the home of the first Drive-In restaurant in California (In-N-Out), and the best performing city in the Residential Gas category?

Sep 27, 2012

Arkitektura

Stamen alum Sha Hwang and I shared a stage last night at Arkitektura's Design Assembly in their lovely Soma showroom. Besides the obvious awesomeness of sharing a stage with Sha (whose work at Trulia is up there with the best), it's always fun to talk to an audience of designers; their focus on how things look and the kinds of questions they ask bring a certain kind of energy. I also feel like I can let my hair down a bit (what's left of it), talk about the cultural aspects of what the studio does and explore some new, not-entirely-fleshed out ideas.

One of the ways I've been tricking myself into thinking new thoughts is to look at writings about other forms of expression and substitute the medium that's being discussed—painting, photography, architecture etc.—and replacing that with "data visualization." So if you take a look at what Group f/64 (Ansel Adams' cohort) said about photography:

"The members of Group f/64 believe that photography, as an art form, must develop along lines defined by the actualities and limitations of the photographic medium, and must always remain independent of ideological conventions of art and aesthetics that are reminiscent of a period and culture antedating the growth of the medium itself."

and drop "data visualization" in there:

"The members of Stamen believe that data visualization, as medium, must develop along lines defined by the actualities and limitations of the data visualization medium, and must always remain independent of ideological conventions of art and aesthetics that are reminiscent of a period and culture antedating the growth of the medium itself."

you wind up with some things to consider that we can toss into the mix of data visualization manifestos and what all this work is "for." Who would take seriously a manifesto about what photography if "for" that was this restrictive now? It's a way to jump the conversation into a more interesting place and start to anticipate a world where these kinds of visualizations are as common as photographs are now; maybe more so.

Another fun one is "fashion." I've been talking about with Ben Cerveny and others for a while now about the idea that Stamen's approach to mapping and data visualization is more like that of a fashion house than like a graphic design studio or a web development shop. Fashion, far from being superficial fluff on top of real culture, in this view is is highly technical (the Gaultier show at the de Young convinced me of this), an endeavor where innovation and new material is key, and is deeply embedded in and often leading aspects of culture.

And then Paola Antonelli asked, on Twitter, where a phrase in the talk came from:

@enjalot @stamen: uh? intriguing statement! pls explain?... "Data visualization will be ephemeral, dangerous and unfair"

— Paola Antonelli (@curiousoctopus) September 27, 2012

So here are the slides:

Looks like I'm going to need some more rings, and maybe some better shades...but I haven't seen Lagerfeld with a better cummerbund.

Sep 25, 2012

The City from the Valley: a commission for the Zero1 Silicon Valley Biennial

A new installment in our continuing study of Bay Area infrastructure is live, at http://stamen.com/zero1. Some early coverage of the project here and here.

We've mapped the Bay Area's crime and taxis before, but in each case a source of data was readily available for the taking. In this case, we decided to try something different: going out into the world and gathering the data ourselves. We hired bicycle messengers and others to follow the various buses that ferry tech workers from their homes in San Francisco to their campuses down in the Valley (an arrangement that inspires mixed feelings among city dwellers) and to count the people getting on and off them. We started with the locations for bus stops available on public sites like Foursquare, and used Field Papers, an open source paper/mapping project developed earlier this year with Caerus Associates, for the physical mapping.

The context of the Biennial, whose theme is "Seeking Silicon Valley," seemed like a good chance to address the question of how the relationship between the Valley and its surroundings is evolving. This latest cycle of tech investment is spread out more broadly than the last one, leading some people to the conclusion that "...the distinction between Silicon Valley and San Francisco has all but disappeared. It is us, and we are it." I think the relationship is more complicated and dynamic than that (and I've been thinking about this for some time now); my hope for this piece is that it serves as an object to think with about the relationship between these quite different kinds of urban spaces and how we want to see that develop.

The exhibition is up until December 8 at the Zero1 Garage in downtown San Jose, and we'll be hosting and participating in some events around it in the coming weeks. Stay tuned!

Fundamental shifts are underway in the relationship between San Francisco and Silicon Valley.

Historically, workers have lived in residential suburbs while commuting to work in the city. For Silicon Valley, however, the situation is reversed: many of the largest technology companies are based in suburbs, but look to recruit younger knowledge workers who are more likely to dwell in the city.

An alternate transportation network of private buses—fully equipped with wifi—thus threads daily through San Francisco, picking up workers at unmarked bus stops (though many coexist in digital space), carrying them southward via the commuter lanes of the 101 and 280 freeways, and eventually delivers them to their campuses.

What does this flow tell us about Silicon Valley, and the City it feeds?

Sep 11, 2012

Facebook: Mapping the World's Friendships

Today we launched "Mapping the World's Friendships," a project visualizing the degree of interconnectedness between Facebook's hundreds of millions of members as part of Facebook's new Stories initiative.

Countries are sorted by a combination of how many Facebook friendships there are between countries, and the total number of Facebook friendships there are in that country. Turns out this number can tell you some pretty interesting things about not just where a country is now, but where it's been. The Marshall Islands shows strong results in the immediate geographic area—Guam, the Federated States of Micronesia, Fiji—but the number one result is to the United States, over 4600 miles away, since the islands were occupied by the United States until 1986:

The U.S. occupied the Marshall Islands from 1944 until 1986, and 10 percent of the islands' residents hail from the U.S. The top destination for Marshallese immigrants is the United States, where they mostly reside in Hawaii, Oregon, California and Arkansas.

Coloring the circles by the predominant language spoken there (the example above has them colored by which continent they're on, for clarity) provides another kind of insight. Clicking on Haiti makes it "easy to explore French colonization in this view, since you can see at a glance which countries speak primarily French."

We get a similar kind of grouping between Peru, Argentina and Spain, which of course makes sense because yum, paella:

The relationship between Angola and Portugal, on the other hand, needs a little more digging to make sense:

"With the economic downturn in Europe at the end of the first decade of the 2000s, Angola became Portugal's lead export market. As many Portuguese companies shifted operation centers, Angola saw a wave of of Portuguese immigration with more than 23,000 immigrants in 2009—a substantial change from just 156 Portuguese immigrants in 2006."

And the one that really jumped out at us as being much more about recent geopolitical events than any long-standing cultural or linguistic affinities was the tight link between Sweden and Iraq:

Sweden has taken in more Iraqi refugees than the United States. One town alone, Södertälje, dubbed "Little Baghdad", has accepted 6,000 Iraqis since 2003.

Sep 4, 2012

Map2Image is live

Since launching maps.stamen.com and making the maps available for purchase in select cities on 20x200 we've been lucky enough to receive a steady trickle of interest from people who want to print the maps themselves. For those unlucky enough to have missed the watercolor letterpress map that went out with Jason Kottke's marvelous Quarterly.co subscription service, we're pleased to announce the beta version of M2I, a service that lets you print out larger static versions of the maps on maps.stamen.com. Now you can generate those long images on pinterest, chop chop!

http://maps.stamen.com/m2i

The maximum size you can currently generate is 2000x2000 pixels. This is to keep the servers happy; depending on how they run we'll likely increase these limits in the coming weeks.

Please let us know what you think; we're looking into ways that people can order physical products from the site, because watercolor blankets and toner scarves are where it's at this season (and should be available from Soft Cities this fall).