 All right. Charity monster, spawned from the jaws of defeat. Hi, I'm David Yanovsky. As mentioned, I'm a reporter at Quartz. I'm based in the San Francisco Bay Area. But I'm originally around here, which makes presenting to you all the more special for me. When I was younger, I used to come here, to the aquarium with my dad. It was before this theater existed, and actually a lot of the aquarium existed. And I would go around, and my dad showed me things like I showed some people yesterday, where if you go over the penguin tank, I recommend all of this, and you wave your hand, and you make a shadow, the penguins will follow around, because I think it's a fish. Which, yeah, I mean, the first time in my life, I had people tell me I shouldn't do that yesterday, because it's like, that's like putting a laser pointer on a dog. It's like, well, you don't have to torment them, but you can like, you can appreciate the wonder of penguins. Anyway, another thing my dad would point out was that the giant ocean tank, or the great ocean tank, that big tank in the middle, used to have these sand tiger sharks in them, and they'd get fed twice a day. And they started developing these, like, humps and curves in their spine. They're actually not in the tank anymore. But my dad would tell me how that was a symptom of their captivity. Anyway, we're here to talk about a different beast. It's a tool I made called Charp Builder. It's a tool that we use at courts to make thousands of charts a year all across the editorial staff. And here's what it looks like. Great. So this is inside of our charting platform. Sorry, the contrast isn't so great on this. But so we have a preview of your chart here. We have some input area over here. And you can do all sorts of changes of stuff at live updates. You can drag your labels. If you want a more directly label set, you can see that there's a mobile preview down below. If you really wanted to, if your access was, you can change add, make sure that you're adding. Make sure you add your units. You can adjust the access either by doing that. Or you can just type in numbers. You can even use your arrow keys. You get these things to be nicer values. What else can you do? And then also say you wanted to have a different access on mobile. You can do that too. Typically, you're doing something like that. But anyway, that's Chart Builder. So it's a pretty simple amount of data that we're working with that you can't see. A chart in Chart Builder has some data, has a title, has a source, has a credit, has some scales, has some annotations. We track all of this stuff using React, JavaScript library that is just, I mean, I would say essential to handling the complexity of any sort of user interface that has constantly changing data like this. And I think I'm about to show you. So it varies from chart to chart type to chart type. But you can see there's some basic stuff about its sizing and then some basic stuff about its scales. This would be populated with computer or understandable data objects. And this is just a string of whatever you put into that box. And then whether you've dragged those latables, there's not much to it. But it's all made possible by React, which you've already heard three times, I think, I counted at this conference. How great it is. If you change one little thing in React, or not even React, if you change someone edits one of those little fields, all you have to do is tell React that that value has changed and it will repopulate the whole app as appropriate. And it does that very efficiently. It does that super quickly. And it does it in a way that doesn't melt my brain. Or it melts my brain if I actually had to think about how I did it. But in actually making it work, it doesn't melt my brain. And so we're actually, as we continue to develop chart we're actually planning on utilizing React more and more and D3 less and less for manipulating browser elements. I'm sorry if this is a little small, but all this is showing is basically what you would do in D3 to make a line chart line. You'd use the D3 path generator and you would select some paths. You would, oh, never appended path on there. You're supposed to append path after that. Anyway, so this code wouldn't work, but a code that looks very similar to it would. Anyway, this is what we're moving towards in React. We're a same line generator, but instead of using D3 to manipulate the DOM, we would let React. We would directly create path elements using the path generator to make the D attribute, which is what you would do anyway in D3, and then put that inside of any sort of SVG group. So chart builder started very slowly, despite it being pretty successful, or it's very successful internally now and it's been adopted by a whole slew of newsrooms and some non-news companies around the world. It really just started as trying to solve my personal frustration with the visual quality of digital publications and not just at Quartz. I've been at Quartz at the beginning. Since the beginning, before that picture on the left is our one-year anniversary, the picture in the middle is our two-year anniversary, and the picture on the right is our third anniversary. And it's also kind of this incidental visualization of our growth over time. And it was only when we were, even before that picture all the way on the left, we were just like a dozen people, maybe a little more in this office in Soho. And only me and my colleague at the time, Richie King, were able to make charts that met the style requirements of our site. We also had the same shoes at the time. Anyway, back then, neither Richie nor I wanted to make other people's charts. They took a lot of time. But nonetheless, we didn't want to see charts like this showing up on the site, and they were. Especially when we're focused on mobile-sized screens, this looks great on an IMAX, I guess. I mean, it looks better than it ever did now that it's on an IMAX. But you shrink that down into the palm of your hand and you can't read anything on it other than seeing some bars. This is from a financial terminal that we use at Quartz. Similarly, our reporters would just screenshot that, or they would go to a government website and take a thing, or they would use try-and-style, something that looked like our intended style of the time, or people didn't have, they had no tools. This is all they could do. This was the best that they could do. They wanted to make charts, and this is what they had to settle for, really. But as much as I hated them, I didn't want to have to spend my whole day turning these charts into charts that matched our style. I went to Quartz because it wasn't a newspaper that, and many newspapers have whole desks that just kind of do that kind of work. They are a service to other people to make prettier versions of the things that they want to make. But the biggest impediment towards me or Richie or other people who've joined our team in the future making this stuff was the terrible workflow we had at the time. This is how you would make a chart in Quartz's style, which is just like, it would take like an hour. And it only felt like it was taking 20 minutes, but you look at your watch, and you're like, oh, wow. After the editor saw that, and I had to go back and change some stuff, and by the time we actually got this out the door, it took me an hour to make a single line chart. It was insane, and the ideal workflow being this. So I started making a tool that would make a chart in our house style that I could make these charts all the time without feeling like I was wasting it. The first version was pretty basic. It's all built in web browser, and it was using D3 as much as I could. And I would paste some data into the field, not dissimilar to what was up there, but much uglier. And the only way to export it was you would view source on the page, and you would copy the SVG node. I would paste that into a text document, and then I would open that up in Illustrator, which saves a tremendous amount of time, because I didn't have to restyle anything. I just had to save that as an image from there. But kept on trying to improve it. Eventually, the tool was able to create those images on its own, was able to export that SVG on its own, if we wanted to use that as a starting point for something more complex. And it was stable enough to give to some of our reporters who are kind of most dependent on making charts. There are people that would come to me all the time and ask, can I make charts? Or can I make them a chart? And we were able to give it to them as a test. We were also able to give it to people in our foreign offices so that they could make charts when we were asleep. Courts at the time had offices in London, Hong Kong, Los Angeles, and Bangkok. Now we have many of those places and more, which is really cool. And it caught on really quick. The tool was direct enough. And it was easy enough to train someone on that people were willing to use it. And they saw the value in that they didn't have to wait. If it was taking me an hour to make a chart, it was taking them, from their point of view, it was probably taking three hours for them to get a chart, four hours, because they sent me an email. I don't see it for an hour. I have to be doing other things for another hour. It takes me an hour to make it. And then there's some back and forth with them until they can publish their story. So them being able to directly make their charts saved a whole bunch of time, not just in chart creation, but also just in administration. So we roll this out to the whole newsroom and leveraging the people who had been using it and giving other trainings internally. And we were making like 100 charts a month. And the vast majority of our stories started having charts in them. And most importantly, our reporters started to be enabled to making a chart the story and not just a sidebar to a story. But of course, there are unintended consequences. We tried to make this tool. I built this tool for me originally. So it had all sorts of flexibility built into it that I knew how to not abuse. But my colleagues did not. We had charts that had irrational and disparate colors, trying to show too much data, and it lacked any clear sense of point. I mean, I think they're mostly typified in this, which if you know anything about Quartz's color scheme, we have never really ever had an orange in it. If you're good at criticizing charts, like I am, you'll notice that this is a column chart that doesn't start at zero on the y-axis. We also have this issue with how we do the labeling, where it says Microsoft Sales and then in Perenn's millions. And the axis is in tens of thousands. So instead of just saying billions and reducing your data, it was bad. But one of the biggest issues that we actually saw was that we were giving a color palette like this in the first version of the tool, and this was the Quartz color palette. This is what I was making like real custom graphics. This is the bucket that I would pull from. So I thought, oh, yeah, just give it to everyone and say, only use the top three rows. And then I guess I shouldn't have been surprised when people started using the other stuff. But it was nonetheless surprising and frustrating. We moved the palette to that. And even that turned out to be too much, because now our palette is just that. And this is more than enough. This is 11 colors. This is 11 colors. And these actually work much better together than any of the other stuff. And I don't get any complaints that there aren't enough colors, which might be surprising to you. So there's been a couple other things that have been more trouble than there were. We used to have animations in the editor that just like where this turned out to be some massive technical debt to have to continually maintain like every new chart type should be animating from state to state when we were, as long as the chart is changing really quickly, it turns out that the animations weren't as helpful as we thought in helping users understand what they were actually manipulating. At the start, we had lots of options in the code base for other people, for you guys, for other news organizations. If they wanted to implement this at their organizations, we tried to guess what our clients wanted instead of having our clients tell us what they want as much as you can have a client in an open source project. But at this point, we've taken a lot of them out, and we suggest people do those modifications to the code base on their own because they are so organizationally specific. Those mobile overrides that I'm showing you, they sound great. And hopefully, some of you, when you saw them, you're like, oh, yeah, that's a great idea, but no one uses them. And the reality is, is that now that we're rendering our charts, or I mean, didn't matter. We've changed our code so that our mobile charts can deal with the most common issues of being squeezed to a small screen, namely text wrapping. But there have been other things that should be really valuable. Simple export, the open source version of Chart Builder. The default export is saving as an image. You click a button, and you get a ping, which is something that I think most people in most organizations are comfortable slinging around. How do I get this chart into my PowerPoint? Just put this image in there. How do I get this chart on my website? Just upload this image. There's no fumbling with embed codes. There's no missing half an embed code. There's no breaking a whole page because there's a character off in your embed code. And in the way that Quartz is using it now, we still don't have embed codes. Every chart has a unique URL that our reporters and editors can just put in a story as plain text. And when that story gets rendered on our website, the chart is embedded by our website. The embed code is created by our website instead of by our user. So automatic tick access, or access tick value logic, it's, I mean, we've done some things that we think are, that handle stuff a little better for D3 than D3 does just because of the way in which we want our axes to look. More importantly, on this point is being able to tell people when they have bad values on their ticks in their access. If their increment is like 2.75, it can happen because we're defining axes by a max and a min and a number of steps. You can end up with weird gaps between them. And that allows for us to give clear error messages, helps with the access ticks because we can warn people that things don't look good. And we're in the original versions of Sharp Builder. It would just kind of freeze if you did something wrong. And the official support line on when something breaks in Sharp Builder back then was just reload the page. And now we can actually tell you on an element by element basis on each component that you can edit. We can put a message to tell you what appears to be wrong with what you're doing and why that's breaking. So the future, we're still adding features to try and make it easier to add new chart types, even maps. We're working on being able to have more free text annotations on top of charts. But it's an open source project. It's used sporadically and consistently, depending by news organizations around the world from local public radio to national magazines, newspapers. But not all of them. There's plenty of other publications that aren't using Sharp Builder, which kind of shows. In recent years, there's been this development. Since Sharp Builder has come out, there's been this development of other organizations building their own charting tools. New York Times built one. The Washington Post built one. The Guardian is in the middle of building one. The Boston Globe is in the middle of building one. 538 used to be using Sharp Builder. They're just switching to the ones that they custom built. And I'm pretty sure it's because the theory of Sharp Builder works. Because we have colleagues who are wasting their time on skill-intensive and time-intensive tasks, making charts for other people. It seems like it should be simple, but it's not. And if we can give them a tool to free up their time, they'll be able to have more time to make the more complex and more interesting work that they're better suited for. We have people who went to four years of school. They got some interactive whatever degree. And now we have them in some agency as some low-level person. And our client needs charts for their PowerPoint. So we have them make it. Seems like a waste. Where if we could build a tool for that client to help them be able to make their own charts, we now have this resource, this really green, ambitious person who's going to spend all day in the office coding this crazy visualization that now doesn't have to be making the charts. At the same time, we're democratizing the process of making charts. And we're raising the quality of all of our charts at the same time, because we have more people that can make better charts. And like I mentioned, now we also have more people that can make more complex charts. Of course, I mean, this can happen in one of the newsroom. Of course, there's one thing that does end up happening. And this medium complexity chart kind of disappears, which I'm totally fine with. You start, what we found is that if a chart now is going to take like two to three hours to make, some something just, I don't know, needs a little extra love, we try and just shoehorn it into a chart builder chart. Just make it simpler. Make it two charts instead of one fancy chart. And then if you want, or make it super complex. And for better or for worse, that's what happens. And that brings us back to the sharks. As I mentioned, the sand tiger sharks that used to be out in the tank have some crooked spines. And some had humps, kind of like this one. This is from a study that looked into the phenomenon. There have been a couple of studies that looked into the phenomenon. And some say it's because of the curve of the tank. Some say it's the tank being too small. Some say that it's a result of vitamin deficiencies. But all experts agree that sharks in the wild don't regularly develop these symptoms. And sharks in captivity do, which is not dissimilar to these charts. Out in the wild, anything goes. This is my colleague here. He's been shown to be a vicious beast. So much so that he's been on Japanese television to special on his brutality. In my colleague's natural habitat, they make charts using the defaults in Excel in screenshotting PDFs, reprinting something supplied from a third party. Yet, like how a shark eats in the wild, they would only do this sporadically. Because they were only thinking that charting was done occasionally. And still, like the charts, the sharks here eating frozen fish off the stick, we had to train our reporters to think differently and change their habits. And this is really important. If you take a wild shark and you throw them in the tank with the rest of the fish, there are going to be a lot of problems. When it comes to charting, we do our best to help our new colleagues get acclimated to the new lifestyle. Some are more willing than others, but in the end, they're already captive. We also have this massive institutional support behind our tool. If you can gin that up, it's invaluable. But all this means that our ecosystem is healthier, our reporters are less vicious, and in an environment where they can thrive sustainably. Of course, we have the side effect of my colleagues and I contorting ourselves, sometimes due to the limited options that we have in our tank of chart builder. But I'm better for it. And I think everyone else on the outside looking in, interested in looking more with things like that too. Thank you. Happy to take any questions? Yeah. It has a lot to do with letting. If we're letting React manipulate the DOM in one way, why have two things that are manipulating the DOM? And we've gone back and forth on this issue of whether we should be trying to build our own charting libraries or leveraging someone else's. And our pendulum is swinging towards building our own. But because React is so good at managing data in the way that we need it to be managed, using React to build these things seems like the right way to go. Sure. I mean, if I can find my mouse, let's just look at Quartz's most recent charts and make fun of my colleagues in real time. What is there to say? I'm sure these text labels are really long. Leaves not a lot of space for this chart. If I was making this in Illustrator, I would have done that differently. I can think of a chart that I actually made that is kind of a contortion where I can't find it. You know, actually something like this is, no, never mind. I was trying to find this chart that I made about foliage in main right here. Yeah, I don't know. This could use a lot of annotation on it to explain what's actually going on here. It relies on the text in the story that it lived in, text above and below it, to describe really what was going on, but to have to custom code some annotation that would live on some of these just didn't, that's not worth two hours of time. It's not worth half an hour of time when I can just do this and put a paragraph above it and below it. What was the chart? Sure, so we knew line charts, bar charts, we can do column charts, we can do scatter plots. You can kind of see them here with a scatter plot. There's ordinal scale. This might break it, but we can change that like that. Now it's on an ordinal scale. Or this might also break it too, and you can use it. You can use a linear scale now along the bottom if you wanted to do scatter, like a true scatter. Yeah. So quality control is that scroll that I just showed you as I go through the site and I look at things, or I just read the site. There's also great quality control in training editors in giving them the tools and the tips on what to look for. Enabling people to ask questions before you need quality control or upstream quality control, making sure that people are educated enough to be able to make the right decisions or are willing enough and creating a culture that people will ask for help if they are unsure of something. Internally we actually have two different Slack channels to ask for advice about charts, one more technical about using the tool, the other about charts themselves. We're probably going to come out into one, but that doesn't matter. And then, yeah, I used to worry about the people making bad charts thing when I first gave this tool to the newsroom. And then, just over time, I just realized that we've done a good job training these people and there hasn't been anything. There's been some crop bar charts like that, but there hasn't been anything really terrible. And I ran a session at a conference a year or two ago that basically put up in front of people, graphics people in the news industry. And we put up a bunch of charts and I had made some of them, some of my colleagues had made them. And we played this game called Run, Fix, Kill. And it was like, if this chart came across your desk, would you run it as is? Would you fix it? Or would you say, get this out of my face right now. How could you ever consider it to have ever done that, which really in the news industry means like we really got to fix this. And the ones that I had made this discussion, I knew the ones that I had run. I knew the ones that I thought, I told them they have to fix it. I knew the ones that I was like, get this out of my face. And these graphics people in the room disagreed with me. They couldn't tell the difference. Some of the things that they wanted to fix, they would have run and some of the things that I would have run, they wanted to fix. So there is a lot of gray area anyway in terms of what is good and what is bad. Yeah, we do that. I mean, it's a separate thing. But yeah, we try and educate people in all sorts of ways. All right. I think that's all the time we have for questions. Thank you so much, David. Thank you.