Step 4: Create scales

[00:00 - 00:15] Alright, so our next step is to create our scales. So first let's create that y-scale that converts things from our dew point into pixels from the left.

[00:16 - 00:28] So we're converting from the data domain into our physical domain. So cons x-scale equals, and then this is going to be a linear scale, so a scale linear.

[00:29 - 00:34] And then remember that each scale we want to specify two things. The first is the domain.

[00:35 - 00:38] So what is the data? The extent of the data domain and what is the range?

[00:39 - 00:55] So what is the extent of the output physical domain? So for this domain we can use the d3 extent method, and then this will take our data set and also our x-accessor.

[00:56 - 01:30] So it'll map over data and look at each one of those x values and figure out the smallest and largest and this is going to output an array of small and then large, just like that. And then for our range we know that our x-scale will extend all the way across our bounds, so let's start at zero and end at dimensions.not width, because that's the width of the value of the wrapper, but bounded width.

[01:31 - 01:48] So let's take a look at that domain real quick. And you can query what the domain is by not passing anything to this domain method, and instead of updating the domain it'll spit out that domain.

[01:49 - 02:20] So we can see this is from -7 to 73.8, let's look at an example of what this chart would look like. So we can see the smallest point is at -7.2 and this biggest point is at 73.8, but it was just kind of hard to figure out what is the extent of this x-axis.

[02:21 - 02:44] Now D3 has a nice method for each of these scales where it'll take that scale and convert the start and end of the domain to nice round numbers. So instead of having an x-axis like this where it goes from values where it doesn't even label on the axis, it'll go from -10 to 80.

[02:45 - 03:05] And it's just a little bit easier to look at this chart and have these nice round start and end values. You can see the y-axis, the top value isn't even labeled because it goes to probably 0.98 or something and just squeezing the chart down a little bit more.

[03:06 - 03:27] To get those round values kind of helps for people looking at the chart to reason about the numbers in that chart. So we can see if we add .nice here, that domain goes to -10 to 80 instead of this a little bit one here numbers.

[03:28 - 03:55] And we can just copy and paste this for the y scale. So we want to use the y-accessor instead of the x-accessor and then we also want to invert the axis because remember SVG coordinates go from top to bottom but we want our chart to go from bottom to top because that's how y-axis are typically defined.

[03:56 - 04:06] So we go from the height which is the bottom all the way to 0 which would be the top. And we're also going to want nice on here as well.

[04:07 - 04:18] It's just nice to have no pun intended to take your chart from something like this to something like this. And it's a small change but it really does make a difference when you're trying to read