d3.js Colormaps Video Lecture Transcript
This transcript was automatically generated by Zoom, so there may be discrepancies between the video and the text.

11:37:16 Hi! Everybody! Welcome back in this video. We're going to learn about how d 3 dot J. S.
11:37:23 Handles, color maps. So in d 3 dot Js colors can be set like any other attribute.
11:37:29 Typically this is either going to be a fill or a color.
11:37:32 If you want to set the interior of the shape or a stroke, attribute, if you want to color the edge of something, so colors can be provided as a string.
11:37:42 For example, you could set the fill of a circle to be blue, or the stroke of a circle to be blue, or you could set a hex code you can also do RGB.
11:37:51 Arguments with the parentheses. You can also do RGB. Arguments with the parentheses, with 3 3 numbers of the amount of red, green, and blue.
11:37:57 But typically I stay with, typically, I stay with texts of string of color names or hex codes.
11:38:06 But you can do whatever you'd like, so it can also be a data value.
11:38:12 So in this example, this could be, your data value could provide a color string.
11:38:19 So maybe you have an argument where the color, like the value, is red blue, green, or something like that, or you could feed this value into a color map like what we did with Matt. Plot. Lib.
11:38:29 Where the color map has a mapping from, say, the minimum value to the maximum value that corresponds to one color gradating into another color so let's talk about how we can create color maps and D 3 dot Js, so this is another scale for a linear color map we use the D
11:38:47 3, dot scale sequential once again we must provide a domain, and then, after providing the domain instead of a range, you provide an interpolator.
11:38:57 So this is another d 3 dot Js object. These are equivalent to map, plot, lips, color maps, and so as an example, interpolate graze is equivalent to the grayscale color map from Matt Plotlib if you'd like to see additional types of interpolators
11:39:12 I encourage you to check out this link, and you can see more examples that you might prefer to use in your graphs.
11:39:19 So to make a color bar. So once you set the color and maybe that's what we should look at first.
11:39:26 So here's our color, dot. HTML code, which you can see is within lecture 26, dash coloring in the repository.
11:39:34 Let's go ahead. So what we're gonna do first is we'll open this and I'll show you what our data looks like.
11:39:41 And let me go ahead, and that's what the end product looks like.
11:39:45 But we're gonna see all the different steps. So let's go and look at our web.
11:39:49 Console wrong one. I want the developer tools.
11:40:00 Okay. And let's look at our console. So here's our data.
11:40:04 It's got an x o y, and a color, and you can notice the color is a float.
11:40:09 So this is what we'll be using our color map on.
11:40:12 Okay, so first, what thing that we're doing is setting our adding our Svg, and then we'll come back to this second Svg.
11:40:26 In a second, then the next thing we're doing is making our X scale on our Y scale, appending some axes.
11:40:33 Okay. And then here's where we make the color scale so let me slide over so we can get the code in here.
11:40:41 So I set the color scale to be d 3 dot scale sequential.
11:40:46 The domain is going to go from the minimum value of your color column, which here is just color.
11:40:51 But in practice it could be any column to the maximum value of your color column.
11:40:57 Then, after the domain, we add a interpolator, which for us is going to be the gray scale, one d.
11:41:04 3 dot integers, so that's our color scale.
11:41:08 And so then, when we want to add the color to the scatter plot, everything's the same.
11:41:14 The only thing that changes is the fill arguments now becomes a function of the color scale of the arced floated value of the color column, so that's how we get these circles here.
11:41:29 So all of these circles have their colors set by the fill, using the color scale.
11:41:38 Now, the next question is, once we have this, remember it's not very useful to only present this without additional information.
11:41:44 So how can I make a nice color bar like we see over here on the right?
11:41:48 So let's talk about color bars. So to make a color bar with D, 3 dot jx, you'll typically have a second Svg, it can be above to the left, to the right or below, and then on that Svg, you simply present a series of stacked rectangles with colors
11:42:06 that change in the way that your colour map changes so if you're doing like we're doing here, the bottom rectangle will have the lowest value for the color map.
11:42:18 And then just increase with the colour as your rectangles get stacked, and it might be hard to see, but once you zoom in a little bit, you may be able to see, like the actual individual, rectangles that we're stacking up so here, I think I may have a 100
11:42:34 rectangles stacked up and then each rectangle is colored in a way that it matches with the value.
11:42:39 So let's go ahead and talk about the color bar.
11:42:43 So to add the colour. Bar. The first thing I do is append an Svg.
11:42:49 For the color bar. And I want you to know that for both Svgs.
11:42:54 I've set their floats to be left so that way they can be stacked next to each other like they are here if I didn't do this this second Svg.
11:43:02 Would actually be showing up down here below, which is not what we want.
11:43:07 Okay, if you wanted to put a color bar on the left hand side, you could set the left.
11:43:12 The floats equal to to right? Okido Key. So now let's go ahead and look at this.
11:43:20 So now I'm making a different variable called color map, which is going to go for 0 to the total number of rectangles that I'm using, which I'm going all over the place I know.
11:43:30 But here I've set the total number of rectangles I'm using to be 100 at the top of the code.
11:43:36 So it's gonna go from 0 to 100 and then do the same interpolator.
11:43:41 So this will map the value of 0 to the lowest value of the color and the value of you know 100 to the highest associated color value.
11:43:52 Now the rest of this is just creating some c maps for the plot, so like here, I'm making a Y scale so that my rectangles will fit in the plot.
11:44:02 Nicely here. I'm making another scale, so that the color legend can have an access and this is, I know it seems like a lot, but it's just sort of like the manuscript that you have to do in order to add both the color bar and an access so here's where
11:44:19 we append the color bar. So here's a nice new thing that we haven't talked about.
11:44:24 So we can say, D 3 dot, and let's make sure we do, the the comment.
11:44:30 Right d 3 dot range is equivalent to pythons.
11:44:36 Range. Okay, so here I'm doing a range from 0 to the number of rectangles I have and then I'm going to go through.
11:44:47 And for each of those elements in the array I append a rectangle.
11:44:50 The x attribute will be set to 0. The Y attribute will be set to 0, the Y attribute will be set to the Y attribute will be set to the the corresponding y scale. The height is set to be the rectangles height which I calculated up above to
11:45:04 be, whatever whatever the height of my Svg. Is, minus the padding.
11:45:10 Divided by the number of rectangles, so doing that by hand, and then the width is just set to be whatever I set it at the top, and then the fill is set to be the corresponding color.
11:45:22 Map. So, as I said, 0 would be mapped to the lowest color and the grayscale one is mapped to the highest color in the gray color.
11:45:30 I guess not one, but 100 in this example. Okay, then we just append it, just like we would any other access.
11:45:37 Okay, so here are those rectangles. And if we look, we can see that each one is its own individual rectangle.
11:45:45 As we go all the way up to the top.
11:45:49 Okay. And it might be, I'm not sure if you can see it, but on my screen, if you look carefully, you can see, like the little white lines marking it.
11:45:58 And so maybe we could even add on to this, in addition to the fill.
11:46:04 What if we also set the stroke to be equal to this color map?
11:46:09 And maybe that will help fix the separating lines.
11:46:15 And there you go. Now it's a little bit harder to see the individual rectangles.
11:46:20 Okay. But if we zoom in enough, you can still kind of see them.
11:46:25 So another thing you could try doing is, we'll what if I increase the number of rectangles?
11:46:30 So currently, the is set up with a 100. But what if I tried like 200?
11:46:33 How does that impact it? Okay?
11:46:39 Maybe a little smoother transition. You could also see, like, what if I chose, fewer rectangles?
11:46:45 So you have it really have a lot of control over your color.
11:46:49 Bar, and like, even if we did like, say, 10, okay. And so now with 10, you can really see the rectangles.
11:46:56 So let's go back to our let's stick with 200.
11:46:59 I kind of liked the way that one worked.
11:47:02 Okay. All right. So now you know how to both change colors in d 3 dot.
11:47:09 Js, according to data as well as provide a color map for a continuous variable.
11:47:17 Now we did not explicitly touch on providing a color map for a sequential, variable.
11:47:22 That one slightly different where you may have to provide a mapping for the unique categories.
11:47:27 To, the, to the appropriate color, but I believe you could do something like that using a Json variable, and then just mapping them out.
11:47:38 Accordingly, and there may also be some interpolators that work for categorical data.
11:47:44 Okay. So I hope you enjoyed learning about all this stuff in this video.
11:47:48 And lecture I hope to see you next time where we talk more about things we can do with D 3 dotjs, and diving into a little bit of interactivity.