Stamen is a design and technology studio in San Francisco.

You are at Stamen's blog, mostly written by Eric Rodenbeck. You can subscribe via RSS, or get email alerts.

Contact Stamen

    follow Stamen on Twitter

    Recent blog posts

    Oct 2, 2013

    Turning medical data into artful data viz

    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."

    Oct 2, 2013

    Jawbone at TED 2013

    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.

    Sep 16, 2013

    New Work: Copenhagen Bike Map

    by Geraldine

    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.

    Color

    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.



    Bike Tour

    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

    Bike Routes

    • Purple - National Cycling Route
    • Blue - Regional Cycling Route
    • Green - Local Cycling Route

    Read more about cycle routes

    bicycle=no

    No Access Roads

    Push Your Bike

    Bike Obstructions or Difficult for Bikes

    Cobblestone Streets

    The gray dotted lines indicate cobblestone streets.

    Bike Barriers

    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.

    Other Features

    One-way

    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.

    Footpaths

    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.

    Sep 12, 2013

    25 by 12 feet

    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!

    Aug 2, 2013

    Stamen maps in Dodocase

    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.

    Here's Toner:

    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!

    Jun 12, 2013

    Map Stack: Maps for all

    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:

    Opening Hours?

    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!

    Jun 5, 2013

    Earthlings! We have built you 3D Mars maps.

    Last week Mike and I were invited to speak at the Jet Propulsion Lab for "Visualization: From Data to Discovery," a conference about the overlap between data visualization and science.

    Which would have been interesting enough on its own (because science is awesome), but the icing on the cake was a tour of the Labs. We got to spend some time in the control room where the Mars Exploration Rover is controlled and check out live updates from the Voyager space probe (64k of memory, 35 years old, almost interstellar, totally bad ass).

     

    We also took a close look at Curiosity, which has paint chips attached to its back that the onboard camera can use to color correct itself. The probe also has holes in the tires so the dust can fall out. As it drives around, these holes are visible in the tracks the rover leaves behind.

    These markings can be used to visually determine distance travelled. Originally the holes spelled out J-P-L. This didn't go over well with NASA, so now it's—wait for it—Morse Code that spells out…J-P-L.

     

    As a small gesture of thanks to the scientists who are working hard to do science and communicate with the public despite the stupid sequester, we've put together a 3d contour map of the Martian surface, using data collected by the Mars Orbiter Laser Altimeter. You can take a look for yourself at http://maps.stamen.com/mars.

    Mars!

    Apr 8, 2013

    Parklets, private bus networks and open source have more in common than you think

    Later today, I'll be joining a panel discussion at SPUR talking about how urban agents are changing our cities, with local design and infrastructure smarties like Raphael Garcia from the San Francisco Public Utilities Commission & Nancy Levinson from Design Observer.

    On my radar: welcome urban innovations like parklets, less-popular (or at least more controversial) private bus lines to Silicon Valley and how a new kind of practice is emerging that works with open source software and data to bridge the divide.

    New actors are forcing change in from the edges, outside of traditional power structures and narratives and in ways that challenge our assumptions about what cities are for and how they should be run.

    If you can't make it this afternoon (details here), I'll be posting the talk later on.

    Apr 5, 2013

    Pow! Thwok! Happy Monday.

    Lock Batman, Hulk, Iron Man, Catwoman, a mercenary Snow White and antihero Bilbo Baggins in a room. Make 'em fight. Who wins? Our latest social vote project for MTV's 2013 Movie Awards gives a realtime window into this virtual bloodbath.

    Poom!

    Leading up to the April 14 awards show, fans are casting votes for this year's best cinematic superhero by hashtagging photos on Instagram. The best pics—get out those cat ears and polish your power poses!—will be aired during the live awards show.

    Since 2009, Stamen's been working with MTV to bring social to the small screen with real-time Twitter visualizations. Working with Mass Relevance the heroes project takes this one step further: user photos featured on the site get classic comic book captions in keeping with each character, and you can comment and vote on Instagram for your favorites.

    Mar 27, 2013

    Announcing here.stamen.com

    Stamen has been working with 3d data from HERE for a few months now, and it's time to start being public about that.

    You can skip to the good stuff by heading over to http://here.stamen.com/ and explore for yourself, or take a look at what follows for some more details & rationale.

    The Story:

    Here, a Nokia business, has spent decades building a deep library of map data, and we've been given a broad remit to investigate how designers and developers can use that data to innovate and explore an ecosystem built around the idea of 'living maps.' The idea is: take a look at the broad range of data that drives the HERE product portfolio, help to figure out the best ways to release the right bits of that data to developers so that a healthy ecosystem can flourish around it, and build prototype projects on top of that platform to light the way.

    As you can imagine, HERE has all kinds of data, from driving directions to base cartography to extensive LIDAR surveys of worldwide cities. We've looked under the hood at a variety of these, and evaluated them on several different axes: complexity, comprehensiveness, uniqueness, and accessibility. We tried to find, for the initial release of this work, a sweet spot where we could find (as we do) the next most obvious thing—a dataset that was right on the edge of being useful and interesting to a broader public, one that hadn't been widely used before, and that was accessible to us as new HERE partners. We wanted to be professional amateurs here; coming in from the point of view of a newbie developer without a lot of experience navigating corporate hierarchies who just wanted to make something cool without getting lost in this wealth of data, and see where we could end up.

    The What:

    It's taken us a little while, and we've had a number of false starts (we're talking about a lot of data here), but! I think we've found something lovely and potentially quite interesting in the data that's being used to run HERE Maps, which launched late last year. Here.com is an impressive accomplishment—full on 3d maps of multiple cities around the world, beautifully rendered and browsable everywhere—but as lovely as it is, developers and designers have yet to really take advantage of what's possible with all this content.

    The exercise started with some code that our friend and former colleague Mike Migurski started playing with about a year ago to extract HERE data from their 3D tiles. Along the way several people at Stamen weaponized that code, HERE made their data available for us to play with, and we used it to build out maps of four global cities: San Francisco, New York, London and Berlin. We built a framework sitting on top of that that lets this data be embedded, linked to, layered on top of, and generally made internet-happy in a way that we hope will let a thousand flowers bloom.

    And so!

    For your viewing, embedding, linking, and otherwise internet-ing pleasure: http://here.stamen.com/ is live today. It uses 3D data from HERE for San Francisco, New York, London, and Berlin to create city-wide 3D browsable maps, and it does this in the browser (though you'll need a WebGL-enabled browser to see it). As in many of our other mapping projects, the urls change dynamically depending on location and other factors, and the data conforms, more or less, to the Tile Map Service specification. What this means, among other things, is that it's not only possible to link to and embed these maps at specific locations and zoom levels, but that it's easy—and as we've seen with Citytracking, easy is good.

    In the meantime we're starting on a round of design work that uses these in-browser 3D maps as the basis for what we hope will be a whole new suite of consumer applications and projects. For now we encourage you to poke around under the hood and think about doing the same.

    One caveat: early days! In keeping with the philosophy that it's better to release early and release often than to wait until everything is perfect. It's a prototype, not a final release, so it's not entirely production-ready and may have some rough edges. Please send us feedback and we'll keep you posted as we kick things further down the road.

    New York:

    Starting with New York, because its downtown, from this perspective, looks like something out of Game of Thrones, which is awesome:

    And! Once you've got this set up, flipping this one-line code switch in three.js:

    {wireframe: true}

    changes the material that covers each object and gets you a ghostly see-through wire model of New York (focused here on the New York Public Library's main branch at Bryant Park, made entirely out of the edges of things:

    San Francisco:

    Moving to our home town of San Francisco, we can pivot the Golden Gate Bridge around and give it a good look:

    It's also fairly straightforward to bring other, publicly-available datasets into this environment and do things with them (this will come up again!). For example, pulling in the building footprints that the City of San Francisco makes public, showing only the outlines, and coloring them by height, gets you this business:

    And! Since the data now uses the same syntax as the rest of the internet, it's possible to bring map data in from other services as well. Here we've got tiles from our watercolor maps project, draped over the 3d buildings model (savvy mapping nerd types will notice that both URLs end in #17/37.79560/-122.40091, which makes this possible and is in some ways the whole point of the exercise:

    Again: rough! you can see some seams! but progress, and an object to think with.

    Berlin:

    In a spirit of play, we've left things a bit rough and funky around the edges, so that when you get too close to the Fernsehturm, things get a bit awkward:

    (first person to post a picture of Sutro Tower from the inside gets a prize)

    And Mehringplatz is just lovely:

    London:

    By the time we get to London, this is pretty much just Mike Tahani showing off. The London Eye stands out nicely in wireframe:

    Parliament looms over the Thames:

    Tower Bridge rising up out of a faceted wire-Thames:

    And Hyde Park has a kind of video game look about it because of the forced parallax that spreads the trees out around the edges:

    OK. More cities, datasets and examples to come as they're available, but this for now: go play!

    Syndicate content