The SpoolCast with Jared Spool

The SpoolCast has been bringing UX learning to designers’ ears around the world since 2005. Dozens and dozens of hours of Jared Spool interviewing some of the greatest minds in design are available for you to explore.

Episode #171 Brian Suda - Designing with Data

May 14, 2012  ·  26 minutes

Listen Now

Download the MP3

A data visualization, when done well, can be an incredibly powerful way to communicate information. It ultimately boils down to the choices you make in how to design and present the data. If you make the wrong choice you can run the risk of not accurately displaying the data or struggling to effectively tell its story.

Show Notes

Brian Suda, author of A Practical Guide to Designing with Data, believes experimentation is a big part of arriving at the right choices. As ideas end up on the cutting room floor, not only do you arrive at a great visualization, but you’re building your toolbox along the way. This practice and experimentation leaves you with a template to apply to future projects.

Essentially, arriving at the right choices now allows you to make better choices later. If you learn the best ways to represent different types of data, you can then apply that knowledge to any data sets you may have to visualize.

Full Transcript

Jared Spool: Hello, everyone. Welcome to yet another episode of the SpoolCast. Today, we're going to talk with Brian Suda. Brian is a fabulous designer who specializes in visual design, data visualization, and he wrote a book called "Designing with Data." He's going to be doing a virtual seminar for us on May 17 called "The Design Choices You Make for Information: How to Create Great Data Visualizations." Brian, welcome.
Brian Suda: Thank you very much for having me.
Jared: And so I've always been enamored by great data visualizations because they take sort of the complex numbers and raw data that's there and they bring it alive and they sort of make it happen. I've always been envious of anyone who could figure out how to do that because I can look at the raw data and I can look at what people do with this but I never can imagine how the hell did they think of that. Right? How did they get from this set of numbers to this incredible chart or this incredible graph that just so clearly shows what needs to be there? How did you get into doing this?
Brian: It's probably somewhat just kind of falling backwards into it. At my previous jobs, we worked with a lot of data and some of these visualizations were just ways to begin to sell the product or make it more enticing and just started cutting my teeth, getting some practice. And also, just lots of inspiration. A few years ago, one of the things that really kicked off was Nicholas Felton's, Feltron annual report, personal annual reports.
Jared: Yeah. That was brilliant.
Brian: I've always been a numbers guy as well so the first year he came out with it and was listing how many, you know, photos he had taken, and it was a fairly simple thing to do, you know? At the beginning of the year, you look in iPhoto and it says you have 300 pictures and at the end you have 450 and you took 150 pictures that year. I thought to myself maybe I should start playing around with these things and experiment just like he's experimenting. I think looking at some of the inspiration also really kind of piqued my interest and got me started in data visualization.
Jared: Now Nicholas, his stuff is interesting because he just started doing this as a hobby. And then eventually, well first, his annual reports ended up in the MoMA, right? And then he eventually got hired by Facebook and was one of the inspirations behind their timeline interface, if I'm not mistaken.
Brian: I believe so, yes.
Jared: Yes, so that's an interesting thing, right? You start with just tinkering and you end up with museum exhibits and a really cool job.
Brian: I really have a love/hate relationship with that because that first year he came out with, you know, how many photos, how many songs and I started tracking the same things and then at the end of the year I was like I'm going to be right there with him and I'm going to make a beautiful visualization. Then he started tracking even more stuff, what he was eating and where he was eating, and it just put me to shame. I couldn't keep up with him.
Jared: Yeah he's a bit crazy that way. This idea from getting from the raw data to the different visualizations, to me, that's just a masterful skillset. I guess it comes from experience, right? Just practicing and playing. Do you spend a lot of time just playing around?
Brian: Yes. I think anyone who does this probably has 10 to 20 times as many charts and graphs that never made it past the cutting room floor. And I mean we're all familiar with some of the basics, the bar charts and the line graphs, but a lot of the data visualizations really take it a lot further. It borders on almost art and design in some of the complexity and a lot of that, yeah, is just hours and hours of mistakes and finding out what works and what doesn't.
Jared: Yeah, you know this is one of the things. I've taken and I've gone and seen Edward Tufte speak a number of times and, of course, read his books and it's all brilliant stuff. You go through and you go yeah, look at that stuff. But he doesn't do a very good job of explaining, "OK, how do you decide which thing to use?" He only sort of reverse engineers it. He'll look at the end product and say, "this is good, this is bad", but he doesn't say if you're going to do the right thing how do you get there? And I think that that's something that has really been lacking. It's one of the things I've been looking for in terms of understanding how to make those choices. And so what I'm hearing you say is this idea of playing with the data, really trying different things out, trying out different formats. Do you also look around for different types of inspiration?
Brian: Oh always, and from all sorts of different...even from some of the most boring industries are still producing some incredible annual reports with some really in-depth knowledge and interesting ways of showing it. Weather. I mean weather data, it's still amazing how many iPad apps there are to display weather. And you would've thought, we've had weather for hundreds of years now we've been tracking it. How many new ways can we visualize it? Someone's always churning out some slant on it, their way of doing it, and a new way of looking at maybe the numbers in aggregate.
Jared: Yeah. Now that I think about it, I wonder what the weather forecast for Noah's ark was. So what's a project that you've worked on that you're particularly proud of? And sort of walk me through how you figured out what to do.
Brian: Sure. One that I really liked that we did a couple years ago was when the World Cup was happening in 2010. And we had, after the World Cup, all of the goals. We had shots on goal, number of goals on all the different teams, and who played against who. We wanted to try and see, "is there a way to visualize this to show who conceded the most goals"? Because obviously, at the end of the day, you know who the winner is and they get all the information and fame, but because the World Cup is just knockouts maybe one team just had one bad game and didn't get to move on. We wanted to explore the goal ratio and maybe the best team didn't actually make it through to the final.
Jared: And so, what were some of those early things that you tried that didn't work? What was that process like?
Brian: Again like I said, a lot of things just made it never off the cutting room floor. One of the things we experimented with is maybe putting all of the teams in a circle. Around a circle each team had a point and then we tried to draw lines across the circle for, you know, team number one scored a goal against number two. It formed like a star pattern within the circle and it just was horrible. You couldn't figure out which direction the line was going and then once you got, what was it, 32, 64 teams it just became incredibly cluttered and it just wasn't working out. But we really liked the idea and we riffed on that a bit and took it from a circle into a line across the top with all the team names vertically and then a line across the bottom with all the team names again and then decided to do the same sort of thing. We would draw a line from the top, those were the teams who scored, and then a line to the bottom to the team they scored against. And it worked out pretty well and that's kind of what we settled on. But the thing that I think we're probably most proud of in that project was after sketching it up and making a bunch of mistakes and then kind of solidifying on the final design, we wrote a little program to where you could throw in any sort of numeric data. In this case, we were dealing with goals scored against goals conceded, but it could just as easily be emails sent versus emails received. So now we've kind of got a nice little... now not only do we have a nice design, we're slowly building up our toolbox of data visualizations and I guess, yeah, just tools that we can use in future projects.
Jared: Well that, to me, seems pretty important because a lot of those things you can then reuse for different functions. And once you've sort of got the template or the code that goes behind it, it becomes a nice way to represent a lot of the different data that you have, right?
Brian: Exactly. If you look at a good newsroom like "The Guardian" in the United Kingdom, they've got a really good team who's designed lots and lots of these scripts and programs dealing with a lot of the data and news that they deal with on a daily and weekly basis. They've got really, really good tools for maps of the UK. So if there's some election data that comes in, they can map it out real quick. If there's riot data, they can map that out. The price of gasoline per county. They've got the tools in place and it really helps them to churn out the news stories with supplementary data a lot faster than their competitors.
Jared: Yeah. We had talked a while back with Andrew DeVigal and Steven Danes at New York Times and they had been building out a very similar team with similar capabilities to do that, both for their static stuff and their interactive stuff. So now, that implies that what you're doing, basically, is assembling this toolbox of stuff that is always growing a little bigger, a little better, but you're still playing all the time, right? You're still sort of experimenting?
Brian: Yes. I think things like line graphs and bar charts have been around now for maybe 150 to 200 years. And back in the old days, the printing press, you had to physically take a copper plate and scratch into it for the print so they probably spent loads and loads of time and getting it right and making sure that that particular visualization or chart or graph was the right thing. We've been able to spend the last 150, 200 years piggy backing that knowledge. Very recently, we've kind of had this gigantic explosion in infographics. Even turnkey companies who you can upload your stuff and they'll make you a witty infographic based on your Twitter data or based on your Facebook information. I think it's still maybe not even adolescence. This field is very, very young and I think some of it's going to settle down. And even as we're building up these toolkits, some of them we won't ever revisit because they were a good idea for six months and now it's become passe or we realized that it's not actually the best way to visualize the data. We thought so at the time, but it turns out that it's not suiting our needs anymore.
Jared: Yeah. I think that sometimes people go for the artistic over the practical and they make something that they try to make look really good but then you look at it and you go I don't know what this is trying to tell me.
Brian: Yes. At the end of the day, with web development, with products, you just have to really identify your audience. Because if your audience is... to get them to come off the street and buy your product or your product is very temporal and it's not going to be around in six months maybe some of these more witty, colorful, eye-catching infographics serve the purpose exactly what you need. Academic papers or Edward Tufte and his PowerPoint against the NASA report and the Challenger, there are certain times you want slightly less sexy and more dry but deep and informative visualizations. There are times you probably want to use them more in this advertising and eye-catching and you want your likes and forwards on Facebook.
Jared: Right, right. That line between those two things, that feels, to me, like that one can be a hard call sometimes.
Brian: Yes. I think previously, when things were in print, you knew this magazine was the first quarter 2006 "Wired" issue, but now when things are on the web I'm stumbling across articles and reading them and I'm like when was this written? If they don't have a date on the blog post maybe it was last week, maybe it was three years ago. So I think some of these visualizations which were great in the moment don't necessarily age well in the digital world because we're finding digital things from years ago which the author wasn't expecting to live this long.
Jared: Yeah. If I'm trying to decide is this going to be more dry, do I need to put in the extra flare, when you're looking at the problem how do you sort of make that call?
Brian: I first always try and start with the absolute minimum building blocks. If you start with the minimum then work your way up it's much easier, I guess, to kind of stop at some point when you've reached the flare you want, whereas if you start with drop shadows and you know, 40 point text and all sorts of animation and flashing it's probably a lot harder to peel it off at a later point once you've shown someone else and they really liked it or disliked it. Finding that sweet spot, I guess that's much more of an art than a science. But I guess in my take of slowly layering things on, you can show a few people, float it around. I think a lot of the problem, as with any profession, everyone's very scared to float their idea because what if someone sees it? I think with the web it's much easier to just iterate. You know, you float it out there and it's an infographic. No one picks it up. Maybe you tweak it a bit more, maybe you say something a little more radical. Maybe you go the other direction. If people aren't understanding it, you can tweak it and make it drier or annotate it in a way that makes it more obvious.
Jared: Yeah. Looking at your World Cup image, I have a copy of it that I brought up, and there are a couple of things that you did that are really interesting from a visual design perspective. One that really jumped out at me is your use of the opacity of the line segments so that you can see when one line crossed another. Most of the time when we see charts that have lines on them the opacity is set to 100 percent, right? So you don't notice that the green line is crossing the black one unless it's layered that way. You played this really neat game and it creates this sort of ghostly effect, but at the same time it makes it really easy to follow the lines. Was that something that you played with?
Brian: I think that probably came out of the first iteration. When the first iteration had so many lines in the tight circle you couldn't tell what was going on and one of the ways we thought well, maybe we can change the opacity and it still didn't work because in a circle it was too tightly clustered, but we liked that idea. We kept running with it, even when we unfolded it into the sort of more rectangular visualization you see there. You're right, if they were solid I think it'd be very difficult to follow where this line entered into the cluster and where it exited, but with the opacity it's probably easier to follow and to aid the reader.
Jared: Right. I mean this reminds me of the maps that I see at the back of the airplane magazine. I spend a lot of time reading airplane magazines. The maps at the back of the airplane magazines that have all the routes that the airplanes take and you can never actually follow. It's like I'm trying to find the route we're on but you can't follow them because all the lines merge and cross and do it at slight angles so you can't tell if your line bent or if it went straight. Here, that effect is really clear. What is also really neat was the way you used the width of the lines to represent the number of goals so that Germany has this very wide base. It's almost like a root structure of a tree. It looks like an old tree root system and all the goals are coming from that. Whereas something like South Africa, which only had a handful of goals that they scored, that's a very thin line and it only splits in two places because they only really scored in two games or against two teams, I guess. I can't tell how many games it is.
Brian: Again, you can quickly and visually see that the best team, the team on the farthest left, the first place team, didn't necessarily score the most goals.
Jared: Yeah, that's really interesting, and that comes right out the minute you start to look at this chart. It's like wait a second, the teams that didn't actually make it to the end like Germany and Uruguay scored more goals than Spain did.
Brian: In the sense of storytelling, what's going on there? Why is that the case? Hopefully, if this was supplementing a news article or something like that it might help to clarify or bring up more interest in digging deeper and figuring out what's going on.
Jared: Right. I also see from the goals conceded that Spain also wasn't the least number of goals conceded, but they were up there.
Brian: That's the problem with elimination round. One mistake can send you home.
Jared: Yep, yep. Wow, this is really fascinating. The other thing that sort of jumped out at me was how you separate out the progress that the team made in terms of World Cup. The finalists have the lightest shade background and the backgrounds for the various teams get subtly darker as you move. But what's really interesting about that is it's very subtle so you can see the difference but it's not screaming at you.
Brian: I think that's also one of these things that partly comes from experience and just trial and error. You caught onto that without me having to blatantly say and label things so that's certainly a success there. But also, yeah I guess the fact that it's just subtle things that people can pick up on. I've engaged you into this even further and further as opposed to just saying Spain won or, you know, telling you the score. Now, you're playing with it and you're learning. You don't need to hold the hand of the user or the reader through everything. They're smart people. They'll pick up on these things as well. There's a fine line there on how to not handhold too much but not throw someone into the deep end.
Jared: Right. Yeah. Well one of the first things I noticed, the first thing I did was what a lot of people do which is I went and found myself, so I went and looked for USA, right? And this is a grounding activity, I've noticed before. If you give people a map the first thing they do is they go and look for where they are in the map or something they're familiar with in the map. In this case, I went and looked up how did USA do here. And you know, given that it's the World Cup and we don't really pay attention to our football teams, I think we did pretty well. But it's interesting, I immediately got the sense that I knew I could just look at it and tell that we made it to the round of 16. I could tell that we got a decent number of goals, only a few less than Spain did, in fact, and I could tell that we conceded probably more than we probably should have.
Brian: [laughs] Yeah. It's a matter of conceding them at the wrong time, as well.
Jared: Yeah, so there is that. It's all really interesting to me and I was able to pick that up really, really fast.
Brian: If you look in the journalism world, you've never read a headline that says there's some interesting data in here and you find it, but a lot of the time that's exactly what...people who get excited with these data sets and these visualizations, you know, we throw everything and the kitchen sink at them because they're going to figure out and love it, blah, blah, blah. In many ways, the journalist has pared it down and picked their story and tried to say what is the reader going to be interested in and let's write it from that point of view, and much like you've done. You've said I want to find out where I stand and what's the story about the USA? We've built that narrative so you can explore that data in the way that you want to.
Jared: Well that's really fascinating. I never thought about it that way but you're absolutely right. The headline never says you need to read this because it's really interesting. The headline tells you something that catches your imagination. That's a good question. Is there a trick to learning how to bring that headline data out of your visualization to sort of grab the viewer and say, "Hey. This is something you need to spend a little time with"?
Brian: Sure. I think any class on writing, an English class, a writing class, a journalism class is probably really, really useful even though you might be a designer, a programmer, or someone just dealing with Excel. Because at the end of the day, you need to understand the five W's. Who, what, where, when, and how. When you're presenting the data, does your visualization answer those questions? Who was the best team, how did they do it, what was it, where? If you can't answer a simple question like that maybe you're trying to bite off too much or you're trying to answer too many questions. I would say just pare it down.
Jared: It's interesting to me that there are these equivalents. One of the things that is occurring to me is I often talk to people, when I'm talking about visual design of a web page I talk about how when you say visual design almost immediately everyone's mind goes to aesthetics. Really the value of visual design when you're talking about a web page is the priority of information, that the most important stuff jumps out at you and that the more subtle and stuff you're going to need later whispers to you at the right moment. And it occurs to me that in data visualization that may also be the case, that while aesthetics are important it's really about communication and the priority of information.
Brian: Very much so, yeah. Because if you think of it just like a movie, there's going to be your lead character and your supporting cast and then there's going to be the cameo appearance. You're not going to want everybody in the movie trying to be the lead character. The same with, like you said, a web page or any sort of data visualization. There's going to be something that you want to shine and then there's going to be stuff in there which is purely in there to help the data shine.
Jared: That's really smart. There was a movie I saw a few months ago which was one of these movies where obviously the whole point of the movie was to get as many different top name stars in the movie as they could so it felt like there wasn't a lead character. It was really confusing because you didn't know who you were supposed to pay attention to.
Brian: At the end, you probably can't even remember all the famous people.
Jared: No. No, I can't. And so that's interesting. There is this same structure like you have with a good movie or a good story, where you have to have a lead character and then supporting roles. I had never thought of it that way.
Brian: I think maybe people see visualizations and infographics as it's new. It's a new field, but you can certainly learn a lot from existing other disciplines. And I don't think... it might be a new way of telling a story, but you don't throw away the thousands of years of sitting around a fire and telling stories and getting people captivated. That still hasn't changed even though it might be interactive and touchy-feely on the web.
Jared: So it always comes back to storytelling. That's what you're saying here?
Brian: I think so. What is it? It's a requirement, not a necessity. I think you can do data visualizations without storytelling but they won't be very good. Yeah. I can't remember how that works.
Jared: [laughs] It's OK. I'm sure we'll figure it out. I think that... yeah, I mean, a data visualization that doesn't tell a story, I guess, is just a bunch of pixels. And a story certainly doesn't need a data visualization, but together they bring out something amazing.
Brian: Yeah. I mean it's just another way of telling a story. Sometimes we do it in English or in a native language and this may just be a pictorial version which, in more cases than not, is more number driven. You are still trying to tell a story and there is probably a lot of the same attributes. There is a hero, there is something you want to focus on, and there is a start, a middle, and an end. As with any good story, data visualization will have the same.
Jared: This is excellent. I can't wait for your virtual seminar so I can learn how to do this myself because I've always wanted to do that. The virtual seminar's going to be on May 17, to remind everybody. It's called "The Design Choices You Make for Information: How to Create Great Data Visualizations." Of course, we want to encourage people to get your Practical Guide to Designing with Data, because that's an awesome, beautiful book. I'm very happy it's on my bookshelf. This is really exciting. Thanks, Brian, for taking this time.
Brian: Oh, thank you. It's been fun.
Jared: I want to thank everyone for listening and, once again, for encouraging our behavior. We'll see you next time.