Extra credit: adding a color scale

[00:00 - 00:16] Alright, so we have a scatter plot and we can compare dewpoint to humidity, but what if we wanted to also compare them to a third metric? Now, there's a way to kind of squeeze the third metric into this type of chart, and that is using color.

[00:17 - 00:25] So, color each one of these dots based on a third metric. So, let's, let's see what we have here.

[00:26 - 00:37] So, let's go back and log out that first data point again, just to see what we 're working with. Make it a little bigger.

[00:38 - 00:55] I hope this text isn't too small to see, but if we look in here, one thing kind of jumps out to me, which is cloud cover, which seems kind of related to both humidity and dewpoint. Maybe it has an interesting relationship with these two.

[00:56 - 01:10] So, let's create a color accessor and grab that cloud cover variable. So, let's follow our code down.

[01:11 - 01:20] So, first we access the data, second we create the dimensions, we don't need to change anything here. We're drawing the canvas, and now we're creating scales.

[01:21 - 01:33] So, we're going to have to have another scale for this color dimension. So, let's create a color scale, and this is also going to be a linear scale.

[01:34 - 01:53] And we're going to, so far we've only made scales that the output is a number of pixels, but the same thing can hold, the same exact scale, and we're going to output a range of colors. So, first we'll set the domain, and then we'll set the range, which is output.

[01:54 - 02:18] So, the input we want the extent of everything from this color accessor. So, all those cloud cover values, we're going to find the minimum and maximum, and then for range, let's set this from white, all the way to cornflower blue.

[02:19 - 02:33] So, let's just double check ourselves here. So, let's log out the domain first.

[02:34 - 02:45] So, this is going to be any number from zero to one, pretty simple, and then let's pass a value of zero to the color scale. And this will output an RGB string.

[02:46 - 03:08] 255 is white, because it's an additive color scale, and then one should be this cornflower blue color, and then anything in between. And let's just double check that these colors are going to make sense.

[03:09 - 03:21] In my example, I go from a sky blue to dark slate gray. So, let's do that instead.

[03:22 - 03:31] That might give us a better output. If you start at white, a lot of the circles on the lower end of the scale are just going to get lost.

[03:32 - 03:46] So, it's nice to start somewhere a little bit darker than white and go really dark on the higher end of the scale. So, you have enough difference between two values that are maybe a little bit closer together.

[03:47 - 04:02] The more difference between this first and last color, the more distinction you 're going to have between similar values when you actually color things. So, let's go ahead and do that.

[04:03 - 04:22] So, right now we're setting all of them to this cornflower blue, but let's do the same thing we had for CX or CY, where we take the data point, pass it to that color scale, pass it to the color scale. So, let's go ahead and add it to the color accessor and then grab that data point.

[04:23 - 04:46] So, here we're seeing each of these dots is colored by the cloud cover for that specific day. You see that days with lower de-point and lower humidity have a lower cloud cover, so it's less cloudy when it's a dryer.

[04:47 - 05:25] And it looks a little bit more correlated with humidity, although there are charts that kind of tease out that difference a little bit more, but you can see as we get to the top of the chart here, we get to that dark slate gray color over here, which is going to be more cloud cover, so it's going to be really cloudy when the humidity is high, which makes sense because it's probably raining. So, that's just a way to pretty quickly throw in that color variable to add a third dimension to your chart in case you want to compare another metric to these two that you already have.

[05:26 - 05:46] Now, to make this chart more accessible, we'd want a color legend that kind of said, you know, what is this sky blue and what metric are we encoding with the color, but for now, this works and let's get into legends a little bit later.