Creating our scales

[00:00 - 00:15] Alright, so now that we have our wrapper and bounds in place, we can get back to the data. So, if we look at our track diagram again, remember that we're plotting each day's maximum temperature over time.

[00:16 - 00:28] So the y-axis is going to correspond to the maximum temperature for every single day. So this means we need to map between the temperature dimension and the pixel dimension.

[00:29 - 00:44] So if we have a specific temperature, we need to know how far from the top of this chart that temperature is going to be, so that we can plot every one of these points. So in order to map between these two dimensions, we use something called a scale.

[00:45 - 01:04] So going back to our code, let's create a y scale, and that's going to use this d3 scale linear method. So d3 has a few different types of scales. It has linear scales, log scales, time scales, step scales.

[01:05 - 01:19] There's about ten different scale types, at least. The one you'll use most often is the scale linear method, which just linearly maps between one dimension to another.

[01:20 - 01:36] And each of our scales is going to take two arguments to kind of define the spaces. So the domain defines the input space, and the range defines the output space.

[01:37 - 01:55] So by that we mean for the domain we need to pass in the minimum and maximum temperature values that we want to be charting. We can just guess and say they're probably between zero and 100.

[01:56 - 02:15] And then for the range we want the... we want the output to be the number of pixels from the top of the chart. This is going to be a little bit backwards for the y scale because in SVG coordinate space you start from the top left.

[02:16 - 02:33] And usually when you're thinking about a chart you want to know for the y axis how many pixels up from the bottom it is instead of down from the top. So we're going to pass dimensions that bounded height and then it's going to go to zero.

[02:34 - 02:50] And let's just take a look at what's going on here. So let's grab the y scale method that this returned or the y scale function and pass zero in here.

[02:51 - 03:06] So we can see that we're getting back the number 345. So this is saying if we have a temperature of zero we're going to plot a point 345 pixels from the top which is all the way down to the bottom of the chart.

[03:07 - 03:21] So if we then now look at what happens if we plot a temperature that's all the way up at the top of the chart. So say it's 100 degrees here.

[03:22 - 03:32] So we can see that it's going to be zero pixels from the top. And then because we're using a linear scale it's going to linearly interpolate between these two dimensions.

[03:33 - 03:52] So let's go halfway in between our minimum maximum temperature you can see this is half the height of our chart. D3 also has a method for getting the exact minimum and maximum value for the domain.

[03:53 - 04:05] This is helpful because you know you don't want to have a domain that's too large because then your line will be really small. And it'll be hard to differentiate you know variations in it.

[04:06 - 04:16] Or if your domain is too small then you're going to be missing parts of your chart. So instead let's use d3.extent.

[04:17 - 04:30] And this will take two parameters. One is the data set and the second is the accessor function to get the value that returns the input to our chart.

[04:31 - 04:44] So thankfully we already defined our Y accessor here that takes the data point and returns the maximum temperature for each day. So we can just plug that in here.

[04:45 - 05:02] And if we log that out let's just double check this is doing what we want it to do. We can see that it's returning an array with the minimum temperature for the year the minimum maximum temperature for the year and the maximum maximum temperature for the year.

[05:03 - 05:16] And this is great exactly what we wanted. Let's also just draw something to the screen to make sure we're doing everything that we think we're doing.

[05:17 - 05:37] So let's just create a variable that corresponds to the placement for freezing on our chart. So this would be freezing, freezing temperature placement.

[05:38 - 05:54] And for this we just have to pass the freezing temperature which is 32 degrees Fahrenheit to our scale. This is going to be the number of pixels from the top of our chart that freezing is of water.

[05:55 - 06:08] And next let's just look at this. Let's depend them to the bounds.

[06:09 - 06:12] So bounds. And this is going to be a rectangle.

[06:13 - 06:20] The SVG element that creates a rectangle is syntax is wrecked. Nice and short.

[06:21 - 06:38] And then we're going to use the attribute method to set a rectangle is placed using four different attributes. So that's x and y to set the x and y position and then width and height to set the width and height.

[06:39 - 06:55] So our x is going to be zero because it's going all the way to the left side of our bounds. And the width is going to be the entire width of our bounds.

[06:56 - 07:20] So dimensions bounded width. And then now we'll set the y value which is this freezing temperature placement that many pixels down from the top.

[07:21 - 07:37] And then the height. There we go is going to be the entire height of our chart minus that freezing temperature placement.

[07:38 - 07:59] So dimensions bounded height minus this freezing this really long variable name . All right, so now we can see there's a rectangle on our webpage.

[08:00 - 08:04] First thing we've drawn to the web page. This is very exciting.

[08:05 - 08:13] Let's kind of change a little. Let's update the background color because black to me doesn't really denote freezing.

[08:14 - 08:31] So what background is to HTML elements fill is to SVG elements. And let's just create let's just make I have this hex code over here.

[08:32 - 08:51] Yo F3 F3. Let's just make the fill that hex code which feels a little bit frost y to me. So I think that was a great way to show, you know, this is how much of our y axis is going to be beneath the freezing point.

[08:52 - 09:04] And if we go back to our diagram we can see that this is already on here in this really light gray color. And to wrap up let's create our other scale.

[09:05 - 09:36] So we'll also need an X scale and this is not we could use a linear scale here. But actually since we're looking at dates let's switch this to a time scale which either has a few differences here you're not going to see too much difference but it changes how it represents these scales on the axes and some small things like this.

[09:37 - 09:52] So for this scale we also want to give it the domain and range. And so for domain we're going to get the extent of the X accessor values.

[09:53 - 10:02] So this is all of the dates. And then for the range it's going to go from D0 to dimension step bounded width .

[10:03 - 10:28] [ Silence ]