WEBVTT 1 00:00:00.600 --> 00:00:01.919 All right. 2 00:00:01.919 --> 00:00:03.600 Last but not least, I wanna talk about the small details 3 00:00:03.600 --> 00:00:07.200 of animating stuff and/or using small multiples 4 00:00:07.200 --> 00:00:09.630 or other ways of really expressing your data 5 00:00:09.630 --> 00:00:10.530 very effectively. 6 00:00:10.530 --> 00:00:13.018 And I mentioned this research earlier. 7 00:00:13.018 --> 00:00:15.330 The fact is we love animation. 8 00:00:15.330 --> 00:00:16.500 It is engaging. 9 00:00:16.500 --> 00:00:18.930 You should animate stuff if you can. 10 00:00:18.930 --> 00:00:21.360 At the same time if I really want my audience 11 00:00:21.360 --> 00:00:25.080 to accurately understand data like over time 12 00:00:25.080 --> 00:00:27.600 or comparing a whole bunch of different things 13 00:00:27.600 --> 00:00:29.237 at the same time to each other, 14 00:00:29.237 --> 00:00:30.070 small multiples is also very effective. 15 00:00:30.070 --> 00:00:31.800 So, you know, think about it. 16 00:00:31.800 --> 00:00:34.020 Use animation for engagement, 17 00:00:34.020 --> 00:00:37.560 but precision and accuracy of memory of the data, 18 00:00:37.560 --> 00:00:39.840 sometimes small multiples is more effective. 19 00:00:39.840 --> 00:00:41.516 So long story short, animation. 20 00:00:41.516 --> 00:00:44.760 Animation is eye candy. 21 00:00:44.760 --> 00:00:45.990 It is engaging. 22 00:00:45.990 --> 00:00:49.170 So I showed this, that visualization, you know, 23 00:00:49.170 --> 00:00:52.530 just a still shot of that final result, a part of it. 24 00:00:52.530 --> 00:00:55.200 But here's how that data story opens, 25 00:00:55.200 --> 00:00:56.820 drowning in plastic. 26 00:00:56.820 --> 00:00:59.098 And if you look up here in the upper left hand, 27 00:00:59.098 --> 00:01:00.930 first of all, this is really cool that this is happening. 28 00:01:00.930 --> 00:01:02.520 Since you've opened this page 29 00:01:02.520 --> 00:01:05.880 270 whatever thousand plastic bottles have been sold. 30 00:01:05.880 --> 00:01:07.470 I just opened it. 31 00:01:07.470 --> 00:01:11.010 So look at the volume, the number of plastic bottles. 32 00:01:11.010 --> 00:01:12.990 And if I keep this open for a full minute, 33 00:01:12.990 --> 00:01:16.470 eventually it hits a million, and the message changes. 34 00:01:16.470 --> 00:01:19.710 It says a million bottles every minute. 35 00:01:19.710 --> 00:01:22.050 But the animation is just like striking. 36 00:01:22.050 --> 00:01:25.230 Like I can't turn my eyes away from it. 37 00:01:25.230 --> 00:01:27.960 As I keep going, you know, we essentially see 38 00:01:27.960 --> 00:01:30.660 like the results, the finished state 39 00:01:30.660 --> 00:01:32.490 of what that animation would do 40 00:01:32.490 --> 00:01:34.830 if I kept it running forever. 41 00:01:34.830 --> 00:01:37.380 And then we end up with that final image 42 00:01:37.380 --> 00:01:38.630 that we looked at before. 43 00:01:39.936 --> 00:01:41.399 So I get it. 44 00:01:41.399 --> 00:01:44.190 The engagement is just at the top, very effective. 45 00:01:44.190 --> 00:01:45.120 It's engaging. 46 00:01:45.120 --> 00:01:46.050 It's eye candy. 47 00:01:46.050 --> 00:01:46.980 It's sexy. 48 00:01:46.980 --> 00:01:48.780 I wanna look at this thing. 49 00:01:48.780 --> 00:01:50.790 That's enough of a reason to animate stuff. 50 00:01:50.790 --> 00:01:51.930 It really is. 51 00:01:51.930 --> 00:01:54.919 On top of that, and I mentioned this briefly previously. 52 00:01:54.919 --> 00:01:57.030 Reuters, you know, it's all about the brand, right? 53 00:01:57.030 --> 00:02:01.110 That white gray background and that pop of blue, 54 00:02:01.110 --> 00:02:03.858 so many of their visualizations use this color palette. 55 00:02:03.858 --> 00:02:08.520 You know, having a strong brand, a way that you use color, 56 00:02:08.520 --> 00:02:11.220 whatever, you know, design decisions you use, 57 00:02:11.220 --> 00:02:13.170 having a style is a good thing, right? 58 00:02:13.170 --> 00:02:14.190 It's fine, it's wonderful. 59 00:02:14.190 --> 00:02:15.930 Cause then people get to know what you're doing 60 00:02:15.930 --> 00:02:16.920 and how you're doing it. 61 00:02:16.920 --> 00:02:17.880 Anytime I look at Reuters, 62 00:02:17.880 --> 00:02:19.920 I know the blue thing is gonna capture my attention. 63 00:02:19.920 --> 00:02:22.980 So it's sort of like attentive processing 64 00:02:22.980 --> 00:02:25.080 like I've mentioned a couple times, right? 65 00:02:25.080 --> 00:02:26.970 I'm primed to look for that blue 66 00:02:26.970 --> 00:02:30.060 anytime I open up a Reuters graphic. 67 00:02:30.060 --> 00:02:32.880 So animation, very powerful, very effective. 68 00:02:32.880 --> 00:02:34.620 This is an example. 69 00:02:34.620 --> 00:02:37.050 This is looking from the New York Times, 70 00:02:37.050 --> 00:02:40.140 essentially looking at kids. 71 00:02:40.140 --> 00:02:45.140 If you are a kid who grew up rich, what happens? 72 00:02:45.360 --> 00:02:48.120 Do you end up rich or do you end up poor? 73 00:02:48.120 --> 00:02:49.980 Or do you end up somewhere in between? 74 00:02:49.980 --> 00:02:51.630 And what this visualization is showing us 75 00:02:51.630 --> 00:02:56.630 with a very slow animation is how if you're black, 76 00:02:57.030 --> 00:03:00.840 which are the blue squares, 77 00:03:00.840 --> 00:03:02.684 you're much more likely to end up poor. 78 00:03:02.684 --> 00:03:06.510 If you're white, you're much more likely to end up rich. 79 00:03:06.510 --> 00:03:09.720 So not only does class actually dictate 80 00:03:09.720 --> 00:03:12.150 whether you're gonna be rich or poor for sure, 81 00:03:12.150 --> 00:03:14.367 but even then race still plays a huge role 82 00:03:14.367 --> 00:03:18.510 and the animation is totally superfluous. 83 00:03:18.510 --> 00:03:21.540 They could have simply showed us some stack bars 84 00:03:21.540 --> 00:03:23.040 and been done with it. 85 00:03:23.040 --> 00:03:25.170 But the animation is kind of fascinating, 86 00:03:25.170 --> 00:03:26.700 and it sort of reinforces the idea 87 00:03:26.700 --> 00:03:30.300 that you sort of fall from here down to here. 88 00:03:30.300 --> 00:03:31.890 Essentially it's a Sankey diagram, right? 89 00:03:31.890 --> 00:03:34.830 But it's an animated Sankey diagram. 90 00:03:34.830 --> 00:03:37.169 Very interesting and effective. 91 00:03:37.169 --> 00:03:39.030 My only pet peeve with this particular project 92 00:03:39.030 --> 00:03:41.100 which I really do like 93 00:03:41.100 --> 00:03:43.830 is why didn't they assemble 94 00:03:43.830 --> 00:03:47.130 these little stacked charts over here 95 00:03:47.130 --> 00:03:49.170 as actual stack diagrams? 96 00:03:49.170 --> 00:03:51.270 The fact that they end up as a strip plot 97 00:03:51.270 --> 00:03:53.910 doesn't help me really see as effectively 98 00:03:53.910 --> 00:03:57.330 the percentage share, sort of the end result here. 99 00:03:57.330 --> 00:03:59.070 That would've made this like perfect. 100 00:03:59.070 --> 00:04:01.350 But the animation's kind of cool. 101 00:04:01.350 --> 00:04:04.680 And this is used, you know, throughout this presentation, 102 00:04:04.680 --> 00:04:06.212 other ones. 103 00:04:06.212 --> 00:04:08.190 If you grew up poor how likely are you to end up rich, 104 00:04:08.190 --> 00:04:09.750 et cetera, et cetera. 105 00:04:09.750 --> 00:04:11.550 You will notice, by the way, 106 00:04:11.550 --> 00:04:13.410 like I talked about with redundancy, 107 00:04:13.410 --> 00:04:16.200 every time throughout this presentation, this data story, 108 00:04:16.200 --> 00:04:19.200 of course the blue means black. 109 00:04:19.200 --> 00:04:20.400 The yellow means white. 110 00:04:20.400 --> 00:04:22.290 It would be weird if they switched that up. 111 00:04:22.290 --> 00:04:24.180 Of course, of course, of course. 112 00:04:24.180 --> 00:04:27.213 So nice use of animation throughout this data story. 113 00:04:28.050 --> 00:04:30.060 Another example, and I think I've shown this one before. 114 00:04:30.060 --> 00:04:31.934 This is a project that I did. 115 00:04:31.934 --> 00:04:34.980 This is just an example of eye candy, right? 116 00:04:34.980 --> 00:04:36.240 I'm gonna refresh the page. 117 00:04:36.240 --> 00:04:41.240 As I load this graphic, I make it animate into place. 118 00:04:41.760 --> 00:04:43.980 It would be so easy to just have everything there, 119 00:04:43.980 --> 00:04:46.200 but everything animates into place. 120 00:04:46.200 --> 00:04:49.620 I animate things like I have the pulsing dots. 121 00:04:49.620 --> 00:04:52.260 So that shows you which line is the active line 122 00:04:52.260 --> 00:04:53.460 at this moment. 123 00:04:53.460 --> 00:04:55.140 Every chart that I create, 124 00:04:55.140 --> 00:04:57.420 every when it's an interactive experience, 125 00:04:57.420 --> 00:05:00.060 always animates into place. 126 00:05:00.060 --> 00:05:01.500 And I delay the animation. 127 00:05:01.500 --> 00:05:04.470 So the first dot maybe does something, 128 00:05:04.470 --> 00:05:07.950 and then later dots do it a moment later 129 00:05:07.950 --> 00:05:10.470 so you can see how they, it doesn't happen all at once. 130 00:05:10.470 --> 00:05:12.180 It happens sort of in sequence. 131 00:05:12.180 --> 00:05:15.420 It's a subtle little thing, but it makes a huge difference 132 00:05:15.420 --> 00:05:17.340 from a user experience standpoint. 133 00:05:17.340 --> 00:05:18.360 Same thing with this one. 134 00:05:18.360 --> 00:05:21.186 Everything sort of flows in one by one by one. 135 00:05:21.186 --> 00:05:23.192 Those little details make a huge difference. 136 00:05:23.192 --> 00:05:26.310 It just feels satisfying to look at. 137 00:05:26.310 --> 00:05:30.731 So for you all, when you're doing your capstone projects, 138 00:05:30.731 --> 00:05:35.130 if you're creating something in say, PowerPoint, 139 00:05:35.130 --> 00:05:37.650 or if you even have time to create something, you know, 140 00:05:37.650 --> 00:05:40.650 in another tool, and you have the ability to, 141 00:05:40.650 --> 00:05:43.852 and the time, and the technical skills to animate it, 142 00:05:43.852 --> 00:05:46.530 you should totally do that. 143 00:05:46.530 --> 00:05:49.280 If you don't do that because you don't have the skills, 144 00:05:50.231 --> 00:05:51.064 the time, you're not even doing it in software. 145 00:05:51.064 --> 00:05:52.080 You're doing something more analog 146 00:05:52.080 --> 00:05:54.036 that's 100% okay. 147 00:05:54.036 --> 00:05:59.010 But tell me in the description what you would animate 148 00:05:59.010 --> 00:06:03.510 if this was a real final deliverable for an actual audience. 149 00:06:03.510 --> 00:06:06.813 So help me understand how you might use animation 150 00:06:06.813 --> 00:06:09.630 and interactivity or anything else 151 00:06:09.630 --> 00:06:11.736 to really bring your stories to life. 152 00:06:11.736 --> 00:06:13.413 Cause those little details can make, you know, 153 00:06:13.413 --> 00:06:16.050 really push you over the edge from like a good data story 154 00:06:16.050 --> 00:06:19.195 into a really something, you know, special. 155 00:06:19.195 --> 00:06:20.700 So that's all I got. 156 00:06:20.700 --> 00:06:23.195 Thank you all so much for being here for this class. 157 00:06:23.195 --> 00:06:26.313 I cannot wait to see your projects come to life.