Custom color scales

[00:00 - 00:15] So sometimes the built-in color scales just aren't going to cut it for your data visualization and we can go ahead and make our own custom color scales. There's a D3 interpolate module which will interpolate in between different values.

[00:16 - 00:24] So if you interpolate between 0 and 1, halfway through you're going to have 0.5 . You can do that same thing between two colors.

[00:25 - 00:36] So we have this section over here in our code for custom color scales. And in our draw scales.js file, we can go ahead and create these new custom scales.

[00:37 - 01:03] We have a few built-in functions here that will help visualize these new custom scales. So if we wanted to make a new color scale that went between cyan and tomato, two great colors, we could use this D3 dot interpolate RGB and then add the first color and the second one and we're going to have this nice interpolation in between cyan and red.

[01:04 - 01:18] The way that the interpolate functions work is they have different color spaces which we'll talk about in the next lesson. There's RGB, HSL, HCL.

[01:19 - 01:24] I think there's a few others. I think it might have a hex as well.

[01:25 - 01:45] But basically it's just going to return a function that will take a number. So if we log out this color function, let's just add this into a variable.

[01:46 - 02:08] And then our color function, if we pass in any number from zero to one, it'll return an RGB string. So if we entered zero, this is cyan color, I think this was if we didn't have anything, I think it returns black.

[02:09 - 02:14] Yep. If we return one, if we pass in one, it'll return that tomato color.

[02:15 - 02:27] And anywhere in between, it'll return a string that corresponds to a color in between. So this zero point five is going to be half between the cyan and tomato.

[02:28 - 02:42] It's going to be this like murky grayish color. So we have this in our kind of workspace, we have this method called add custom scale.

[02:43 - 02:50] And it takes two parameters, and this is just for visualizing different color scales. The first parameter is some kind of unique ID.

[02:51 - 02:54] It's going to be a string that'll identify that scale. It can be anything.

[02:55 - 03:06] It'll be displayed above this scale, and it'll use that to paint that gradient on top of a rectangle. So it's just important for that string to be unique.

[03:07 - 03:20] We can't use the same one here and also here. Yeah, it's just painting this first scale onto both of these.

[03:21 - 03:29] And then the second parameter is going to be that function that takes in a number from zero to one and returns a color. So we can use that.

[03:30 - 03:41] We can create a function using interpolate RGB or interpolate HSL. So we can kind of see, start to see the difference between these two color spaces.

[03:42 - 04:01] We also have this interpolate with steps function, and all it does is returns an array with that many steps between zero and one. So if we log out interpolate with steps and we pass in six, it's just an array with six numbers that goes from zero to one.

[04:02 - 04:07] And it interpolates linearly in between. So .2, .4, .6, .8, and then one.

[04:08 - 04:32] And this is nice for having kind of a discrete color scale where it's not continuous in between the two colors, but instead it has, this one has five different colors. And so hopefully you can use this as a playground to create your own custom color scales.

[04:33 - 04:42] If you're just playing around with a library, it can be hard to understand how it's going to look. Looking at this RGB string, I don't know exactly what color that's going to be.

[04:43 - 04:47] But it's pretty simple to create your own custom color scales for your own data visualizations.