 My name is Tony. That's, thank you, Irene, for the introduction. So I'm a designer. I came to kind of data visualization from a point of view of how do you kind of communicate? How do you communicate ideas? How do you communicate concepts to people? I really care about explaining things to people. I really care about, as Nicky was mentioning, informing people. And so this presentation is really a distillation of some of the lessons I've learned over the last couple of years, building data visualizations that are expositions, expositional ideas, and the techniques that I'm bringing in from kind of graphic design and motion design. And that's why this talk is called animation pacing and how it impacts exposition. A lot of it is going to be based on examples from this project that I did last year called R2D3. And so this project was about machine learning. A lot of the things that the Google folks talked about this morning, I've kind of toned it down to very simple, something that's one of the simplest machine learning models you can have, which is like a disjointed tree, really break it down and how to explain it. So I'm going to talk about how you actually do that from a designer's perspective. And so I'm going to go over three things, or three things actually. So the goal is exposition and explaining something. What are we dealing with in terms of constraints? What are we dealing with in terms of how we do this? I will argue that the most important constraint you're dealing with is not screen size, is not color, is not time, is not the amount of information you're dealing with, is attention. Speaking as the last speaker between you and your drinks, I recognize that attention is something that I have to deal with right now. So let's move on. So I'm going to talk about two tactics. Tactics for database around how to manage attention. And a lot of that is animation, and it's about pacing. But let me first start with this idea of what is exposition? I think of exposition. There's lots of ways to think about it. So exposition adds, I have an idea in my head. I'm going to try to reconstruct it in your head. How do I do that? How do I reconstruct an idea from my head to your head? Well, I've established some channel to move stuff between my head and your head. Right now, I'm doing that through sound. There's a microphone. I'm doing that with illustrations on the screen. But more importantly, though, I'm using your attention. I am gathering your attention and I'm trying to push things through so that you guys are receiving stuff that I think is important. So let's talk about attention. What is attention? So the dictionary definition, which I can't see here, is the mental faculty of considering or taking notice of something. From a cognitive science and psychology point of view, attention is really about how your brain is taking in tons and tons of information right now. Every one of you have eyes that take in more information than, I think, has more bandwidth than Wi-Fi. Your eyes can take in a lot of information. It's constantly doing that. Your brain is doing the acts of filtering all that stuff, discarding what is irrelevant, and focusing it on something that is relevant. And that process of filtering shit out is attention. I'm paying when I'm doing the work of filtering things out. That's paying attention. And from a designer's point of view, I think about dealing with two kinds of attention. The first one is one I already hinted at, which is visual attention. Your eyes can take in a lot of information at once, but it still have a sense of kind of directionality. When I'm looking over here, I can't really see what's over here. When I'm looking over here, I can't see you guys. And so if you can design something that helps guide the eye to the thing that is relevant, you're saving attention. You're not making the eye work harder than necessary. The second kind of attention is, well, kind of attention. It's short-term memory. Our conscious minds can really only deal with a few bits at once. Even though our brain can deal with a lot more information. And so you have to consider, at any given time, if you can only fit so many things in short-term memory, you have to be very careful about what you put in that short-term memory. It's like RAM. What do you put in there at a given moment to achieve what you need to achieve? And so when I think about this stuff, I think about this arcade game. There's a race against time. You're on a race against time. And this arcade game, the thing that sticks with me is the idea of, oh, you have to reach the next checkpoint. And you have to get there fast enough to get your next time extension. I think about my design work as, oh, I have to get something interesting in front of you in order to get an attention extension. And if I don't, which it seems like for some of you guys, I'm not successful because some of you guys are sleeping. So I need to get to the next kind of attention extension. How do I do that? Another metaphor that I use is this idea of a faucet and a sink. I am, your attention is constantly draining away, as it has been since 9 in the morning today. And we're kind of like here. So what do I need to do as a designer? I need to close up that sink as much as possible and then also open up the faucet. Kind of give you guys stuff to feel like, oh, this is worth my attention. I'm going to put more of it in here. And so let's look at what are some things that gain and drain the attention. So things that gain attention is surprise. I remember the moment when Kyle turned on the sound kick bang and he's like, boom. Suddenly, oh, wow, Kyle has my attention now. But something that is a little bit more gentle is delight. Something that's fun. That's something that's beautiful. Something you've never seen before. Like, Nadi's talk, all the gradient stuff. I was like, oh, you could do that with SVG? That's awesome. So delight. Delight is really nice. Order and coherence is also very nice. And once again, it's the idea of, do I have to spend a lot of energy to make sense of this? Or if it's already ordered and framed and organized well for you so your brain has to do less work, those things are able to then tap into your brain and use less attention and gain you more attention. On the other side, what drains attention? Time. Time drains attention. That's kind of obvious. We have straight thoughts. Our brain are kind of here, there, everywhere. Some of our brains is between this screen, this voice, and some screens in front of you. Those things drain attention. Decisions drain attention. So if you come to a website and it's like, the first thing I ask you to do is a click on something, you have to decide to click on that thing. You have to like, even though it's really easy, you have to move your mouse to a particular spot on the screen and click that button. That's a decision that takes attention. Clutter, clutter takes attention. If something is disorganized, I can't make sense of it, your brain is trying really hard. And so if you can remove the clutter, then your brain is not trying to make sense of all that stuff. It's focused on what you need to pay attention to. And lastly, confusion. Confusion drains attention for reasons that I've already kind of mentioned. So these are things that drain attention. So from a designer's point of view, graphic designers, graphic designers are a fairly old discipline. It's been dealing with this kind of stuff for a long time. One of my favorite quotes from a mentor at SVA. Her name is Prabha DeWilby. She was the art director at Martha Stewart magazine for a long time. And she was teaching me about graphic design. And this is her quote. Graphic design is a use of space to control time. And what does she mean by that? It means that when graphic design is about manipulating things, it's like, OK, I'm going to put this thing here. I'm going to put this thing here. I'm going to put this thing here. And you can use that ordering of how things are positioned in space to control your experience of things. So like control, you're going to look at this first and you look at this next and you look at this next. So I'm going to show you this. I didn't have to tell you to look at the big title first. I didn't have to tell you to go down this page. I didn't have to tell you to read the last line. That's because this design leverages conventions in graphic design and conventions in the Western world, like readers in the Western world, we read from the top left to the bottom right. These conventions, again, saves attention. It saves you from having to think about what this is. And so when I approach my design work, I try to leverage these principles. So even if you kind of squint and look at it and you don't read the thing yet, you still get a sense of like, oh, what's the important thing? The first thing you see is a visual introduction to machine learning. That's the value proposition. And there's some weird, vague, most kind of interesting looking thing on the right side. You don't really know what that is yet, but it's kind of cool. And then the last thing you see is scroll. It's called the action. It's asking you, hey, if you're interested, and this value prop is clear, please do this thing. And so circling out is just like, this is graphic design. This is like, how do you position things in order to help direct the user's attention to guide them towards some goal? And if you don't believe me, here is somebody else doing the same thing, right? This is one of my favorite New York Times visualizations. Maybe some of you guys have seen it. It's about how the different sectors of the economy recover from the recession. Very similar. Value proposition, a vague thing that is not clear what it is yet, but it's potentially interesting. And then a call to action. And the call to action is scroll. So some of you guys may know of my work is like, oh, you're the scrolly telling guy. You're always asking people to scroll. What's up with that? That's because a click is a decision. A scroll is continuation. It's continuing what you've already been doing. And so it's less engagement, less decisions, more attention to direct to the stuff that you actually care about. Plus, scrolly telling is fun, right? If you scroll, and then a fun thing happens, you're gonna keep scrolling. And then more fun things happen, right? And so of course now it's gonna be the next part of the talk, which is animation, right? Animation is the manipulation of images to create the illusion of motion. And so why is this cool? Why is this good? Well, that's because motion is pre-attentive. What does that mean? It means that there's a big chunk of our brain that's near the back of our skull, the visual cortex processes motion before it gets to the frontal cortex. And there's a lot more processing power back here than up here. And so you can take in motion. You can take in the sense of motion even before you can consciously process it. And if you can tap into that, once again, you're saving conscious attention, but you're still communicating, which is great. So I'm gonna show some examples, right? So these are all examples from R2D3. So the first one is, all right, so the reader finally starts scrolling. What happens? Some fun animation happens, but it's not just fun. It hints at the idea of the first dimension that we're introducing in this dataset, which is elevation. Elevation goes from bottoms up, right? And so this motion, one is fun, grabs your attention, but two is like, oh, now this is elevation. Okay, this is cool. And then I use this transition to turn that graph into a scatter plot. Once again, I'm using motion to capture attention, but I'm also using motion to show an idea. It's like, oh, this one dimension thing, now it's two dimensions. And the other reason to do this is because you could imagine the counter example, which is, oh, I had that graph. I scrolled out of view, put another scatter plot in here. Now what do I have to do? I have to re-establish the context of what this visualization is, right? I was like, oh, now this axis is the same, but this axis is new. Using this animated transition, now I am saving the attention that I would have spent re-establishing the context, plus now I'm introducing a new idea. So I'm saving attention, doing something fun. This is a different part of the project where I'm using animation again to show the notion underneath of the decision tree, which is, hey, in order for you to kind of get a sense of what decision tree is doing, it splits the tree and splits the data into chunks, and then it goes from top down, which is why the animation goes from top down, right? And having established this, then I can actually do the really fun visualization in R2-D3 where the little balls fall down the tree, right? And once again, I am using motion, one test to kind of create a sense of the light, but also then to say, hey, this is actually how decision trees work. A data point will literally follow the fork on in the program, such that it finds its end point, and then that's the classification. Okay, pause here for a second. To recap, we're trying to reconstruct an idea that is in your head, in your audience's head, right? So these lessons from graphic design and motion design help us preserve attention and direct attention, but why, who cares? So the reason that we care is because we need to direct attention to the pieces of the puzzle, the pieces of the idea that you care about, but how do we know when to direct the attention where? How do we know what pieces go first? How big should these pieces be? What do I even mean by pieces, right? So I'm going to take a slight detail and then choose the idea of pace. Pace is to do something at a slow and steady rate in order to avoid over assertion, right? Remember our idea of short-term memory? You have maybe seven bits of things in your head at once. You don't want to over exert and blow it up. So how do you then take this idea and pace it such that, oh, you can move the whole thing through without blowing up that pipeline? Kind of similar to the GPU pipeline that I talked about earlier. And so one way to think about this is like, oh, if you have an idea of this, this is a Lego flat iron building, which is my favorite building in New York. How do you get to this from this, right? If someone just dumped out a pile of Legos and said, hey, build a flat iron building with this, you wouldn't really know what to do. You wouldn't know where to start, which is why a Lego kit comes with an instruction manual that says, isolates, okay, find this one piece. This is the right and relevant piece now. Find this different piece, pull it together, fit them together this way, and repeat, and repeat, and repeat, right? It's preserving your attention by not just giving you a power crap to like deal with, it gives you, this is the right thing to focus your attention here now. And the Lego instruction manual hints at the relationship between pieces in the model, right? So like, oh, this is one panel, this is a different panel. These pieces fit together. There's a dependency between these things. So by kind of understanding the dependencies and understanding the order in which you fit these pieces together, you can build up to something big and interesting from very small pieces. And the organizational principle for doing that is pacing. So let me show you a different pile of Legos. So this is the previous iteration of the Let's Free Congress project, the one about campaign finance reform. And this was actually one of my first D3 projects. And I was really excited, I spent all weekend working on this, and I showed it to my classmates at SVA, and they were like, oh cool, what is it? And that's because I just literally dumped every dimension in the data onto the screen. So if I told you now, then like, oh, all the circles on the left side represent election Senate seats where Democrats won, on the right side is Republicans won, and I gave you like how to read this thing. It's like, oh, actually you can read this thing and you can understand the data, but just dumping an L on you, suddenly I've blown my attention budgets. What's happening is this. Your attention is overwhelmed, there's too many pieces, the pieces are too big. So we need to figure out how to break it down, right? We have to pace it out, we have to like find the pieces that are too big and too unwieldy and figure out how do we break it apart. So there's lots of ways of doing it, but one good rule of thumb is when you write it out and you lay it out on the screen, are you tempted to read it or skim it? If your natural integration is like, oh, I'm just gonna skim this, you probably didn't break it down enough. And so what ended up happening was this project, the same data set, the same Senate seats, but now I'm focusing on like, hey, here's the idea, here's the next idea, here's the third idea. That's what I wanna focus your attention on and not necessarily all the legal pieces. You can go poke around and deliver in circles and figure out, hey, this is the thing, but I just said, you know what, let's just pick the right thing to focus on and direct attention there. The other principle for thinking about how to break down these ideas is recognizing that ideas depend on other ideas. So given a big idea in your head, how do you break it down? Well, ideas tend to not be entirely novel, they tend to be composed of other ideas, composed of existing ideas, kind of like how software is composed of other software. And so you're kind of dealing with a dependency tree, almost. So this is a very classic D3 example of the dependency tree in one, I actually don't know which software package this is, but anyway, the idea is like, oh, hey, you have this idea, it depends on these ideas and they depend on these ideas. And if you can understand the dependency tree of your idea, then you know what are the pieces that you can break it apart at, right? And if I'm gonna reconstruct this idea that's in my head, in your head, I have to make sure I load in all the dependencies, right? So let's go back to the machine learning example. If I want to help people understand what is machine learning, and I know that my audience is a layperson who may not even have taken much statistics, I need to make sure that this stuff is broken down really well. So let's see, what does the decision, what does the idea of a decision tree depend on? Well, it starts with the idea of data have patterns, not very controversial, and then, I can't read that, that's what I'm turning around. And then it says, patterns may be correlated with a desired outcome. So like, if you wanna predict whether a house is in San Francisco or New York, patterns may help. So together, then we can start to say, hey, we can use patterns to create some rule for making this decision, right? And then I combine that with the idea of, statistics can precisely capture a pattern. Then now I can say, we can use statistic compute the best decision rule. And then I can say, hey, if I combine that idea of using statistics and saying, oh, I'm gonna subdivide things and I'm going to do this over and over and over again, suddenly I get to this idea of decision rules can be chained together to improve accuracy. And that's where the tree notion comes from. Well, I actually skipped ahead. And then I add the idea of like a tree metaphor. Now you have a decision tree. This is roughly the decision, the dependency tree of the idea of a decision tree. One thing to note here is order matters, right? You can't just introduce these ideas and say, oh, I'm gonna introduce this first and then do this other one and then come back, right? You have to make sure that things are in the right order. You wanna start from the simplest ideas and ideas that depend on the least other things and the most established in your audience's head and then build up. And even visually, when I think as the, instead of the writing part of this and thinking about pacing, visually I do the same thing, right? So here is that first kind of graph showing elevation. Pretty simple graphic. The next idea is like, oh, I'm only just gonna rotate it so that it's on its side. That's a pretty simple transformation. And I'm gonna now like collapse them and turn them into a histogram. And if you guys remember, I can show the animations after, but once again, the idea is just like, there's one idea, I'm just gonna collapse them. Now it's a histogram. I'm gonna introduce one more idea which is visually splitting the thing into two populations. And then now I'm gonna visually again, repeat that pattern that you've already seen. Suddenly, like you're starting to see the tree structure. And then now I remove the histogram and now you see the tree, right? So notice the thing that's happening here. I'm really just introducing things one step at a time. Because if your attention bandwidth is this small, you have to break things down to be that small to fit through it. So we as, well, I don't know, I can call everybody here a designer, but if you wanna think about things from the design point of view, this is what we have to think about. We have to think about preserving our audience's attention. We will think about how do we pace things such that you're moving ideas from your head to other people's head one step at a time. And my kind of big takeaway for all of this is always this idea of like, hey, we need to have a slow measured conveyance of ideas through this gateway of attention. And everything needs to fit. And so what do we talk about? We talked about exposition. How do we explain an idea to somebody? I talked about the constraint. The key thing that you have to think about is not necessarily colors, is not necessarily type, is not necessarily size or data. The key thing that you need to think about when you're explaining something to somebody is how do you channel their attention? And so of course then I talked about a bunch of techniques for animation and pacing. There's lots more kind of research in this kind of work. I draw heavily from like cognitive psychology. I draw heavily from just like writing, like technical writing. I draw heavily from visual analytics, research, like cognitive psychology research to think about all of this stuff. But all of it is in service of how do I conserve this really precious resource of attention? That's it. Thank you so much. How am I doing for time? We have time for questions or if you have more. I was going to go through this guy just to, yeah. So this one, this is the U-curve visualization from the New York Times. I was like, if I have time, I was gonna go through it. It looks like we do. And I think this is a non-Tony Chu project, which is nice because then I don't have to be like, oh, this is my work again. What they're doing here is they're not using scrolling, but they're still very much using the idea of like, hey, here's one idea. Here's some vague, interesting thing to look at. I'm gonna now step you through this story. And it's like a step at a time. The ad transition shows you, oh, okay, how do we go from that view to this view? Now, here's how we direct your attention. Like this and this pops out at you and then this is the concept. And once your mouse is there, your next clicks is pretty easy and you just kind of click through. And every time you click through, something interesting happens. Your attention is getting refilled and you keep going. And so there's like a few interesting points of interest. A larger concept is getting built on, right? And once again, it's just like, oh, hey, let's look on this other side. That animation helps locate you, individualization, such that I know where I came from. I know where I'm going. Now I'm in this new place. The context is preserved. You're preserving attention. And on and on it goes. It's like, hey, some new thing happens. I don't know what's up with that flicker. And each transformation gives you a new view and do the data, but it's still built on the previous view of the data. Once again, preserving your attention. And yeah, so that's what happened here. Yeah, so, and then I wish they actually did the transition here or they went to a place where it's like, okay, suddenly you see a several of these for each country, but that's nitpicking. And then the other thing that I rejected, since I have a little bit more time, is this is a counter example. Don't do this. This is what happens when you don't pace well. Okay, cool. I got laugh. I'm gonna end it here. Thank you so much.