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

12:21:56 Hi! Everybody! Welcome back in this video, we're gonna work.
12:21:59 Learn about d 3 dot. J. S. Scales. So remember, in the last video we saw how to make scatter plots, we realized that Svg coordinates don't work exactly the same way as we thought they don't automatically scale to account for our data so wouldn't it be nice to have
12:22:17 something that automatically both accounted for the scale of our data, and then scaled it appropriately for the Svg.
12:22:23 As well as took into account the fact that Svgd coordinates go from 0 at the top to whatever the wide positive Y value is at the bottom.
12:22:30 So d 3 dot Js offers a number of scaling functions that take in a desired domain, and range, and then produces a proper scaling function that will automatically do this for you.
12:22:41 So the standard format that these work in, as you call the scaling function with parentheses.
12:22:49 Then you set the domain to go from the whatever. The lower bound to the upper bound of your domain is, and then you set the range to go.
12:22:57 Whatever the lower bound and the upper bound of your desired range to be so, these are storage in a variable.
12:23:06 So the one that we're going to use the most is d 3 dot scale.
12:23:08 Linear. This produces a linear mapping from the domains, so the values of your data to the range, the height or weight of the Spg, the lower bound of the domain is mapped to the lower bound of the range and the upper bound of the domain is mapped to the upper bound of the
12:23:26 range using a linear function. And here is just a link to some documentation on this function there are other scaling functions that can be found at these documentation links we'll see another example on a later video on color maps.
12:23:41 But for now we're only going to use scale linear so let's see an example with a what is known as a static scale.
12:23:50 So this is a status. Scale is called static. If we manually manually set the bounds of the domain.
12:23:57 So, for instance, 0 to 10. And actually this should not say range, but domain.
12:24:04 And your version of the slide will be correct. Okay, so let's go ahead and see this example.
12:24:11 Now, so this will be scattered plot with scales that HTML file, and here!
12:24:18 So there's 2 differences. There's one difference between this and our previous.
12:24:23 So we have the 3 Divs. But now, instead of adding the Svgs, manually, and the HTML.
12:24:28 Code. We're going to go ahead and add them using the D 3 dot.
12:24:34 J. So this is one of the more common. This is probably the more common way, instead of manually coding them in the Div.
12:24:40 With the HTML code. It's more common to add the Svd.
12:24:44 Using d 3 dot. Js code. So that's what I'm doing here.
12:24:48 So we're still using that scatter data example that we used in the previous video slash lecture and here we're gonna show you how to set the linear skills using the data.
12:25:02 So if we set a fixed, a static one, we would set the domain to be a fixed range.
12:25:10 And so in this example, our X scale is going to go from 0 to 10 to whatever the width of the Svg.
12:25:17 Is, and our Y scale is going to go from 0 to 35.
12:25:21 And now here's a key thing to note with the Y scale.
12:25:26 And now here's a key thing to note with the Y scale being flipped from what we normally imagine with Cartesian coordinates and sorry 0 would get mapped to the height, and 35 would get mapped to 0.
12:25:39 So this would make it so that Y, the y-axis on your Svg.
12:25:45 Your vertical axis on your Svg. Your vertical axis would go in the way that we the Y-axis on your Svg. Your vertical axis, would go in the way that we would typically want it to go so if you wanna use these you can then
12:25:58 go ahead, and maybe you'll be useful to do console dot log.
12:26:03 We could do Y scale 12. And then we could see, for instance, also, like what the X scale of a 7.5 is.
12:26:17 So let's go ahead and look at our browser.
12:26:20 Okay. So now we've seen the pixel values for those.
12:26:23 So for the Y scale of 12. It's 1 97.1 4 whatever, and for the X scale of 7.5 it is 4 50.
12:26:33 Okay. So now, we can see how to use that when we set our scatter.
12:26:39 So this code is exactly the same as last code. Actually, I will have to make one small adjustment to the radius, return parse float d dot R.
12:26:56 Okay. And now you can see, though, the only difference for our X and our Cx.
12:27:01 And our Cis. Now we add the X scale and the Y scale function.
12:27:06 Surrounding the parsing of the floats, and so if we run this, we can see the difference.
12:27:13 So now we have automatically, by making a scale, we've automatically set it so that our range or so that our vertical and horizontal look the way we might want it to.
12:27:26 So this was a static X scale and a static Y scale.
12:27:28 So what's the next to kind? You could have a dynamic if at least one bound of the domain is depending directly on the data.
12:27:37 So as an example, you might want to set it so that the bounds of your Svg.
12:27:42 Go from the minimum to the maximum value of your variable.
12:27:47 So we can do that using d 3 dot Max or d 3 dot max.
12:27:55 So these take in the variable, holding the data as well as a function used to extract whatever the quantity of interest is.
12:28:02 So, for example, you would call to find the minimum of the X Column.
12:28:07 You do? D 3 dot men of the X column, you do d 3 dot min data and then function.
12:28:12 Return. The X value. Okay, so let's go and see what that looks like with a dynamic scale.
12:28:19 And our code. So we can uncomment this.
12:28:25 And then maybe it's useful for the purposes of you know, education to see an example typed out.
12:28:33 So to find the minimum value we would do. D 3 dot min, followed by data, because that's the variable holding our data.
12:28:41 Then we call the word function, d return parse, float.
12:28:48 D Dx. And so this will return the minimum of the X column from our data.
12:28:57 Similarly, you can see on the next line. We go from the Mac to the maximum of our X values.
12:29:01 So there are domain goes from the minimum to the maximum, and then maps it linearly from 0 to whatever the width of our Svg.
12:29:09 So this is a reason I should have pointed this out.
12:29:12 This is a reason why it's common to use d 3 dot. J.
12:29:15 S. To add the Svgs. Because you can set the width in the height as a variable, and then call those variables when you're making your scales.
12:29:25 So I should have mentioned that earlier in the video. Here's us doing the same exact thing.
12:29:31 But now with the Y scale, and then here is me just unconvincing.
12:29:37 This code, and then let's go ahead and copy and paste our adjustment for the radius that I forgot to do before starting the video.
12:29:47 So now you'll see, whereas this stopped in this little small rectangle.
12:29:53 Well, now we see that the plot will then go to the bounds of the Svd.
12:30:00 Okay, so here is our first, where the minimum X and Y were mapped to the bottom left-hand corner and the maximum X and Y were mapped to the upper right hand corner now, as you can see very clearly, this might not be desirable, because our data is going off of the svg and we
12:30:17 can't see it. So a common thing to do is to add padding.
12:30:22 So you can see up here at the top, underneath my Svg variables.
12:30:28 I've also set a padding variable, and so we can now go to this code, and you can see that in my range I've added padding.
12:30:38 So this means that the minimum value of X will go to padding p pixels from the left, and width, and then padding pixels from the right will be where I'm maximum value gets mapped to and then similarly our minimum value for the y will get mapped
12:30:56 to the height minus the padding, and then our maximum value for the Y will get mapped to padding, so this will just ensure.
12:31:06 That when our function goes to plot these things, it's not going to go all the way to the edge of the Svg.
12:31:15 It's going to go to the edge minus some padding.
12:31:19 So let's see what that looks like here. Okay? And so you can see, because I've adjusted my radius.
12:31:25 I might wanna make my padding a little larger. So what if we made the padding 30 pixels large?
12:31:31 Maybe that will fix it, and it does so. Now you can see that in contrast, when we had a dynamic X and Y scale.
12:31:39 But no padding. We went off the Svg.
12:31:42 But once we added some padding in, we're contained within the Svg.
12:31:46 And we can see the entirety of the data.
12:31:50 So that is a common adjustment people will make to make sure that your data is contained entirely within the Svg.
12:31:59 Okay. So now you know about scales. We saw how to apply a scale already, and we saw why, you might want to add some padding.
12:32:09 So that is our first video on how to draw a data graphic, we've made a scatter plot using a scale.
12:32:17 So actually, our second video on making scatter plots but now that we know about scales, it's going to make other plotting types much simpler to make.
12:32:28 So the scales do a lot of the nice heavy lifting for us.
12:32:30 Once we create a scale, and then we can just call them and make things look the way we would expect them to look.
12:32:37 So if you're thinking back to when we learned about Matt plot, live Matt Plotlib is really nice and does all of this scaling behind the scenes? D.
12:32:44 3 js. Is a little bit more, you know, texting or you're working a little bit more with the tools where you're making the scale yourself.
12:32:52 A nice thing about that, is, it? Is. It gives you more direct control at the creation of the Graph.
12:32:56 Instead of having to go back in and edit things according to the way you want.
12:33:00 After making the graph, okay? So I hope you enjoyed this video.
12:33:05 I enjoyed having you watch it, and I hope to see you next time.