Data, Design, and D3

Transcript

Thanks for the intro. Super pumped to be here. So let's dive right in. So my name is Kim Niedermaier, and I work at ActBlue, which is building fundraising technology for the left. And tonight I'll talk about some design concepts I've applied and tools to make data visualizations that help explain a compelling dataset. So it seems kind of obvious, but you can't really visualize anything without data, as we just saw. And I'm fortunate enough to work at a place that has some pretty darn interesting data. So for some context, it's been around since 2004. And since then, more than 20,000 Democratic campaigns, progressive organizations, and non-profits have raised close to $2 billion with an average contribution size of just $36. So I started out on the team that was charged with explaining how these people were using our platform to make their voices heard. And monthly, we published top line numbers and sometimes included graphics to tell that story. This was one month into a job, and I had no idea what R or GGPlot2 was, but someone who had the job of doing these graphics said hey, I'm on vacation. Maybe you can just make a chart and it'll be published. And this is what I came up with. This is way before I knew anything close to data viz, so I want to spend a little bit of time in walking through how to make something like this better, in case you're starting out like I was, two and a half years ago, not really knowing what to do and what to look for.

So this is my revamped version. Still using the same data from 2.5 years ago. I promise you, we've broken some records since then. This is about 80,000 contributions in a single day. So if someone is better at math than me, they will know how many per minute that was. It seems like a lot. Felt like a lot then. But we're doing about four times as much now. But regardless, let's dive into the data viz side of things. All right. So you'll notice some differences, and I just want to break it down by kind of layers of information. So starting with the X axis, what you can see here is that just the number of ticks are decreased. I'm also ditching that military time thing and removing the label hour, because... Well, again, I made this chart. I own all the decisions. But anyways, we're gonna make it better. Yeah. Military time clearly needs a label, because I don't know if you're like me, but I didn't really realize that was connecting. But the am and pm conventions are pretty useful, so you should use them. And also minimizing the number of ticks. Very good. Next, the Y scale didn't include a zero. You should include zero, especially if you're starting with the limits, going from zero to about 7,000 in this case. And what else? I actually added more tick marks in this case, just for a little bit more context. In fact, the biggest hour was something like 7,000 contributions. But without having that additional label, it was hard for readers to actually see whether or not it was 6,000 or 8,000, and maybe it doesn't matter, but maybe it does matter. I think it actually matters when you are explaining this information to people. And finally the text is no longer rotated 90 degrees, so you don't have to strain to read it. You can see that it's contributions that we're talking about. And that's in the top left corner, which we're all conditioned to start from the top and read left to right. So putting as much information in that first corner to set people up for what they're going to see is going to be really helpful. And to that point, changing up the amount of information that's actually in the title, I found that one with subtitles -- now I can tell you that we're breaking records. And this is only accurate as of July 2014. But more importantly, giving people a little bit more information so that they know that we're talking about contributions here, and it's by hour.

And a little bit of additional explanation at the very beginning is what's gonna prompt people to be able to understand the information that you're giving them. Okay. This one is probably... If you only take one tip away from this talk, ditch legends if you can. Because this is what's... Your readers are going to be looking for the bottom to the top instead of in the line. And you really want them to be following the shape of the data. And get them to understand the patterns and things like that. But if they're distracted and looking at fairly unfamiliar colors -- I mean, we're talking about shades of I think old iPod minis, really, is what we're talking about here. Like I said, it was founded in 2004. There's a little bit of history that was fun, and I'll make fun of it a little bit. People are not familiar with the relationship between these three random dates and these three random colors. So if you can just consolidate that information into one stream of thought, then your audience is going to take more out of this visualization as a result.

And so hey -- we've got one more thing that I added. Which is: There's a massive spike at 4 a.m., and it's not because people are suddenly getting out of bed to donate money online. It's just not. Instead what we're doing is we're processing recurring contributions in a batch, so we can kind of clear the decks and be ready for the heavy traffic that comes later in the day. So providing this little bit of information here is what's going to, again, make sure that people aren't thinking that you're working with inaccurate data or anything like that. This is the story that you're controlling. So you might as well realize that you can't always be the one having a conversation with someone about this information, and so putting as much into note format on charts is really going to be beneficial. And you'll see that a lot in some of the examples that I'll include later. Okay. Voila. A slightly better chart. Get the basics done and then you'll find yourself in a much better position to tackle some more complicated graphics. So just to summarize a little bit, what we're really trying to do is get as much clarity as possible, and increase the amount of useful information. So to do that, it's add context and titles and subtitles, get rid of unnecessary elements. If access titles are intuitive, which are not military time, for someone like me, you can ditch that label. It's great. You can also annotate and point out additional information that way, and use those conventional abbreviations, and make sure that people don't strain to read things. Increase the size of fonts, minimize random colors, and just keep text horizontal. That'll go a long way.

Now is my chance to talk about why D3 is awesome and why you should go explore it. It's a collection of low level modules that offer the flexibility to compose any visualization that you can dream up. And because you're working with web standards like HTML, CSS, SVG, and JavaScript, debugging is very straightforward. So it's actually a fairly approachable thing. So if you've already got the basics down pat, and you want to, I guess, take it to the next level or something like that, then I definitely encourage you to come up with, you know, custom graphics. In a way that you'll see in the next couple of examples -- are fully taking advantage of what you can be doing these days. All right. So NPR has been doing some really cool visual stuff. And even though they're known for their audio, I just want to plug this chart. Because what I think is really neat about it is: One, it's a diverging color scale that makes sense. So you can pick up where the averages are. And in this case, that deeper red is where school spending is less per student. Per school district. And that green is where they're spending more money.

And what I like about it too is you've got -- the same rules are applied to every single school district in America. They're the same size. And so what you end up seeing are these patterns that -- the note that you may or may not see, depending on your eyesight right now -- Alaska is this row of points that's closest to me, and it's the most just dispersed. And then you look at some of the states like Alabama and Florida are highlighted, where it's a lot more concentrated, actually. So again, the same rules are applied. So you're letting the data speak for itself, and you can show that variation in a way where if you're trying to design something, and I mean like a much more just... What's the word? Instead of you calling out, you're letting the data speak for itself, and you're using the tools in this case, color and position, to explain that. So I thought that was a nice chart. And then next up, we've got kind of the prototypical example that the New York Times has done. In fact, Tufte's book in the '80s said this was a great mix of broad data and finer points. Plus it's interactive. And I'm supposed to keep this on the down low, but Portland is not really very rainy in the summer at all. So we'll keep that there for a little bit. But again, you get that broad part of it, with each of the days... Are composed... Like, you get a sense of what's actually going on. But also, you can look at the actual record-breaking days, in things like that. So it's really neat. They do great stuff. And again, the annotations are right there. So you can kind of treat your readers with respect in that sense. And then finally I want to close with this example. Which is a static chart from 538. And you can kind of imagine that this may be somewhere in the editing process -- they thought about -- well, oh, someone can just switch between the six different ways that states get revenue. From taxes. But instead, they're laying it out in front of you.

And so you end up with these kind of small multiples, and it's a really great use of just your classical graphic design principles, which is proximity, repetition, alignment, and contrast. And so you end up treating your reader through what you want them to be able to see. So again, news organizations have a slightly different point of view than your typical organization, or if you're building dashboards for only people that are going to see it within your organization or company... But these are some tricks and tools. And I just want to say thank you so much!

(applause)

And... Hold on. And I meant to say one thing earlier. Which is that the coolest thing that I think I found throughout this two-year thing, through data viz, is a donut chart is really just a stacked bar chart using a polar coordinate system. So thanks!