Example redesign

[00:00 - 00:13] Okay, this lesson is going to be really fun. We are going to apply what we've learned to a chart and kind of do a makeover of this chart with a certain goal in mind.

[00:14 - 00:27] So our chart is showing a timeline of the relative humidity over the course of a year that is 2018. And the goal of this chart is going to be to examine how humidity changes depending on the time of the year.

[00:28 - 00:41] Now I think it would be a really fun exercise for you to pause the video right now and write down a few ways that you would make this chart better. All right, hopefully you did that.

[00:42 - 01:03] I do want to preface this by saying there is no one correct way to change this chart, but we're going to do our best and hopefully this is a good example of how a chart design can really change the impact of a chart. Especially given the goal, which again is examining how humidity changes depending on the time of the year.

[01:04 - 01:15] So first off, this chart is really busy. It's pretty hard to get any sense of a pattern or trend from this line since it 's so noisy day to day.

[01:16 - 01:29] So the first thing we want to do is to kind of cut back on that noisiness. So we're going to down sample our data and make it so that we don't have a line going from day to day because there's just so many zigzinsags.

[01:30 - 01:37] It's hard to follow the overall curve. So from this to this.

[01:38 - 01:46] So it's a little bit easier to see the pattern through all of that noise. But we're kind of missing the individual data points.

[01:47 - 02:03] So it still is nice to see the humidity of every single day. So we can add those back in without taking attention away from the overall trend by putting a dot where each of those days values are.

[02:04 - 02:20] So now you kind of get the overall trend and you also get those individual days to see if like what's the spread like are there any extreme outliers, that kind of thing. And note that the dots are a lighter gray than the line and that is because they can really steal the show.

[02:21 - 02:32] So this kind of decreases their visual importance and keeps the focus on the line itself. But there's still enough contrast with the background so that they're not getting lost and they're still easy to see.

[02:33 - 02:38] All right. Next I think it's still feeling a little bit busy.

[02:39 - 02:47] So we want to simplify a little bit. So we're going to get rid of those grid lines that are going all the way across the chart.

[02:48 - 03:01] We're going to decrease the number of ticks on that y-axis. So we're going from I don't know maybe 15 to 4, just kind of cut down on the noise over there.

[03:02 - 03:16] We don't need to see every single value of humidity. And we also took out the background color of the chart to kind of keep things a little bit more simple.

[03:17 - 03:26] Next up we want to revisit our goal because they're feeling pretty good about how this looks. So our goal again is to examine how humidity changes depending on the time of the year.

[03:27 - 03:54] So with that in mind we don't necessarily need to know exactly what month or what day a certain date is we can instead focus on the seasons. So if we break it up by season, so this blue is winter and then spring and then green is summer and then fall, it kind of does some of the work that the user might be doing in their own head when they look at the chart.

[03:55 - 04:18] This is how a lot of people think about changes throughout the year or how people associate humidity to certain dates is oh and the winter it's lower and the summer it's higher, that kind of thing. So one of the tricks we talked about in our last lesson is annotating in place.

[04:19 - 04:23] So right now we have this legend over on the right. There's a few issues with this.

[04:24 - 04:52] One is that spring and fall are the same color which we can kind of get away with because people generally know the order of winter, spring, summer and fall but as a legend using color to someone might view the legend see fall and then look for the white block and then they might look at the wrong one. So instead of having a legend let's annotate in place and move those seasons down to the bottom.

[04:53 - 05:02] And we've also kind of made this assumption that the end of the specific month isn't very important. So we've replaced those with the season names.

[05:03 - 05:21] Maybe this is a good assumption, maybe it's a bad assumption. You kind of have to know who's going to be looking at the chart and if it's an interactive chart we could also add a tool tip in case it's really important to users to know individual dates.

[05:22 - 05:36] Another thing that we could improve on here is the y-axis. So over here we have numbers and then we have this rotated label which rotating texts can be really hard to look at.

[05:37 - 05:44] It's harder to read. It's a little bit divorced from those number values so we can try integrating this into that y-axis.

[05:45 - 06:11] So instead of just having that rotated text and then the numbers we can kind of integrate it. So this top one reads one relative humidity and maybe this isn't the most readable statement but that's another trick I like to use which is as much as possible having human readable phrases just speaking to readers in their own words really helps them.

[06:12 - 06:53] When you come across a new chart if it's speaking your language you're going to understand what is talking about a little bit faster. And then the last thing I want to work on here because I feel like we're getting to a really good place is that we have this trend going through each of our seasons but maybe we want to know how each season compares in general and that can be a little bit hard to compare because things change so gradually so we could change it so that there's only one data point in each of the seasons but that really reduces the data a little bit too much.

[06:54 - 07:41] So instead we can just add this mean line through each of the seasons with this label this annotated in place mean line where we can see that winter is a little bit more humid than spring not really though and then summer jumps way up and then fall comes down a little bit so it's a little bit harder to see when you don't have those mean lines but having them there really helps that stand out. So hopefully this was helpful to you to see kind of a step by step evolution of a single chart and I think if you're going to take anything away from this video the most important thing is to just focus on the goal of the chart and if you do that then it's pretty hard to go wrong.