Designing With Data

Hi.

Friday, October 11, 13

Students file in to the room....

Designing With DataGeorge Oates, Art Director, Stamen Design

Texas State University School of Art and Design, October 8, 2013


Hi. Welcome. Thanks for coming to hear me talk this evening, and thanks very much to Jill Fantauzza for inviting me. I’m coming to you from San Francisco, and a small design company called Stamen. Jill’s asked me to talk to you tonight about Designing with Data, so here goes.

Who’s George?

Stamen Design

With Great Power...

This evening...


I’m going to break the talk up into 3 main chunks. Tell you a bit about my career trajectory so far, introduce you to Stamen and how we approach data-driven design, then finish with some thoughts and examples of how designers can exert editorial control, and what that means these days when people can also access source data.

Who’s George?

Stamen Design

With Great Power...


So... George...


1996self-taught2 companiesturned 30left Australia


interned at ludicorp -> designer of flickrmoved to sf


Keep copies, archive everything. I’m SUPER BUMMED that I didn’t do that properly with Flickr. This is the homepage 2 months after launch.


worked at yahoogot fireddirector, open library @ internet archivenow, art director at stamen design


May 2005.I liked finding quotes that had good photo words in them.


2006


2007

Flickr Commonsflickr.com/commons


In mid-2007, an email from the Library of Congress trickled into my inbox. They were looking for a “web 2.0” partner, and had decided on Flickr for photography. But, they couldn’t use any of our licensing options (all rights reserved + CC). I worked with Yahoo! legal to introduce a new way of sharing on Flickr, called “no known restrictions”. Suspecting that other institutions around the world might be able to use that too, I created The Commons on Flickr. Now there are millions of photos, and almost 100 institutions participating!

Oh, then I got fired.


Picked up by the Internet Archive, and Brewster Kahle. He gave me the Open Library project and let me run with it.


Here’s the redesign I did in about 9 months. openlibrary.org


Here’s the open source Book Reader I redesigned, in collaboration with Michael Ang.


In the bowels of the Smithsonian Libraries, after I was awarded a Research Associate position. I LOVE the bowels of the Smithsonian, and wish I could teleport there any time I wanted to.


“Magpies are jacks of all trades: scavengers, predators and cheeky thieves.”Michael Bierut, partner at Pentagram79 Short Essays on Design - The Design Observer blogDesigners Secret - we get to work in all sorts of places, all sorts of industries, with all sorts of people, all sorts of problems

ANOTHER SLIDE, MORE TO SAY.


One of my favourite parts of any work I do is understanding the problem. I don’t think of myself as a particularly creative person, you know, like the kind of person who just makes art all the time because they’re compelled to. But, give me a problem, and I can solve that all day.

Stamen is contacted by all shapes and all sizes, from the artist who wants to use one of our maps in his work, to the giant telco who wants us to explore a gigantic dataset and make something cool.

Photo by Dave Harp

StamenFriday, October 11, 13

Created in 2001 by Eric Rodenbeck.Design & Technology studio.

Here’s a quick tour of a few projects, much more to read on stamen.com...


Crime Maps - one of the first of its kind. Data borrowed surreptitiously from the Oakland Police Department, and placed into a user interface. Now the police are publishing their data openly.


Building Maps; map=yes. This is all the buildings in London. Online cartographic exploration... the beginning of Stamen’s journey into maps that aren’t just for driving directions.http://mapequalsyes.stamen.com/


Time Maps; Cabspotting.org


Space Maps - that’s a WebGL 3D map of the surface of Mars. http://maps.stamen.com/mars/


Watercolor maps - http://maps.stamen.com

But, this presentation isn’t really about finished, polished work. It’s going to take a look at some of the techniques we use to *start* working with data. You can see a bunch of finished work, and much more info on our website, stamen.com.


This is 10/12ths of us.

Engineer EngineerDesign

AdminAdmin AdminCEO

65

Director DirectorDirector Director

3

512

EngineerEngineerDesignDesign


The numbers don’t quite add up here - some people aren’t in the photo. Small group, many hats, generalists, specialists, etc.

Client Work

Research / Development

Art


We do client work so we can have time to do R&D and experiment. The perfect client is one who wants us to do all three.

Independent Company

Small Recombinant Teams

Ambitious, Pay-it-forward


Being independent means we can work on what we want; what interests us. It’s important to us to contribute to the various communities we belong to as well, by creating and sharing tools to benefits others. When we share tools, we can all move forward a little more together, advancing the field.


We were thrilled to see a watercolor billboard go up in our neighborhood, and then be graffitied within a couple of days.

Designing With Data


OK. Now I’d like to take you through a few projects I’ve been a part of, looking through the lens of designing with data.

Everyone’s in the data business.And there’s no such thing as clean data.


Anyone who has a presence online of any scale is in the data business. Anyone who has logins, or transactions, or inventory, or measures attention, or collects content... all of them.

Everyone’s in the data business.And datasets are always a bit messy.


Anyone who tells you their data is pristine is a liar!

“Our Process”


Why N Sync? Because it’s a slide about recent history. Before the turn of the 21st century, most of the web shops around the world were thinking long and hard about communicating their process, and making it one of their products. Many flow charts were drawn, many thesauruses consulted, many variants of the same basic thing created.


We keep track of ourselves, and visualize our project history. These are “maps” of our project work. It’s difficult to find patterns in our own work, in our own process. Each color represents a Stamen person, so you can get a feel for how we’re all involved...

I’m dark purple.


This is me. Pretty irregular timing.


Most of the processes people talked about in the late 90s were straightforward... sometimes people call this “waterfall”.


Sometimes it feels like our exploration is more like this... moving forward, but not sure where we’ll end up. It would be nice if clients paid us to do this. But, turns out that’s hard to charge for.


Our goal is a blend of those... something exploratory and expressive, which turns into production at a good point.

Discovery

Expression Design

Production


Basically, discovery, expression (probably most important), design and production.

So. How do we start?


So... how do we start?

Work out what you’re dealing with.

Draw everything.

How does it change over time?

Is place important?

Make it move.


Our basic exploration practice.

Work out what you’re dealing with.


People create data in all kinds of ways, and describe in even more. Talk to the people who created the data you’re going to be working with. Ask them how they made it, and what they want to do with it. Schemas, dictionaries, any kind of representations they have - all of this is good stuff to get your hands on. Look for things you know how to handle.

We call this spelunking.

CC-BY by highlander411


And actually, spelunking is a useful analogy, I think. It’s cold, wet and dark in some datasets... without lighting and guidance, you can get LOST AND DIE.

Lighting and guidance can take the form of conversation and schemas, dictionaries, common frameworks, “universal” things like date/time or latitude and longitude...

http://creativecommons.org/licenses/by/2.0/

http://creativecommons.org/licenses/by/2.0/

http://www.flickr.com/photos/highlander411/

http://www.flickr.com/photos/highlander411/

Draw everything.


As soon as you can, start making images. A friend, Tom Armitage, just gave a great talk about “software as material” in Norway. He had a lovely phrase I liked, “a graph a day,” which he used to encourage software people to make images of what they’re working with, so other people can start to understand and interpret the work. This is central to our work at Stamen.


This is us plotting every column in a dataset against every other column to look for gaps, blobs, clusters or any other highlights.


Another technique is to use color in a table to indicate volume. A very quick way to glance at frequency or activity.Who says which day of the week on what day of the week?Lots of people think about Fridays. Lots of people talk about the weekend.

How does time help you?

What does place tell you?


Start with 2 simple questions.


Start rough. Cobbled together CSV + D3.Get interactive as soon as you can.This quick sketch shows how associations change over time. This is 2012...


To 2006.


Another project for Facebook... looking at who’s talking about what around the world... again, just drawing everything here, normalized against time of day, so we can see it all at once.


At first we wondered if odd spikes in odd places might be data center locations...

Anyone know where that is?

Lagos


Lagos is the second fastest growing city in Africa and the seventh fastest growing city in the world. I did not know that before working on this project.


Facebook music project.90 days worth of listening data via various music services like spotify.

Thrift Shop


Yes, that the massive Thrift Shop. Far and away above any other track. Sometimes it helps to see detail if you snip off the top outliers, or focus your gaze a little lower than the top.

Umm...


Interesting how these sorts of expressions often reveal gaps or oddities to the clients themselves too.

Bit of art direction


Same data, different expression


Same data, different expression3D + Color work


Final piece


Make it move.


This slide plays a video which you can also watch here:http://vimeo.com/51569667

Too much data?


I didn’t make this background, by the way. It’s the top image search result for “data” :)


This is work hot off the press, literally put out this morning. Alan McConchie is Stamen’s resident cartographer, and also happens to be doing his PhD on the community of editors on OpenStreetMap. For any of you who don’t know, OSM is like Wikipedia because anyone can edit it, but it’s a map of the world.

“Show us what we’ve got”


It used to be that people didn’t really know what was hidden away in their dusty datasets, and they’d come to Stamen to find out. Our work would reveal new connections or anomalies that had never been seen before.

Those days are slowly passing now... clients are much more sophisticated now, and often have data scientists or analysts on staff. We try to find those people and collaborate directly.

Tell Stamen what you’ve got.


It’s invaluable to work with experts, in any type of design. This is Dr. Robert Orth, who proved crucial in our Chesapeake Bay project. His 40 years of study of the bay was central to the design we created to help explain his study.

Our approach used to be make a UI to let people see everything, to explore everything themselves, without guidance particularly. But, now we’re in the time of data abundance, and glut. There’s a definite trend towards “guided tours” of big data, or curated, narrated events.

http://www.nytimes.com/projects/2012/snow-fall/Friday, October 11, 13

This is one of my favourites, Snow Fall, which began its life as a traditional long form article written by John Branch. There was an avalanche in the Cascades in Washington, and 16 skiers were trapped in February 2012.

The team at the Times grabbed it and turned it into something stunning... bringing in multimedia when it was timely (literally as the viewer got to acertain point in the story, a video would play, or a map would animate.)

Truly best of breed work.

http://www.nytimes.com/projects/2012/snow-fall/

http://www.nytimes.com/projects/2012/snow-fall/

http://source.mozillaopennews.org/en-US/articles/how-we-made-snow-fall/Friday, October 11, 13

There’s a great interview with the team who created the piece here - worth looking up for some interesting behind-the-scenes insights.

http://source.mozillaopennews.org/en-US/articles/how-we-made-snow-fall/

http://source.mozillaopennews.org/en-US/articles/how-we-made-snow-fall/

Who’s George?

Stamen Design

With Great Power...


The final section of this lecture is about the increasing need for Interpretation, Subjectivity and Narrative on big datasets. While it’s certainly still useful and often interesting to splay the whole thing out -- and actually that’s often a great way to see things and gain insight -- “design is art with consequences” - I’m attributing that to Peter Girardi, but am not certain that’s right. (Damn internet.)


New movie coming out about René Saavedra, an ad man in Chile who worked on voting NO to Pinochet getting in for another 8 years. Positive editorial power.

http://zero1.org


Last year, Stamen was commissioned to make a piece for the Zero1 Biennial in San Jose.

http://zero1.org

http://zero1.org


We decided to create a project in response to the highly visible, remarkably private SF to silicon valley bus services. Mike, Eric and I sat on the corner of 18th and Dolores one morning to observe the passing shuttles.


We used the commission fee to pay bike couriers and “freelance” Stamen relatives to observe these corporate buses at scale... and eventually, we were able to map out all the stops, and the schedule for 6 Silicon Valley companies.


This is Zach and Shawn working on how to represent everything... now that we had the data, how could we draw it?


These are the sketches that ended up becoming the final piece, give or take. You can see on the right there that we wanted to incorporate shuttle volumes into our map.


In the finished piece, you can see that Google sends far and away more workers from the city to the valley. (Incidentally, that ended up being the name for our piece.)

http://stamen.com/zero1


This generated a lot of press... and it wasn’t like the piece itself had a particular point of view, but made something previously invisible visible. Everyone had noticed those hulking private buses on the small neighborhood streets... this diagram became a device which helped conversation and criticism.

The work resulted in a single image, a representation of our understanding of the private transport network. It was interesting to be in the position of data creator, data aggregator. The tricky part was, some of the data we used was “privileged” and private, so we weren’t able to freely share all the data for public consumption.

CC-BY-NC by {Guerrilla Futures | Jason Tester}Friday, October 11, 13

A lot of the city is not happy about the current wave of young wealth tech nerds spoiling it for everyone... :)

http://www.flickr.com/photos/streamishmc/

http://www.flickr.com/photos/streamishmc/

http://drones.pitchinteractive.com/


Strong piece called “Out of Sight, Out of Mind” by Pitch Interactive in San Francisco, came out about 6 months ago. A visual representation of US drone strikes in Pakistan.

Anyone see it?





The piece grows over time, and places each death into a category: child, civilian, other, high profile. There is a feed of drone-related news underneath.





It’s visually really strong and clear.





Well-built. Informative. Revelatory of a hard, politically charged topic. I admire their guts to put it out.



http://www.reddit.com/r/dataisbeautiful/comments/1ays3c/out_of_sight_out_of_mind_a_visualization_of_drone/c9205xf


But, their approach attracted intelligent criticism. Along the lines of... “This is a great unintentional example of how data can be seriously distorted even if technically true.” “Data is terribly presented and clearly biased.”



http://www.slate.com/blogs/weigel/2013/03/25/obama_drones_pitch_interactive_data_project_is_problematic.html





“I'm of the opinion that more information is usually a good thing, so it would be nice to see a full spreadsheet of the data and the methodology Pitch Interactive used. In both drone warfare and data reporting, a lack of transparency runs the risk of misleading the people supposedly being served by it.”

Emma Roller, Slate


It would be ideal if everyone could always share their project data openly and freely, but we’re not there yet. I admire the Pitch guys for taking on some really hot political topics in their work. A lot of what we’re doing now is helping people with publicity, and that includes working on projects we feel deserve attention.

This is also one of the nuttiest issues with the work that we do, I think. There’s a real challenge to represent finely crafted data and research in a way that does the work justice, and represents it in all its complexity. There’s a point you can reach in this kind of work where it’s been so simplified its meaning is dulled. Infographics (static, highly edited) pieces often suffer from this.

So, a good goal seems to be to aim for exposing all the data in an interactive, searchable interface, and then layering expertise and highlights over the top, to help people see important parts easily.



Pay it forward


OK, so... winding up... I mentioned in my intro that Stamen is a group which works consciously to pay it forward; to create tools in the midst of client work, and to talk about the work, and share them. Not just tools either, actually, but techniques too.


We’ve been consciously working on describing our work more clearly, and rigorously. We try to always create open source tools in the course of our work. If you’re trying to find work, talking about your current practice is a great way to do that. As Eric (Stamen CEO) sometimes says, do the type of work you want and put it out into the world.

Incidentally, I was looking for a picture of a hard-to-open package, to act as a visual cue for a tool or technique that gets poorly described. I unlocked a new phrase for my lexicon: “wrap rage” and there are tons of funny videos about that on YouTube, for when you’re having a bad day.


We take the time to write a “here’s how we did it” style blog post at the end of many of our projects... that’s actually become something of a product for the studio, too, and clients are beginning to ask us to do it for their projects, and are willing to pay for it. That’s interesting to me.

maps.stamen.com free CC-licensed map tiles


We developed 3 cartographic styles, which we made available to the world under the Creative Commons Attribution license, and we’ve watched them proliferate across the web, which is SUPER EXCITING.

I was reporting on examples around the place at citytracking.org for a while... there’s more info there if you’re interested.


We have 14 public repos available on Github, and are looking to add more. Most of them are map-related, including a couple of products too, Maptcha and Field Papers.

Clients are beginning to ask us to produce public code too, which is also an emerging, interesting trend.


Here’s one great example of a Stamen map out there in the wild, made with the help of CC-licensed Toner Lines/Labels. It’s the Racial Dot Map; one dot per person across the USA. The map was created by Dustin Cable, a demographic researcher at the University of Virginia's Weldon Cooper Center for Public Service.

http://www.coopercenter.org/demographics/Racial-Dot-Map

“Getting lost in validations and surprises.”


I stumbled upon this comment about the Racial Dot Map from Aaron Koblin, and I think it largely describes the work of data visualization.


Speaking of surprises, this elephant popped out some forestry research in Gabon, in Central Africa. A scientist called Simon Lewis is using LIDAR to scan forests in a non-destructive way.

This is the paper about the work: “Mapping tropical forest biomass with radar and spaceborne LiDAR in Lopé National Park, Gabon: overcoming problems of high biomass and persistent cloud” http://www.biogeosciences.net/9/179/2012/bg-9-179-2012.html


This sort of surprise is the holy grail of work like this. But, with clever capture, cleaning up, drawing, iteration and editing, you might spot an elephant too.

Thank You! [email protected] @stamenglo


mailto:[email protected]

mailto:[email protected]

Designing With Data

Design

Transcript of Designing With Data