 There we go. So I'm going to be talking about successes and failures of visualization on the Obama campaign and I'll start at the beginning of my story here the first I heard that there was a technology team for the Obama campaign was one my friend Chris Ganson said hey, I'm going to be working on the technology team for the Obama campaign and immediately my first reaction was wow, that's awesome. Congratulations. My second reaction was there's a technology team for the Obama campaign and he said yeah, you should move out to Chicago and join us and he was probably kidding, but things happen quickly and my wife Brady and I moved out to Chicago several weeks after that That was September 2011 Which meant among other things that I got to work for this guy With these people this is this is the technology team along with support and DevOps So this is actually a small portion of the the entire campaign staff And I got to work in this place, which was a total madhouse at the peak. There were about 650 people working in this office. This is downtown Chicago. So that's that's a small fraction right there But we were all kind of packed in Side by side but still room for secondary monitors, which is nice And I was really excited because I got to show up with this title of visualization engineer Said oh, this is gonna be great. There's so many opportunities for visualization and Sure enough after you know, they got me started on some slightly less exciting projects I think to make sure that I could actually write some code Then I got this product requirements document for catfish campaign dashboard version one It's like oh, this is gonna be great You know we're gonna make this integrated dashboard and show all this data from all these different things people are obviously caring about a lot of different types of information and And so started working on this with all the latest and greatest tools you know Twitter bootstrap had just come out a couple of months earlier And we're using D3 for visualizations and setting up this neat structure for doing all the back-end processing We were pulling in, you know Twitter followers all the way it through to Data that was a little bit more relevant to everyday campaign operations and so this was super exciting It was described to me as perhaps the most important project on the campaign And then we killed it And So as this animates and you all get hypnotized. I'll describe this a little bit more So of course at first it was disappointing, right? It's like oh, but this was the big visualization project, right? This was the big thing and and I think there were a couple reasons it got shut down and and one of them I think it was really about like what are we building for whom and why does it matter to them right now? And the reality was the people who were in charge of watching the number of Twitter followers They already had a way to see that You know people who are watching the budget or figuring out, you know, what our strategies were going to be in different states They already had their own tools Right and and just saying yeah, we're going to make an integrated dashboard and show everything wasn't actually solving anybody's problem and I think it relates really nicely to what Amanda Cox was talking about yesterday of like what kind of wow Do you want and and for a lot of circumstances? Wow on its own doesn't really get you very far, you know the election obviously is this extremely constrained environment in terms of time and money and everything else and I think pretty much the only kind of wow you can get away with is wow this makes my job easier and more fluid and Hopefully if you get far enough Actually feels different it less like busy work and more of you know what I'm doing So I think that's where where catfish failed. It didn't fit any of those needs really The other reason I got pulled off that project is we had to put more work into our campaign secret weapon question mark and So I switched teams and I joined a slightly larger team working on what was codenamed wire What later became known extremely confusingly as a dashboard So here's some early wireframes. We had for that Few more iterations towards the end it ended up looking like this which actually sort of starts to look like a dashboard again So I'll talk a little bit about the team and the process we had This was towards the end We were trying some different experiments with how to prioritize features and how to have a little more visibility within the campaign but we had a team of a Kind of a varying number of engineers and designers But at its biggest the team was maybe 10 people or so and We had we had daily stand-ups. We were shipping code weekly with some exceptions, but not too many and Luckily, there were still opportunities for visualization. So First actually, let me talk a little bit more about what dashboard really was it's it was described as the online field office So in 2008 there were a lot of you know, social media pieces to the 2008 campaign and Excuse me and there was a really strong field structure, but they were pretty separate entities Right one wasn't really a channel feeding the other and so one of the big things for 2012 is we wanted those to be integrated You should be able to come to Barack Obama comm and say yes I want to volunteer and and be part of that field structure by joining that online So dashboard was really our attempt to do that So early on when this was getting going we wanted some way to show. Yeah, there's there's activity on these teams, right? it's not just a list of teams in states and things and So one of our designers Taylor Lacroix put together some designs for saying okay Well, if we just want to show the stuff that's already happening in dashboard like comments and things Let's have a fun little interactive graphic that we can put on the team page and show something So we ended up with this so this is showing Messages and status updates and things like that over the last seven days So if you hover over one of those sections, it'll give you the number for that day and you can kind of see oh, yeah there's there's stuff happening here and just to talk about the technology a little bit for this we used D3 for the visualization and Actually me so data set for the data side and this this helped a lot For the fallback case so some of you may know D3 doesn't like loading and older browsers whether or not you want to use it for rendering So with data set we were able to split that out and admittedly the processing is not very complicated here on the data side We're calculating percent change between two numbers, but In older browsers, we had essentially exactly the same layout But without the arcs and that worked pretty well Kind of a simple way to do that So this was fun We really proud about proud of it and you know I got to use D3 which was neat And we we built this thing over the course of a couple of days and then we killed it so There are a couple reasons for this one too one is that dashboard was still really early on in its history and a lot of These teams actually didn't have activity so you go to the page and you see zero zero zero So you know that was sort of a problem The other thing that was happening though is that there was activity starting to happen that was more important So these are the things you might more closely associate with a with a campaign, right? It's really it's about call attempts It's about contacting volunteers. It's about how many voters have we registered, right? This is really the heart of the field operation and More than just the numbers coming back There are also goals set for all of these things you may have heard that the campaign was a very metrics oriented place And that was true in a lot of ways. This was one of them Okay, so now we've got a new challenge. This will be good and So this is actually a little bit tricky. This is not what the interface ended up looking like This is a really early sketch, but if you think about this problem, it's a little bit complicated because you have you might say okay, we want to make this many calls in California or in Nevada say and We want to do that over the month So you've got to break it down week by week what our goals and then you have to break it down through the field Hierarchy because you've got the state and then you've got regions all the way down to neighborhood teams So it's actually kind of a difficult thing to plan exactly And then at the high level you want to be able to see how you're doing, you know, how's your state doing? How's your team doing? So we started sketching out a lot of stuff in D3, you know, tree map seemed like a good idea, right? You can show the hierarchy and the values You know playing around with sizing that in different ways Tried some fun stuff with radio layouts But eventually you decided to focus on this idea of how do you plan? how do you set these goals and Start thinking of it this way where you have your overall goal and then you have a path to get there And then this has this nice property where you can overlay the actual numbers as they're coming back and compare that to your plan And so this isn't quite the final interface. I unfortunately don't have a screenshot of its end state But it's pretty close So here you can see there are these high-level goals up top and Then you have the the rising line that shows you how you're doing and is you know Determining how you want this curve to look The teams might be growing or you know, there are things like that that affect that it's not strictly a linear thing And then on the left it's balancing those goals across the teams within your state or within your region and It's coloring by how close they are to their goal So you could drag these things around or you could type in the numbers And once you're done with that you can see at the bottom it generates this whole table Right it does all the math and figures it all out and there are all your goals It you know for all the teams and then you can hand this down to the next level and they do their planning We're pretty excited about this we were getting some really positive feedback surprisingly positive feedback maybe even and So then we we deployed it people started using it and Then we killed it and this one was actually a little more subtle and it started We started finding out about this through bug reports or feature requests, right? So people are using it everyone's like yeah, it's great. It's a really cool demo And then we got it a feature request that said oh, hey, could you change it so that you could you know more carefully drag that dot? It's like well It's kind of a funny request because if you're dealing at the state level like what's the difference between? You know you move it one pixel and you get three more calls or something right like what's the big deal? And if you're at the team level you're talking about small enough numbers that you have finally fine enough control And so it kind of went back and forth and back and forth and it turned out that Whichever state this was they already had a spreadsheet doing the calculations and all they needed to do was enter the numbers So we had designed the worst possible text entry tool effectively So even though it demoed very well, and it matched conceptually what they were doing it didn't match their existing workflow and We saw that in a bunch of different places and in different ways because the different teams had different histories They'd built different custom tools So there was really a widespread of what what people's workflows were and what they were bringing to this So I'm going to take a slight detour and talk about some of the other visualizations that were used that we didn't make Well, okay, this one we made but this was pretty simple Simple countdown this was on screens all the time just to remind us how little time we had left down to the second This was posted in the lobby It started with just the countdown and the numbers and then Maybe at 40 days out and they added the sprint then lean as if you could sprint for 40 days, right? Although incidentally we did work 40 days straight for those last 40 days I'm sure plenty of people watch this during that whole cycle. That was a particularly nervous moment for us But you know we started pulling back out of that gap out of that trough But eventually I saw this tweet from Nate Silver and thought you know, maybe we shouldn't be paying too much attention to these But there are plenty of things we did pay attention to we used chart bead and a new relic and other tools like that that gave us some visibility and Every so often we'd see one of these spikes and you might wonder well What creates a spike like that and this is just on gotta register calm This is like a very specific voter registration page. This wasn't the main site or anything And that happened when Barack Obama did an AMA on reddit And of course everything turns into a fundraising opportunity, so we also had this page Here's another one of those this actually is for dashboard and we'd hit, you know, almost 6,000 concurrent visits You might wonder what causes that to happen That's when the president does a live video streamed through your website But I think more interesting than those visualizations in those metrics is the fact that these started showing up in our conversations We had a campfire chat room For the whole tech team and you know discuss all kinds of things post in your favorite images from the internet Where all most of these things are taken from in my presentation But you see these things like this where you know, you've got the visualization is just a screenshot and it becomes part of this dialogue Including things with a little more detail, you know showing stats d and graphite graphs This is one of my favorites just because it's lazy universe hydration vis which actually means something real I won't go into it in too much detail, but One thing that's neat is You really know that that visualizations are becoming part of the conversation and part of the lexicon when you start seeing stuff like this As you might suspect that was photoshopped But if developers and designers are making jokes with visualization You can pretty much guarantee that it is part of the language and part of just the mode of discussion So here's just a shot of some of the the new relic graphs we were looking at for performance monitoring And that became a big part of the whole of our whole dev ops workflow and monitoring Much like what abe was talking about in fact using some of the same tools We had a really great dev ops team And you know, we love dev ops because they deploy our tags But we love dev ops even more when they show up with screens like this So this is using cubism. It's an open source project Built by square it uses d3 for rendering If you guys haven't seen this particular technique, these are horizon plots And it's a really neat way of dealing with With graphs where you need essentially a lot of dynamic range, you know, normally if you think of doing a line graph Or something like that you need room for your highest value always And if you have things that are, you know, usually down here and then jump up If you change that scale now you can't see this variation anymore, right? So this is a technique of essentially wrapping those around So the darker color Means that it's exceeded the scale and come up to the bottom again So you basically preserve dynamic range and you can have these things that are only a few pixels high And of course once you've got that you can stack a bunch of them together So dev ops use this view to look at correlation, right? They'd see they some alert would go off or someone would complain about something not working and they could pop this open and see Okay, which of our systems are are having this problem and it helped them get to the root cause So I don't know if you've seen this but this is the wind map by martin waddenberg and fernand viegas And I wouldn't say that we use this for everyday monitoring per se But this actually was a an interesting moment for us is uh That was during hurricane sandy And there were there were plenty of things that happened in that it was obviously a terrible event But one of the first things on our mind was That's awfully close to amazon's east data center And we were running everything on amazon Just to give you a sense of the size of our infrastructure This is what we had running in east Now zoom in a little bit so you can see part of what's going on here every one of those tiny little boxes is a node is an ec2 machine So that was in east there's a whole separate story about the two-day scramble to get Part of that replicated in west just in case something happened with amazon But it did work in the end So back to some of the tools I was working on After working on dashboard for a while, uh, I got added to the voter protection team And there were a couple of tools that we built for that So obama prepping thousands of lawyers for election. You might wonder what that means exactly We didn't have thousands of people filing lawsuits But we did have thousands of volunteer attorneys going to observe polling places And it turns out that's a pretty massive thing to coordinate, you know in previous cycles That was done basically with printouts of excel spreadsheets and a lot of phone calls But this time around we wanted something More structured and and easier to use So there were two pieces there was the volunteer assignment tool which I'll show just briefly It doesn't have too much visualization in it, but It's got a little bit and some I think some nice little touches So you pick which state you care about and then you get to this page which shows you You know per county you get to go in and drill down and say, okay here are the polling places We want to cover here are the volunteers who've signed up and how do we match them up? And there were some filtering tools to do things like find out if someone if someone spoke Spoke a particular language we could assign them to a particular location and that type of thing And then up on the right they're all gray in this view But there's a little bar under each of the dates and that would go from A scale of gray to green depending on what percentage of our target places were assigned So you get that kind of at a glance You could also look at some tables of you know how the assignment was going And then here was the thing that again wasn't visualization per se But I think helped create a more direct tool So once you assign all these people you have to email them and tell them where they're going when And so this is a little interface I built where You can check the people you want to send it to and it'll automatically pull up their schedule information But then you also have this text box right in the middle of it That just has whatever personal note you want to send, you know, hey team We're going to meet up at, you know, 6 a.m. And you know, whatever you want to say And then it would send that out to everybody So that's the assignment side Then we have the incident tracking side, you know, how do we actually record things that happen? And we we built this on top of Ushahidi, which is an open source platform that was developed following the The violence after the 2008 elections in Kenya And they've been doing really amazing work with this tool and it's been used in a lot of cases And out of the box it looks something like this And we ended up customizing it for the election And at the end it looked more like this so We still have the map obviously and then on the right we've got these different filters or the different Just a bar chart of the incidents that are coming in from various counties So you can see like, you know Where really are the problem areas and then if you mouse over those it'll show you what type of what type of incident it was Then up top we've got a bunch of filters So you could look at a particular state You could look at all the categories some of the categories you could pick your time range, you know today all time last hour And then the statuses so as these were dealt with, you know, they'd be they'd essentially be marked as closed And this actually fit the structure really well because we had a national boiler room We had state boiler rooms and we had local boiler rooms. So people were really Everyone like had their job of the thing they were looking for and the type of thing they were trying to handle So you can see this drilled into florida You can get some details there Then you'll see there are these tabs up top for the overview and incidents And if you if you click the incidents list now you get the text of all of these And both of these views were refreshing on a 10 second interval. So people who just had this up all day long Actually more than all day long. I should point out that this tool launched before early vote started And so that was I think the end of october in iowa and then states coming in through then So this was not by any means a one day shot So then the people at the polling places could submit the incidents This is you know pretty straightforward choose the categories whatever Um also worked pretty nicely on the phone And then we had people manning phone lines as well So anybody in the country could call the 800 number and say hey, we've got this problem or these lines are really long People are giving out false information that type of thing And there are a lot of metrics for for success. Um, some of them you can graph and stats d But i'm i'm now particularly fond of this metric And I think part of the reason the design worked as as well as it did is because The team that I was working with on the voter protection side had a lot of experience doing this work You know dashboard was was a really big project and it was really the first of its kind But for this area, we had people come in saying We've done this, you know seven times at different levels. We've worked in different roles And we basically know what we want And it still wasn't the case of oh, here's the feature. Let's go build it But there was a much, you know, we had experience in the room of what it worked and what hadn't and what the pain points had been And that helped a lot I know i've trained you that after, you know, the rave review I say we killed it, but this one we ran So then it kind of came down to it time to actually go vote This is the collection of things I had hanging around my neck in the last few days Boiler room level one sounds really amazing. That's actually the lowest level of access Secret I was just up there because the big shot lawyers were in that room also and if something went wrong They needed to run down the hall and find me Now you might think that you know, we stopped shipping code Pretty close to the election But uh on november 1st, we still had 32 deploys from the day before and then on the third 41 deploys So things were still flying around furiously Election day for us was really three days So we started working on shifts on that saturday That's the countdown when I walked in at 4 30 a.m on that saturday Went in and saw this sign up in the boiler room Watched the sunrise over the lake Poked my head around the The you know level three or four or whatever it was room before anyone showed up They did eventually turn the lights on So you all know the saying it's it's not over till the fat lady sings I think there's a little known corollary that says It's it's not almost over until eric schmidt sends you a fruit basket So then we knew we were really close So what was actually going on in these final days? We had call tool running so call tool was the thing that our team worked on to facilitate voters calling other voters You know about different issues saying are you registered that kind of thing? On election day, we facilitated over a million calls If we were watching on this dashboard Go call tool So I don't know how much you guys were following the the press around the technology You know either for our campaign or the romney campaign But you may have heard about this The romney campaign had a tool they called orca It wasn't really equivalent to any any of the stuff that we had and Fulfilled a slightly different role I think their biggest mistake is that they intentionally named it so So they called it orca, right Our our sort of secret You know data service was called narwhal And someone from their campaign on television said that they called it orca because that was the only known predator of the narwhal So hubris beware, right So we started hearing this news on election day during during the afternoon and all these tweets were flying around And I won't lie. There were people in in headquarters who thought it was pretty hilarious But there were other things happening at headquarters Thanks to an excellent dev ops team and all our monitoring we saw that yeah, we were taking all these incidents But we were also running out of headroom on our database cpu And because we had professionals watching that they came to me a couple hours before it would die and said hey You've got two hours If you don't fix this we're going to have to swap it out, but we can't swap it out live We'd have to stop it and bring it back up Which was not something we were excited about telling anybody So we were scrambling a little bit and weren't focusing too much on orca But not wanting to be the next headline, right? It would just be a matter of minutes for that Luckily by looking at new relic and by talking to smart people and people who were keeping us from freaking out We were able to fix it. You can see that line right there is the deploy we made At 230 And looking in a little bit you can see all this dieback down everything goes back to normal It turns out we had one extremely inefficient database query that we weren't even using it was just kind of still sitting there We were able to excise that and everything was fine But if if we hadn't been watching it as carefully as we were the thing just would have died Without us, you know knowing ahead of time or or having a chance to fix it So you might wonder what it was like up in the boiler room when the election was called That went on a little longer, but that's as long as the videos that I got We went to the election night party Everyone loves confetti Or whatever crazy stuff that is Brady and me at the party Shirts by baltimore print studios quality establishment And so after that night You know, we eventually went to sleep having been up for a very long time And we wandered back into the office. It's kind of like well now what do we do? I guess we pack up our stuff and go home And we got an email that said you probably want to be at the office around 130 Okay, cool. I wonder what that's about and the president stopped by And gave a speech there's actually video of most of it online You can find it if you like but I recorded a little bit of it just the audio on my phone And this is part of it And the results I felt that the work that I had done In one extra office It came full circle Because you guys At this point Means that the work that I'm doing Is important I'm really proud of that I'm really proud of that And then earlier in that speech He said that he wanted to save time to walk around And shake everybody's hand He actually went around and Hugged everybody Which took a really long time There were still hundreds of people in the office And that was just a really unexpected thing None of us were prepared for that It was an incredibly emotional day On top of an emotional day So then we did go back to packing up our office And I had borrowed a copy of Of the audacity to win And it was sitting on my desk And while I turned around And put a sticky on it Then we all went home Thank you The question was what happens to that To all the tools So earlier on there was a thought That some of the code would end up with the DNC It turns out the DNC They do have a technology staff But it's not at a huge scale And this was the first time that there was ever An in-house technology team As part of a campaign So what's actually happened There's a new OFA organization So Obama for America is now It's a totally new thing But it's called Organizing for Action And they currently have all the code And so they're taking these tools And applying some of them to causes Instead of campaigns So right now climate change is one of the big ones They're tackling at the moment Gun violence has been a huge deal So not everything has been repurposed But they own those assets right now And they're bringing some of them back And that's what they're going to use Any other questions? Yeah Yeah, they didn't submit a talk That's it Alright, thanks very much