WEBVTT 1 00:00:00.300 --> 00:00:01.133 All right. Hey everybody. 2 00:00:01.133 --> 00:00:03.060 So we talked a little bit about labeling 3 00:00:03.060 --> 00:00:04.560 and annotations before. 4 00:00:04.560 --> 00:00:07.110 I wanna just circle back to it a little bit. 5 00:00:07.110 --> 00:00:09.390 I'm gonna point you all to this article again. 6 00:00:09.390 --> 00:00:10.650 We reviewed this briefly 7 00:00:10.650 --> 00:00:13.413 during the maps module, module four. 8 00:00:14.310 --> 00:00:16.140 I would encourage you to go back through this article 9 00:00:16.140 --> 00:00:17.220 if you haven't gone through it 10 00:00:17.220 --> 00:00:19.680 go through it for the first time. 11 00:00:19.680 --> 00:00:24.680 Really look at how serious a job, how focused the concept 12 00:00:26.580 --> 00:00:30.540 of labeling really is in cartography, yes. 13 00:00:30.540 --> 00:00:31.680 But the same things apply 14 00:00:31.680 --> 00:00:33.870 to data visualization and all the rest of it. 15 00:00:33.870 --> 00:00:36.720 So, you know, read through this article. 16 00:00:36.720 --> 00:00:39.660 You know, like I said, this is, covers a lot of ground. 17 00:00:39.660 --> 00:00:41.250 This is also outdated 18 00:00:41.250 --> 00:00:42.870 so it's not like everything you'll see 19 00:00:42.870 --> 00:00:46.200 in this article is still actually how it is 20 00:00:46.200 --> 00:00:48.600 in Google Maps and or Apple Maps. 21 00:00:48.600 --> 00:00:52.290 But you'll learn a lot about typography, labeling, 22 00:00:52.290 --> 00:00:56.100 how to really emphasize things and bring things to life. 23 00:00:56.100 --> 00:00:58.140 A lot of subtlety and nuance in this article 24 00:00:58.140 --> 00:01:00.120 that is really a good learning experience. 25 00:01:00.120 --> 00:01:03.930 So definitely check it out. Enough said. 26 00:01:03.930 --> 00:01:06.420 This is a great data story that I love to point to 27 00:01:06.420 --> 00:01:08.280 when thinking about labeling and annotations. 28 00:01:08.280 --> 00:01:12.060 This is someone I actually know 29 00:01:12.060 --> 00:01:14.700 created this visualizing MBTA data, right? 30 00:01:14.700 --> 00:01:17.520 The MBTA, the train system here in, 31 00:01:17.520 --> 00:01:21.030 well transportation system here in the Boston area. 32 00:01:21.030 --> 00:01:23.160 And this was done a few years ago, 2014, 33 00:01:23.160 --> 00:01:24.300 so quite a while back now. 34 00:01:24.300 --> 00:01:25.920 And what I love about it, first of all, 35 00:01:25.920 --> 00:01:29.340 very interesting data visualization, very creatively done 36 00:01:29.340 --> 00:01:31.930 but everywhere along the way 37 00:01:33.120 --> 00:01:38.120 very thoughtfully labeled and annotated data visualizations. 38 00:01:38.280 --> 00:01:41.280 So for instance, as we're going through 39 00:01:41.280 --> 00:01:42.810 we get this first visualization over here 40 00:01:42.810 --> 00:01:44.850 where we see the MBTA system 41 00:01:44.850 --> 00:01:46.350 whatever's going on in this visualization. 42 00:01:46.350 --> 00:01:49.440 One nice thing is that even the labels 43 00:01:49.440 --> 00:01:51.480 they're not just labels or in this case 44 00:01:51.480 --> 00:01:53.790 they're not even really labels, they're inline text 45 00:01:53.790 --> 00:01:54.930 but they're all interactive. 46 00:01:54.930 --> 00:01:59.610 Anytime I hover over anything, it makes all the stuff 47 00:01:59.610 --> 00:02:01.680 that isn't that disappear. 48 00:02:01.680 --> 00:02:03.210 So very thoughtfully done. 49 00:02:03.210 --> 00:02:06.720 And that's a feature throughout this entire experience. 50 00:02:06.720 --> 00:02:08.730 But what we're looking at over here is a very 51 00:02:08.730 --> 00:02:12.030 complex visualization of trains. 52 00:02:12.030 --> 00:02:15.900 It's actually based on, I can't remember the guy's name 53 00:02:15.900 --> 00:02:20.550 but a way of displaying train timetables 54 00:02:20.550 --> 00:02:24.663 and the locations of trains over time. 55 00:02:25.830 --> 00:02:27.840 And you're supposed to sort of track these lines. 56 00:02:27.840 --> 00:02:29.970 And essentially this is a way of discovering 57 00:02:29.970 --> 00:02:31.590 when you have trains that are running late 58 00:02:31.590 --> 00:02:33.810 or running into problems etc. 59 00:02:33.810 --> 00:02:37.290 And it's not something you can easily decode on your own. 60 00:02:37.290 --> 00:02:40.650 Therefore, really good idea to have these little annotations 61 00:02:40.650 --> 00:02:43.500 to the side explaining to you what's going on here. 62 00:02:43.500 --> 00:02:46.200 Right here, we can see that there's an afternoon 63 00:02:46.200 --> 00:02:49.470 rush hour beginning, and the lines get sort of denser 64 00:02:49.470 --> 00:02:50.880 I think is the point. 65 00:02:50.880 --> 00:02:54.300 And here a disabled train occurs, 66 00:02:54.300 --> 00:02:56.760 and so it doesn't sort of finish its route. 67 00:02:56.760 --> 00:02:59.730 And by the way, like I said, hover over that thing 68 00:02:59.730 --> 00:03:03.900 and I can see the actual line there that's relevant. 69 00:03:03.900 --> 00:03:05.430 Long story short 70 00:03:05.430 --> 00:03:09.420 great annotations to explain things along the way. 71 00:03:09.420 --> 00:03:10.620 To help me understand what the heck 72 00:03:10.620 --> 00:03:12.870 I'm supposed to do with this data. 73 00:03:12.870 --> 00:03:16.080 Good labeling, subtle typography decisions, 74 00:03:16.080 --> 00:03:18.030 like this is in gray, 75 00:03:18.030 --> 00:03:20.550 these are darker sort of drawing attention to these. 76 00:03:20.550 --> 00:03:22.740 But this is there for your reference point. 77 00:03:22.740 --> 00:03:25.680 Nice header is a bigger boulder typography. 78 00:03:25.680 --> 00:03:27.840 Most of the body copy is fairly similar size 79 00:03:27.840 --> 00:03:31.110 and that's okay, but great labeling 80 00:03:31.110 --> 00:03:32.700 and annotation throughout this data story. 81 00:03:32.700 --> 00:03:34.770 So definitely feel free to check this one out. 82 00:03:34.770 --> 00:03:37.437 It's still up there on GitHub. 83 00:03:37.437 --> 00:03:39.930 But you know, a lot of different type sizes being used here. 84 00:03:39.930 --> 00:03:43.770 A lot of different type colors to help you understand 85 00:03:43.770 --> 00:03:45.150 remember the words, right? 86 00:03:45.150 --> 00:03:46.470 Information hierarchy. 87 00:03:46.470 --> 00:03:50.340 The information hierarchy is clear throughout this piece. 88 00:03:50.340 --> 00:03:51.990 All right, Typography. 89 00:03:51.990 --> 00:03:53.250 I've already started talking about it. 90 00:03:53.250 --> 00:03:54.903 Typography is really important. 91 00:03:55.800 --> 00:03:58.050 Like I said, you can think of it mostly 92 00:03:58.050 --> 00:04:00.180 being just about type size. 93 00:04:00.180 --> 00:04:02.220 I'm not even gonna suggest you think too much 94 00:04:02.220 --> 00:04:06.930 about font selection, although I will say this, 95 00:04:06.930 --> 00:04:10.110 a lot of people, if you want to go beyond one font 96 00:04:10.110 --> 00:04:12.810 which you absolutely can do, at a minimum 97 00:04:12.810 --> 00:04:14.040 what you can do is to say, all right, 98 00:04:14.040 --> 00:04:17.310 I'm gonna use two fonts and everything I create 99 00:04:17.310 --> 00:04:18.960 I usually use two fonts. 100 00:04:18.960 --> 00:04:21.450 One is a Serif font. 101 00:04:21.450 --> 00:04:23.670 So Serifs are when you have these little extra 102 00:04:23.670 --> 00:04:27.210 little things sort of hanging off the edges of the letters. 103 00:04:27.210 --> 00:04:29.730 A sans Serif font is something like Arial 104 00:04:29.730 --> 00:04:32.850 where the letters are just simpler, visually. 105 00:04:32.850 --> 00:04:35.610 When you mix Serif and sans Serif fonts 106 00:04:35.610 --> 00:04:38.670 you can use one for like the headers 107 00:04:38.670 --> 00:04:41.640 and then the other for like body copy. 108 00:04:41.640 --> 00:04:42.810 That's a good strategy. 109 00:04:42.810 --> 00:04:44.490 So feel free to do that. 110 00:04:44.490 --> 00:04:48.300 On top of that, yes, it's about font size. 111 00:04:48.300 --> 00:04:50.010 Important stuff is big. 112 00:04:50.010 --> 00:04:51.930 Less important stuff is small, right? 113 00:04:51.930 --> 00:04:53.280 That's easy. 114 00:04:53.280 --> 00:04:56.010 But it's also about font weight, right? 115 00:04:56.010 --> 00:04:59.430 This is bold, this is semi bold, this is regular. 116 00:04:59.430 --> 00:05:02.910 It's also about font color. 117 00:05:02.910 --> 00:05:06.060 We have black fonts, we have gray fonts, right? 118 00:05:06.060 --> 00:05:11.060 So use color, weight and even the font type with, you know, 119 00:05:12.750 --> 00:05:15.030 within intention, same word, right? 120 00:05:15.030 --> 00:05:17.400 There's a great book, The Big Book of Dashboards, 121 00:05:17.400 --> 00:05:20.340 Steve Wexler and a couple of other guys who I know 122 00:05:20.340 --> 00:05:22.980 two of the three, these three guys wrote this book. 123 00:05:22.980 --> 00:05:26.070 It's all about dashboards and they sort of show examples 124 00:05:26.070 --> 00:05:29.190 of dashboards and what makes them work well 125 00:05:29.190 --> 00:05:31.140 and or less well. 126 00:05:31.140 --> 00:05:32.460 You know, good collection of dashboards, 127 00:05:32.460 --> 00:05:33.750 sort of good inspiration to help you 128 00:05:33.750 --> 00:05:36.030 do better dashboard design which is nice. 129 00:05:36.030 --> 00:05:37.920 But what one of the examples I like to point to 130 00:05:37.920 --> 00:05:42.240 when we talk about this typography is this dashboard. 131 00:05:42.240 --> 00:05:44.940 You know, we have mostly texts here. 132 00:05:44.940 --> 00:05:46.470 It's not like rich with, you know, 133 00:05:46.470 --> 00:05:47.790 a thousand visualizations. 134 00:05:47.790 --> 00:05:50.010 There's a lot of text on the screen. 135 00:05:50.010 --> 00:05:52.050 The visualizations are pretty simple. 136 00:05:52.050 --> 00:05:56.010 And what I like about this from a typography standpoint 137 00:05:56.010 --> 00:06:00.120 is you have five to eight, and I'm just sort of guessing 138 00:06:00.120 --> 00:06:02.730 by looking, different font sizes. 139 00:06:02.730 --> 00:06:06.360 Three different colors for the typography. 140 00:06:06.360 --> 00:06:07.260 One font family 141 00:06:07.260 --> 00:06:09.810 they didn't even bother doing more than one. 142 00:06:09.810 --> 00:06:13.020 It's all title case also, which is another thing 143 00:06:13.020 --> 00:06:14.670 you can do by the way, to differentiate your fonts. 144 00:06:14.670 --> 00:06:16.890 They could have made all the headers 145 00:06:16.890 --> 00:06:18.030 or maybe like those sub-headers 146 00:06:18.030 --> 00:06:22.170 students, enrollments, classes, whatever, all caps, right? 147 00:06:22.170 --> 00:06:25.710 So think about those strategies, all caps, title case, 148 00:06:25.710 --> 00:06:29.070 color, font weight, font size. 149 00:06:29.070 --> 00:06:32.010 You have all this variety of decisions you can make 150 00:06:32.010 --> 00:06:33.750 to make sure that information hierarchy 151 00:06:33.750 --> 00:06:34.890 really comes through. 152 00:06:34.890 --> 00:06:36.960 Say you have two things that they're pretty similar 153 00:06:36.960 --> 00:06:38.460 but this is different from this 154 00:06:38.460 --> 00:06:39.780 but you're gonna use the same font size 155 00:06:39.780 --> 00:06:41.220 cause they're equally important 156 00:06:41.220 --> 00:06:43.710 but you want them to be differentiatable. 157 00:06:43.710 --> 00:06:44.940 And you don't wanna use color maybe 158 00:06:44.940 --> 00:06:47.700 because there's too much color going on on the screen, fine. 159 00:06:47.700 --> 00:06:51.660 Excuse me, maybe one's all caps and one's title case. 160 00:06:51.660 --> 00:06:54.840 Be thoughtful, be intentional with your typography 161 00:06:54.840 --> 00:06:57.423 and overall with your labeling and annotations.