Color scales

Choosing colors is one of the hardest parts of designing a data visualization! We talk about the three main types of color scales, and related functions that are built into d3.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Fullstack D3 Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Fullstack D3 Masterclass with a single-time purchase.

Thumbnail for the \newline course Fullstack D3 Masterclass
  • [00:00 - 00:18] One of the hardest parts about making a data visualization is choosing colors. So we're going to talk a little bit about how to develop a good framework for choosing colors, important facts about the human visual system and some simple tips and tricks that hopefully make this a lot easier.

    [00:19 - 00:41] So we have this example where we're displaying all of the color scales within the D3 scale chromatic library, and there's a lot of them, so we're going to break it down a little bit into these separate groups and talk about why you would use one group first to other. So the first thing you want to do is figure out what the goal of this color scale is.

    [00:42 - 00:52] So you're representing a metric, say it's temperature, and you want to represent that using color, which scales we want to use. So there's three categories that we can break this into.

    [00:53 - 01:07] The first is if you want to represent a category, the second is for representing a continuous metric, and the third is for representing a diverging metric. So to start, we're going to talk about what color scales we'll use for representing a category.

    [01:08 - 01:17] And we talked a little bit about data types. This is really good for a binary data type or nominal data type where there's no natural order.

    [01:18 - 01:35] So these categorical color schemes that come in the D3 scale chromatic library, you can see that they kind of cycle through different colors. It's really nice when they have colors with different color names, so people are communicating about the colors.

    [01:36 - 01:44] They can say, oh, it's the blue color or the orange color. Sometimes if there's two blues, it can get a little bit hard to talk about.

    [01:45 - 01:58] Another important thing with these color schemes is that there's enough contrast between different colors. So you can tell even if they're far away if a dot is blue or orange or green, and they're not super muddy.

    [01:59 - 02:12] And there's a ton of options here, so you can have something a little bit more pristine, a little bit brighter. Say you want a paired scheme where there's two types of certain categories.

    [02:13 - 02:27] This tableau scheme is a little bit newer. It's really nice. So it's nice to have those options there, and this is for different categories where there isn't necessarily an order between the different data values.

    [02:28 - 02:38] The second category is when you have a continuous metric. So this is for something like temperature where something can be cold or can be hot or can be in between.

    [02:39 - 02:50] We have these sequential color scales for, you know, you might have a lower temperature over here and a higher temperature over here. And you have this kind of like nice interpolation in between.

    [02:51 - 03:01] So D3 has many different options. There's blue, green, grey. These are all kind of staying within the same cube.

    [03:02 - 03:12] You could also have a multi-use sequential color scale. And these are really nice for adding more contrast in between the values.

    [03:13 - 03:29] So if someone's looking at a color legend and they're looking at a data point that's far away, it's easier to tell where it falls on the legend or if they're trying to compare two dots in a scatter plot. It's easier to tell which one is farther along in the color scale than another one.

    [03:30 - 03:43] And you can kind of tell if we look at, this is a really good example. So if you look at the blue midway versus maybe 70% of the way, the blues are pretty similar.

    [03:44 - 03:54] But if we're going to this turbo scale midway for 70% the way we're looking at a green versus orange. So there's going to be a lot more contrast between those values.

    [03:55 - 04:09] And on the over here, we also have these cyclical color scales, which are good for when there's no natural beginning or end. So in this interpolate rainbow, it goes from purple all the way through the rainbow back to purple.

    [04:10 - 04:19] So this is good for something like maybe time of year. So maybe we start in January and we go through February, March all the way back to January.

    [04:20 - 04:28] And there isn't really a hard stop between those two Januarys. It kind of just flows all the way around.

    [04:29 - 04:35] Yeah, it can be really nice. And then the third category is right here, these diverging color scales.

    [04:36 - 04:41] So this is for, it can even be for the same metric. So say we use temperature again.

    [04:42 - 04:57] If you want to highlight the extremes, so the coldest temperatures and the hottest temperatures, using a diverging color scale can be really nice for really accentuating the ends. So maybe we'd use this interpret red, blue color scale.

    [04:58 - 05:09] The average temperatures would be this kind of gray color that doesn't stand out very much. But then as you get really cold or really hot, it would become bright red or bright blue.

    [05:10 - 05:16] Yeah, so those are all the color scales. Hopefully this helps give a little bit more structure.

    [05:17 - 05:25] And so you're not just desperately picking, but you have this kind of myth ological way of approaching choosing a color scale.