 Our next speaker, which I'm very excited about as I am about all of all the speakers is a visual journalist at the Washington Post Where she codes and edits and creates and designs interactive graphics and visualizations Before joining the post she worked at the Associated Press and the Guardian US office in New York So please help me welcome Kennedy Elliott so I've been tasked to Talk about coding for the news however, I think it should be said that I Think it should be said that there are a few concerns when I had this and it's that one the Washington Post is a Behemoth organization and we have a lot of more resources than most news organizations do and so I Could stand up here and talk to you about all the ways that we publish a lot of interactives and we make it work and we have a lot of reach and skills and varying degrees of things that we can do but I don't know how helpful that would be to you and Especially because I know that a lot of you are not in news and maybe you're sick of hearing about news by now and Maybe you don't care or maybe You know, it's just it's just not really what you do So I I'm trying to think of ways that I can make this really helpful and useful for you guys so I'll I have a Sort of undercurrent theme here, which is to think like a journalist because I think at the the heart of it All I think that most people in this room are interested in storytelling and they want to be really good storytellers So that is that is what I'm going to do Okay, so who we are so the Visual digital team at the post and I'm going to talk really fast because I have a lot to get through I know I'm going to be cut off for time. So there's basically three Digital visual departments at the post more or less There are a few others that are very important, but for all intents and purposes. These are the ones that we work with the most There's design and development, which our department is dedicated to infrastructural I guess designed in development. They conceive things like story templates and our website and All of our digital products in contrast. We are an editorial department. We are graphics. We Respond and focus on the news we work with producers and journalists Reporters photographers, etc to produce news stories and we work on a daily deadline I mean, you know, we have daily deadlines that most of the time we we typically have really quick turnarounds and we have You know news stories that we work on so we are made up of cartographers data researchers which are essentially computer-assisted reporters illustrators 3d modelers Animators coders designers writers bloggers and more we all have a lot of different skills and we we work together as a team and and we Most of the time have several interdisiplinary teams to produce these stories But at the heart of it all you're all journalists and I think everyone in this room our lowest common Denominator is that we are storytellers. You might not be a journalist per se But you want to tell a very good robust story and I think we can all come together in that at least at some point in your in your career Okay, so We also have several openings. So After if you're interested in here about this Okay, what does it mean to code for the news? We work in all different kinds of file types and types of media Include including gifts videos animation complex data visualizations charts and graphs and sketches and illustrations and 3d models and maps and sg's so we've got to find a way to bring it all together Our oh and so let me actually show you a couple of our trying to figure out how to navigate this Okay, great so here is a These are mostly some of our newest stuff Here is one that we did on some some repairs that are being made to the capital down and so here we have this nice intro video Where we have Get the Wi-Fi to work. All right, it's a little slow. It's a fully responsive design. We have This sort of complex animation to begin with which with some narration. We also have illustrations About the repair itself minimal text. I mean, this is just one of our many story forms. We have moving gifts to sort of You know walk you through the types of repairs that are being made It this story form just kind of fits with this topic. I mean, it's it's doesn't need to be an intense Story aligning everything but these little bits and pieces seem to work with this story We have illustrations that are made for Print a lot of times that we convert into SVG so that they have better SEO like you can see this text is selectable. So that's one one example This is one of our Olympics offerings We have this is focusing on the distance traveled in one second between all these sports And it has a little bit of sound too and it's really nice and this guy at the end is really slow because he's a so Let's see. I'm gonna get to those later Here's another one that is just a map of different types of state decisions that were made for the for the healthcare the ACA Obama care and what's different about this map is that all three decisions the type of exchange whether it's federal or state or their Medicaid expansion Coverage decision and then how many people are actually enrolled in a plan. They're all actually layered on top of each other So you can kind of make these Like there's there's no states that did not choose to expand Medicaid which is really interesting that there's a whole lot of federal states that do so and we also have You know these kind of stories over here that are pulled out To help aid the narrative flow, so let me just go back to the So as you can imagine that we have a very fast environment typically our stories take only a few days to turn around We had to have longer term projects But we do work under deadline a lot or pretty much always working under deadline So as you can imagine our code isn't quite the functional modular code that we would hope that would exist We reuse code a lot like using libraries is a big thing that I'll talk about in a little bit, but we tend to There's like this thing in news journalism Whereas if it works then you publish it and that's true. I think to a lot of our Chagrin that that we sometimes post things that you know as it gets a little hacky than just because we're under so much deadline But that's one thing that D3 has been really helpful for us It's really made a big a big shift in our newsroom Because it's so flexible and it has so much documentation We've been able to do a lot more with D3 than we have with other libraries So we've been really fortunate to have that the one Achilles Hill heal obviously is that it's not Doesn't doesn't have IE 8 support which as a newsroom we we have to at this point But not everyone is concerned with that For support we do tablet mobile All screen sizes we typically make Interactives a couple times to fit all of these sizes and we also have Sometimes the requirement that they're embeddable in blogs So you kind of get an impression that we're doing a lot with our code I mean we really have a lot even just doing a daily we Sometimes have to make multiple iterations of the same of the same graphic just to make it work In terms of process, we have a very iterative environment Especially I'm breaking news will get up sometimes a very basic version and then we'll add on and keep on Going going like that that doesn't fit everyone's needs, but that's what we do sometimes So efficiencies all glaze over a lot of these we've talked about a lot of I feel like my presentation is already out of date But we we do Google spreadsheets a lot just because we collaborate a lot with other journalists in the newsroom And we have a plugin that allows us to convert that to a data object that we use If not, I hope all of you guys have heard of Mr. Data Converter And if you I mean, I don't I don't really know the extent of knowledge in this room But it is so wonderful and we use it all the time. So please look it up If you don't we could use all kinds of libraries like jQuery underscore and D3. We are on github and we also develop a lot of Code tools that we use and reuse all the time for basically every single project we produce we things like sticky nav and Tooltips and a stepper which takes you through, you know different segments of text and that kind of thing and It's worth saying that It's Extremely worth the investment in time to make these templates if you're working with a lot of different people or if you keep feeling like you reuse the same code Nobody likes coding tooltips. I mean that is that is across the board Nobody enjoys that but we use that with almost every single story that we tell so why not just make something Once spend a little bit more time making it once and then and then we can we can use it very easily for the next times And and we definitely do that a lot. So I'd really like to press That upon you There's another I know Sam was talking about templating in his last in his last talk and there's this template library that I personally life It's like it's changed my life. It's called I can has I don't know if anyone's heard of that But I would definitely Suggest that We also have internal templates for producers. These are our reporters that like to do charts and graphs and that kind of thing That's more of just a nice to know We do all kinds of things with map and design Font awesome is is something that we use for iconography and it's completely free state case from Pro Publica is really nice And someone was asking about colorblind color colors to accommodate colorblind folks Yeah, there's a plug-in for that that is really nice I don't have the name of it off the top of my head, but you can build something You know, it'll show you what the colors look like for a colorblind person. So it's really it's really useful and There's a couple other Other things that I mentioned like svg crowbar, which takes svg's that you created in safety 3 and it'll turn it into something you can manipulate an illustrator for like a static static version so And here are some obvious advantages of being on a large team and what you can do if you're not And so the first one would be an editor I think might mention this before but getting someone to look over your work is so so important My editor tells me if I'm off base on my store if it doesn't quite make sense or if the visual hierarchy is all messed up or You know, I need to add more context or annotate something a little bit more So having an editor is extremely Instrumental when you're telling stories with data and you're in your visualizing things because there really isn't a lot of research out There that that you know that sets down set conventions that everyone can agree with so what I would recommend to you is To get a friend to look over this and slightly creepy and maybe a hipster type of person But you if you do this you are already doing more than most newsrooms are because We don't we typically don't do a lot of user testing which is a which is kind of an embarrassing thing to admit but you know, we we typically don't have the time and So please get a friend and congratulations. You're gonna be doing more than most newsrooms are at that point And really get some honest feedback so obviously another thing is that we have the manpower to create a lot of templates and and and Infrastructure which may not even pertain to you know singular bloggers out there But we had this one project where we were taking all the screenshot or the the opening Stills from the house of cards intro and they're all obviously places around DC And so we had a few people on our team Tracking them down on Google Maps and they got all of them And then we just built a little like fun thing with it But just having you know manpower to sit there and do that for a couple and have it done in a couple hours Is is really nice. So I'm bringing back your friend again You know partner with people that don't have the same skills that you do if you're interested in building some sort of Visualization or a story and you think that illustrations would be really helpful, you know find an illustrator There's plenty of talent out there and there's plenty of people that are willing to You know work together and then you can build something a little bit more powerful and have it have a little bit more reach So obviously libraries is is another advantage of working on a team And this is an another thing that I'd really like to Emphasize is that please start building your own because they are immensely worth it. There's a I think in a way Templates can be a little bit of a hindrance Because we tend to fall back on them We don't really think outside the box and we don't keep you know when there's a template that exists We tend to go back to that comfortable area and so, you know not having these templates in a way is kind of a little bit more freeing because you get to you know think creatively and You know really curate a Page or a layout or a story type that really fits fits your content so And this is my favorite one. This is a really important one and something that I really really like about where I work We have a chat system that's up all day and we use it pretty frequently I mean we really like to share links and they can be about visualizations or design or color schemes or just an interesting article or you know a news Graphic that we feel is kind of funny looking and That sharing among your peers is so instrumentally different studies on this that really say that it adds a lot of value and engagement and happiness and you think you know broader and More critically about what you're doing and so there's so many positive benefits of sharing With it with a group of people and so obviously my Recommendation would be to make a short list on Twitter of your favorite You know inspirational people or or ways you can get you know start of a chat with friends or or whatever works with you but just implement this at work if you don't have it already but really Get something like that going and and what makes are so successful to me is that we use it quite often I mean, we're not always chatting all day long But I find some really really interesting things from our from our group discussions And I also hear a lot of really interesting feedback. So implement this at work or among your friends or And and don't only just take in but put back to and and think critically about things because it's really you're gonna see Your understanding of something really expand. Oh and then also So this is this is the the other part of my of my story here Think like a journalist. So a good interactive isn't always something that's really technically advanced I mean, I feel like there's a lot of technical people here But when you're talking about storytelling, it's not just about building something. That's really cool and technically difficult it's about connecting with an audience and telling a story in a way that that makes that is easy to process and Speaks to that the I hate saying end user because that's so sterile, but the reader here You really want to connect with them. So we had I just want to briefly show to to Projects that we did that weren't very technical technically difficult. So Let me see if I can even find them. Oh So we had with the Malaysian flight that that Disappeared and it was the biggest mystery. We had these two Graphics that and this is not I Think I had connectivity problems. Oh So it is a scale graphic. So one of the news one of the stories initially was We we're looking in this area of the ocean that is extremely large and no one can find this plane And no one really knows why and so one of my co-workers had this idea like, you know What is what does the deal with with you know searchable area in the in the ocean and Okay, it's not rendering correctly right here for some reason, but it might just be because of the screen sizes but it is a brilliant graphic and And it basically just in a very very simple way, I mean this this was up in a few hours It really takes you through You zoom into this little blue box and it gets bigger and bigger and bigger I mean very easy this tiny tiny little plane and you're like, oh that is the searchable area that they're working with and Here's another one that kind of was in the same line of thinking that is is the depth And so once they started hearing there, you know seeing these pings off of the black box We we see now we have to go go down and find it and then we have this depth depth depth graphic That's kind of similar to the xkcd Stuff and it really shows you I mean this is this is crazy and and it you know it went pretty viral I mean it got a lot of shares and it's very technically simple But it's I think what I'm trying to impress upon you is that sorry so slow here What I'm trying to impress upon you is that Just to start first of all to start with a question, but you have to pay attention to this nagging feeling that you have when you're Listening to hearing news or reading about your favorite topic or subjects That something does it isn't quite just explained very well Or maybe you have a question and then you kind of bury that Feeling because you're like well everyone already knows to answer the answer to this and I'm I'm just ignorant about this topic So I'm going to keep reading and just you know assume that everyone knows this now like pay attention to that noise because that is Probably one of the best ways that you can actually identify a really good story And this base, you know includes things like Things that are under reported or just not covered at all or things that you just really need more explanation on or maybe you feel Like you fell asleep too much in history class and you and you just don't have this knowledge No, so many people have the same questions as you so it's really important to pay attention to that little voice inside you and Pursue that because I think it can lead to really interesting things like the scale graphic I mean that was just a nagging feeling that one of our reporters had and it What you know a lot of people had the same question about it and so compared that Idea to something like you know getting the data set for how many tweets or you know The volume of tweets during a presidential debate or the types of hashtags during you know We've all seen stuff like that and that is a dataset that might be really easy to get via the Twitter API or some other means but it's not as compelling because it's it's not very surprising or or Invoking to the reader and so I guess just beware the easy data set because It can lead to some pretty You know I just think that there can be a more robust or more interesting type of a story that you can go with so and Then once you get the idea for the story make sure you're telling a complete story a lot of times that well, so you know a lot of times your ideal data set doesn't exist so imagine your ideal data set and You know even if it does exist It might not necessarily be enough to tell your story I mean, it's quite possible you might need two or three data sets And so what I would recommend to you when you get to that point is talk to an expert in this area Talk to someone who really knows this topic and they'll be able to clue you in on what you know what you're missing or what you just are not considering and In terms of getting data sets, I know that's always kind of a tricky business But it's it's kind of amazing what you can get when you actually call a company or an organization directly I don't feel I feel like a lot of times I've called and it really doesn't matter if I'm from the Washington Post You're not they're just like sure. I'll send it to you So, you know, don't think that everything is unattainable just because it's on a you know It's it's hidden within an organization. Just call and ask and for you what you can't get that otherwise but So another thing that I wanted to So so so basically it's my advice is to call and ask an expert for example this exchange this Healthcare interactive that we made there is there's this section here That's like it talks about the percent of potential enrollees enrolled in a health care plan in each state And I thought that you would just obviously set that number the people that are in a health care plan Against total state population that I mean that just seems like it would be the most obvious thing But no I mean after I talked to a talk to an expert in this topic that is the worst thing that you can do because each state has Different like a different group of potential enrollees Because most people are insured through work and there are actually a very few relative to total population that would even really Likely apply for this kind of thing and so you you have to take that group of people and compare the Applications to that and so it would have been it would have been a wrong dynamic to compare that to state population I would never have known that I had not talked to someone who was an expert So that just you know gets you a better more sound something that you won't find Some blogs which has definitely happened to me so you know definitely definitely You know do your work about that also This can include stuff like you know comparing numbers to GDP per capita. I mean GDP per capita GDP There you know put everything in 2014 dollars those kinds of things that you know those of us who are not economics or Statisticians kind of forget sometimes so you know if you're a non-journalist and you're trying to tell a story like that definitely definitely Make sure you're You're getting all the information so my next suggestion is to dispel conventions when you're at that You know when you when you finally got your data and you feel like you are you know pursuing that path now It's time to select a visualization and what I would really like to emphasize is that It's really a good time to think outside the box I mean I find it very heartwarming that everyone up here has been so open and honest about their failures and Their trial and error methods because that we definitely don't have it all figured out at the at the post and I Certainly don't and so it's really nice when we have these opportunities to come together and share what works and what doesn't and you know what I should have known when I was learning this and and so it's extremely beneficial when we all share this information and Really you just kind of have to try things sometimes and and start you know start from scratch I mean you just kind of have to imagine a world without these preset notions in our head like use You know a bar chat bar chart for this data set although that you know sometimes is the best way to go But really there are some of the best Visualizations haven't been invented yet And I just like to encourage everyone that there are new ways to visualize things and new fun things to do and You know doesn't work with every story But you know, I just I think I'm excited to see you what what new Visualizations are coming around the corner in the next two years or five years or ten years So oh and then there's this really awesome. Okay, so I read this new story the other day. This is so cool The the acts has been reinvented like the the tool the acts and that is the coolest thing ever So some company and some Nordic country reinvented this and I can't remember exactly which one Thank you. Thank you guys so the axe has been around for a million years by some accounts and It is not efficient. It is it this axe has okay So so the deal with with the axe is that? The center of gravity is in the middle and it is not optimal for splitting the wood so now there's this new axe and It has a slightly skewed center of gravity and is much more efficient And that is exactly what I'm talking about like you have to kind of just think outside the box if if you if you've seen and you're Familiar with an axe then you might not think about the center of gravity. You might just say oh, it's just this accepted convention and And then you accept it too. You don't you don't think critically about it now saying that everything can be reinvented but there are definitely room for improvements and You know, I just I just I get really excited when I see new things that I've never seen before and it really works for particular for a particular story, so Go go to new story forms. Oh, and I'll show you a couple. Um, you know, this these are just A few oh no Okay, so this is a this is a force-directed layout brought to you by D3. I mean this is very common there's Bunch of bunch of little fun things going on and you can look this up on your own if you want But but this is you know, not a new story type. There's no credit being taken for that But you know, there are just different ways to tell stories. This is completely there we go And so this is something we did for the Olympics as well And we had we're talking about the different elevations of the ski slopes for the for the winter Olympics And this is just an interesting way to lay it out. I mean, it's not it I mean, it's not something that you haven't seen before ever in your life It's not mind-blowing, but it's so appropriate for this kind of story And then, you know, we have we have this nice little narrative right here that takes you through a few of them And you can hover over things there's just Thinking outside the box instead of just doing a bar chart of the different heights and and having it shown that way I think it really works for this for this particular story and Then you can also see the the Degree of latitude latitude which also really works for the for this like side view and so here this isn't really a new story type, but this is a story that They did I think shortly after I came and it's about all of the children killed by deliberate gunfire in a year And we didn't want to use we say we I didn't work on this one But we we decided to to use names and just text instead of reducing these people the numbers and shapes and visualizations And I think it was appropriate for this one. I mean, this is it's not novel to have text, but this story I think required removing that visualization aspect, you know of shapes Because it is a very it is very heavy topic. So, you know, we don't have anything quantified Except for these big top line numbers or you know visualized per se, but the text does the job So, oh, and there's this cool one. This is really neat We do we're kind of doing more with gifts and videos and that kind of thing and it's gonna take a lot of load so we have like this neat little Neal this is a Syria refugee story and We have this like theme of the walking that the traveling refugee throughout the story and there's these all these little vignettes and You can click on some and read it read a little story. There's there's kind of graphics sprinkled throughout, but then there's this There's this line at the bottom. Oh, and then I think you might have to stay on the page a little bit longer But it tells you how many Syrians have left the country in the time that you have been reading the story And there's like sometimes a little gift of walking people There's also a really nice visualization about all the people that have left Syria in this and it's it's really powerful I would encourage you to look through it, but just thinking about how to You know little things that you can do to bring the story to life and again It's about connecting with the audience and that's really that's really your primary goal Oh dear so So, so this is another really important one your next step is to find narrative I think like a few years ago when we were all We were all sort of getting into interactive storytelling. We build a lot of databases and And that works for the time, but I don't think that's effective anymore I don't think audiences really want to see a database scatter plots of You know a bunch of data They're really gonna go if it's like a map they're gonna go to their home home state and the state that live in now And then they're probably just gonna kind of leave it as it is And so don't don't think in terms of databases anymore. Don't do a data dump on the reader I don't think it's as effective these days you I Mean I think filters help a lot But I think you need to guide them even more to finding the stories that are actually there in the stores that are actually present in The data so don't expect readers to see what you see you need to annotate your graphics You have to write it really sucks. I hate writing, but you have to do it And so annotate Do some pre-selected filters like we were talking about that I've shown I have a few more, but I'm really running out of time so So, you know call attention to these trends and make it obvious and you know Obviously people have already been implementing this. This is really old news for some of the more seasoned visualizers in the group But so and give context not just write in terms of annotations But build a story and this is something I need to be getting better at too, but you actually have to like Report out some things like everyone can take a data set and build a graphic that looks more or less the same But you're reporting and your storytelling your written storytelling or I mean not even text it can be anything is going to make The difference that's what's going to make it unique and that's what's going to make it great. So for example There's a state of the Union graphic Which is it's all it's kind of a tricky tricky thing to do because state of the Union addresses I mean you really have word counts and that's kind of it and you have to figure out I mean, there's more you can do for the more creative people in than me in the room but we wanted to do something with word counts and it was you know, very very basic But we wanted to make it, you know come come to life and so We interviewed a linguist and an historian to talk about these kind of trends in word uses over time And like we have these, you know pre-selected filters to really focus your eye where we're talking about and We have this commentary on why trends exist and there's some really interesting ones like for I mean, this is not the best example, but tonight just suddenly appears in the In the 60s and you know, you're like what no one say tonight before that But no, they just had them at night like that's all that was there and it's like, okay, you know I get that there's some more interesting ones in that but but that's sort of what makes it really unique Then we have this federal exchange one that That just has some annotations and some nice storytelling with it. I'm gonna go fast and so To wrap up Oh consider UI and design which Selecting the right UI Elements for your pieces almost if not just as important to selecting the right visualization Users really need to know how to understand and navigate your data, but also they need to enjoy Interacting with it. So just keep that in mind That should not be an afterthought and then share right social headlines and write social Text that is meant for Wide audience, it should be different than your own headlines in your own text and then lastly just Code and interact with a diverse group of people I am fortunate to work on a very diverse team I feel lucky about that and I think that I very much feel like the more we all share and we all More we all connect with each other the better. We're all going to be so Just code code with as many people that do not look like you as possible and we'll all be better for it So that's all