 I would like to welcome our next speaker. He is a computer science PhD candidate at Stanford University where he works with Jeff Heer, who hopefully any of you have heard of, to make custom visualization design accessible to non-technical audiences. Arvind is also a chief architect at Appropos, a Bay Area startup that he co-founded to build data-driven web applications. Please welcome Arvind Satyanarayan. Hi, I'm Arvind. And I'll be talking about a new set of visualization design tools we've been cooking up at the interactive data lab at Stanford and the University of Washington. So our speakers today, I think, have done a really great job of articulating why carefully constructing data visualizations is an important thing to do. So judiciously designed visualizations are successful because they convey more than just the raw data values. They seek to set a broader context and specific aesthetic animation and interaction choices can foster communication and increase dialogue and engage interests and so on. So to add yet another example to our corpus that we've seen today, here's one of my favorite examples of an impactful visualization. This is Periscopex US gun deaths in 2013. And so while a simple bar chart or line chart could also communicate these statistics, the unique design decisions here so lines over a dark background, arcs that are abruptly halted with points dropping to a baseline, and then the sudden flurry of points, all of these design decisions together convey the data in tandem with the emotional weight of the topic. And so how can we create visualizations of this caliber? So over the last two years, we've been talking to a number of visualization designers, from data journalists to analysts and researchers. And we've heard almost everyone contend with this trade-off. At one end, you've got software like Excel and Tableau that are easier to use, but they constrain the design space. You can only pick from a set number of chart types. But the trade-off is that you can create something that you recognize in just a couple of clicks. On the other end of the spectrum, you've got extremely expressive tools like Illustrator and D3. They're capable of creating highly customized visualizations, very unique things. But they present a huge barrier to entry. They require significant technical expertise in both cases. So over the last year, we've been trying to address the middle ground here with a new design tool that we're calling Lyra. And we think, we hope, that Lyra is capable of building D3 caliber visualizations but without any of the programming. So to recap, the process of building visualizations comes down to composing these few basic building blocks. You have your raw input data. And then you have transformations that you apply to the data to group it, calculate statistics, or run layout algorithms like geographic projections or tree maps or things like that. Scale functions are useful to take your input data and give you a mapping of visual values, so pixels or colors or shapes. Guides such as axes and legends visualize your scale functions. And then marks are your graphical primitives, your shapes that you actually use to visualize your data. And so to some degree, all visualization design systems use these building blocks. But they vary the degree of control designers have over them. So for example, Excel and Tableau mass scales from users while D3's real expressive power comes from exposing all of these to the user. So to make Lyra just as expressive as D3, we chose to surface all of these building blocks within the interface as well. And so here's what the interface to Lyra looks like. We've got a palette of marks at the top which can be dragged and dropped onto the visualization canvas. And once they're added to the canvas, you can interactively resize and position them like you would shapes in a program like Illustrator. The right hand panel organizes marks and guides into layers. We expose a number of properties for each mark and any of them can be bound to data. The left hand panel contains data pipelines. And a pipeline allows you to import a raw data set and then visually apply a series of transformations to them. And you can see the effect of applying a transformation in the data table at the bottom. Pipelines also list all the scales defined over their data, giving users the ability to tweak scales which, like I said earlier, is a huge win for expressivity. To expedite the process of creating visualizations from scratch, Lyra tries to automatically infer appropriate scales for your data mappings. So the visualization currently shown is one crafted by William Playfair, often cited as the inventor of modern statistical graphics. It shows about 250 years of the prices of wheat and typical weekly wages, as well as the reigning monarchs at the time in England. So originally published in 1822 to a letter of parliament, he intended to communicate that never at any former period was wheat so cheap in proportion to mechanical labor as it is at the present time. So I could show you a video of how to recreate this in Lyra, but I kind of like to live dangerously. So I'm going to jump into a live demo. So wish me luck. So like I said, this is the interface to Lyra. And by default, what you can do is import a raw data set to your pipeline. And so Lyra takes basically tabular data. I don't have fonts loading. All of these fields are labeled, I promise. You don't have to guess your way through the interface. But the idea is that you can basically import data from a JSON file, a CSV, a TSV, all your typical formats. And for now, since this is one of our canonical examples, I'm just going to preload our data. And the idea is you start by grabbing a mark from the top toolbar here and then dropping it onto the canvas. And then I can start mapping data values to it by just tearing them off this data table. And it's a little faint on the projector, but you see that these cyan regions start to appear on the canvas. And what I can do is just drop the data field on one of those regions and I've automatically set up a data mapping. So in this case, the year is set to the X position of these bars. And you can see that it's automatically created a scale function for me as well. Similarly, I can take wages and drop it over the Y. And that did, wow. No matter how many times you're actually run these, okay. Let's try this again from the start. Oh, I was supposed to do wheat, that's why. Sorry, the internet here. This is the risk of live demos, I guess. Well, here's what the final thing looks like while we wait. Eventually, I assume it will load. But basically, well, I can just walk you through what it looks like to recreate these. So you have, like I was showing earlier, the wheat bars. And basically, you drag a bar onto the canvas and drop it. Maybe I should just swap to the video. And the idea is that these handles sort of allow you to interactively resize the bars as needed. I can, again, drop an area mark to create this sort of blue region you see here. And similarly, add line marks to highlight the regions at the top there. What's especially interesting is that we try and integrate both the visual aspect of creation as well as the data manipulation side of things. So on the right-hand side here, you sort of see that, well, you should see it, of course. Oh, oh, well, let me see what happens. I don't know where my fonts are. Let's see if I can make up time again. Hey, hey, wheat, all right. Yeah, I really don't know why things are breaking down. Maybe I should, I'll just swap to the video. I think that'll be quicker. I'm glad I left it in there. I almost took it out being courageous, but. So yeah, so the basic idea is you drag and drop marks onto the canvas. The data table sort of shows you the data that you have available to work with. And so what you can do is just drag a field off the data table. And when you do that, like I was saying earlier, these cyan regions appear that allow you to map data to visual properties. So in this case, we can drop year onto width. And then we can drop wheat onto height. And we see that it automatically creates scales for us, as well as sets all these different mappings together. And on the right-hand side, we visualize all the different properties that a mark could take. So in this case, these rectangles, you can set the fill color, you can set opacity, and so on and so forth. And any of these values can be mapped to data as well. And so like you see, I'm modifying the color here and stuff like that. I can use the handles, like in Photoshop Illustrator, to manipulate the size of the marks interactively. And so similarly, I can create an area chart here. You'll notice that in this case, it's doing something a little different here. I dropped the wages field onto the y-axis. And you see that it's automatically created a new y-scale for me, in this case called y3. But really, in the original, what we wanted to show, we wanted to be able to compare wages with wheat. And so we wanted them to share basically the same y-axis or the y-scale. And so what we can do is basically just grab the y-scale originally used and then set that. And so you see it automatically rescales the area. And so here, again, I just set a couple of extra marks to mimic the original by highlighting the top of that area. Again, just following the same drag and drop process of marks and data values to drop zones. And then here's what I was talking about earlier, where it's useful to integrate both the visual side of things, so composing marks as well as the data side of things. So in this case, if you recall the original, had the monarch's reigns along the top. And so we import this data set of monarch's rules. So their names, the year they started their reign and the year they ended their reign. And we start mapping these to the rectangles as well. And so rather than setting it to the width like I had with the wages bars, instead, I set them to the left and right coordinates of the rectangles. Now, you notice something weird is going on here. All the rectangles sort of squished and clustered around this top area. And the reason that it's doing that, if you sort of look at what the axes is showing you, it's showing you that right now for that start or end date, it's plotting everything from the year zero to the year 2000, which isn't really what we want because our data set is just from the 1,500s to about the 1,800s. And so again, in this case, when we had dragged and dropped the data values, Lyra had automatically created the X scale for us. And what we need to do is basically just modify that scale and just uncheck the values that you see here to make sure that the scale doesn't start at zero and that we're not doing any additional rounding with the scale functions. And so again, we can interactively resize the bars using the handles. And then to get the offsets happening, we need to basically extend our data set with some new fields. And so to do that, well, I guess I'm going to recolor them first. To calculate the formula, we basically add a new data transformation. And we can just again drag and drop the fields to start to basically extend our data set with these transformations. So the first one I add is a formula to basically identify a little gap in the ruling line in England where Oliver Cromwell took over. And he wasn't a member of the royal family. He was Lord Protector of the Commonwealth. And so in Playfair's graphic, he sort of highlights that a little bit differently as you'll see. So we first identify the Cromwell field. And these formulas are just simple JavaScript expressions that use drag and drop again to be created. And then we just take those data fields that we calculated and just drag them and drop them onto our properties like before. And so you see here, I took the offset field that I added and I dropped it to the start y position, so the top coordinate of these bars. And you see by default Lyra has created this scale mapping to sort of give me some bars at the top and some bars at the bottom. And so what we can do is again modify that scale function with some custom values to create like the exact offset that we wanted. In this case, just a little bit of an offset at the top there. And we can use the Commonwealth field to sort of color all of our Cromwells rule a little bit differently. And so in this case, to mimic the original, we have Cromwells rule there in white. And so the final thing to sort of get this to look like Playfair's original is to label each of these rectangles with the name of the monarch. And so we drag a text mark. And although we could do the same thing we've been doing so far, which is dragging on to the canvas and then drop some data fields and muck around with the scale functions, we noticed that the ability to label or connect shapes together was sort of an important and repetitive part of the process. And so we introduced these connectors, which should be familiar to you if you use tools like Omnigraphil or Vizio or things like that. And so what I can do is take that text mark and drop it on these little diamond connectors that appear around the rectangle. And doing so gives me one text mark for each rectangle that's anchored at that particular position of the mark so in the center of each of those rectangles. And then just like before, I can take the name and I can drop it over the text mark to automatically create that binding. And using the property inspectors, I can again sort of change scale colors and fonts and things like that. So the last couple of steps basically allow us to get to play fair sort of final graphic. We tweak the axes again with fonts and we add a couple of labels. And that sort of demonstrates how constructing visualizations in Lyra is possible. Now if, aha, this is cooperating now. So one of the things that Lyra really enables is because each of these properties is exposed through this very graphical interface, these inspectors. It makes the design process a lot more easier. And we think it also accelerates the development of visualizations. So for example, here is another famous historical visualization. This is Charles Menard's depiction of Napoleon's march from Paris to Moscow. And to use, to construct this visualization, we use a Mercator projection, Mercator geographic projection. And if any of you have used one of these in D3, you know that it can take a lot of work, of a lot of parameter tweaking to get it exactly right. And especially if you look at these, like this is, I'm centering the projection at 32.52 and 53.3. That took a lot of time to figure out. And so having a tool like this where I can just modify these values in context and just nudge things back and forth makes it a lot easier to change the scale. Makes it a lot easier for me to iterate towards what the final value should actually be. Similarly, here's a force-directed layout. And all these different properties that enable things like the distance or the strength or the tension, Lyra makes it easy for you to automatically regenerate layouts, but then allows you to iterate on this design further. So I can generate a new layout, and then on the canvas just double-click to pin nodes, and then hit refresh. And you see that those nodes, those small blue nodes that I pinned, are sort of staying relatively fixed positioned with respect to the rest of the nodes there. And so in that way, we think Lyra can sort of enable a much more iterative design process, where you can work directly on the visualization you're designing and sort of flip back and forth. So as probably the live demo illustrated, this is alpha code. This is research code. But it's on GitHub. It's free and open source. There are some issues with it. But we're really excited to sort of draw the curtain back on this project that we've been working on for a year. It's early days, but we have a lot of exciting plans of how to sort of extend it to support interaction design and things like that. But we basically wanted to sort of kick the doors open to really see what you guys come up with. And we're already excited because we've already seen a number of pull requests. And also a couple of tutorials from people in the community, so this one by Jim, for example. It does a really nice job of just walking you through the process of creating a bar chart in Lyra. So the one point that I forgot to mention is great. You spent all this time designing a visualization in Lyra, then what? So what you can do is export these visualizations as either static PNGs or SVGs, which you can just include as images, or they're great for including the work in print publication. But you can also export them as Vega specifications. And Vega is this underlying visualization grammar that's been available now for a while. And it sort of builds on D3. But the idea is that it's just a purely JSON specification of your visualizations. You're not doing any JavaScript programming per se. And so these specifications can sort of be embedded in your web page. You can use the Vega JavaScript library to sort of parse them out. And you notice here that I can either export my visualization with the data values inlined or not. And so what that enables is, if you inline the data values, that specification essentially becomes a standalone description of your visualization. You can just embed it anywhere, and you'll always get the same result. If you don't inline the data, however, the specification becomes a more reusable, general purpose specification for your visualization. So you can automatically rebind the data at runtime and have the same visualization but for different data. And so you can sort of stamp out different charts that way. And once you parse it, you can sort of add interactivity, like you can with D3 by registering event listeners and stuff like that. But it's definitely a future work for us to figure out how to do interaction design, both in Vega directly, declaratively, as well as in a tool like Lyra. So I know this was a little slapdash since the internet didn't work, but I'm happy to take any questions.