Step 6: Draw peripherals

[00:00 - 00:09] Okay, so the last step we're going to do on this chart is to draw our peripher als. So on this chart, it means drawing the x-axis and the y-axis.

[00:10 - 00:27] So this is going to look pretty similar to what we did last time. Let's create an x-axis generator function using d3.axis bottom because we want it to be on the bottom.

[00:28 - 00:32] And we want to pass it r scale. So that's our x scale.

[00:33 - 00:53] And then we're going to create a new element, bounds.append g, just to keep our axis organized and within its own group, within the DOM. And then we're going to call our x-axis generator.

[00:54 - 01:02] Now remember that our x-axis will just default to the top left corner. They're not positioned or anything.

[01:03 - 01:14] The x-axis bottom only tells it what the orientation of the line and the ticks and the label where those should be within that element. So we'll also want to move it.

[01:15 - 01:28] So let's do a style. Let's spill it correctly and let's transform it.

[01:29 - 01:41] And we want this to actually, we're okay horizontally. We can just change this to translate y because we only need to move it in the y direction.

[01:42 - 01:56] And let's pass this r the height of our bounds dimensions dot bounded height. And since we're using style, this needs to be have units.

[01:57 - 02:03] So that many pixels. So now we've moved it to the bottom of our screen.

[02:04 - 02:15] Now another thing that's really nice to have on an axis, not just the values, is the label of what exactly we're drawing right here. So let's go ahead and throw a label on there.

[02:16 - 02:28] So a const x-axis label. And then if we look at our little cheat sheet, we can see this new SVG element called text.

[02:29 - 02:31] It's how you write text in this. It's pretty sure forward.

[02:32 - 02:48] And the attributes we're looking at here are x and y to position it. So let's go ahead and grab that x-axis and append text element.

[02:49 - 03:00] And we didn't find it here. Let's just think that within a variable.

[03:01 - 03:05] All right. So again, we're going to use the x and y attributes.

[03:06 - 03:16] So for x, we want this to be halfway across our chart. So dimensions dot bounded width divided by 2.

[03:17 - 03:22] And then for y, we want it all the way at the bottom of our chart. I'm thinking right down here.

[03:23 - 03:42] So for y, let's do dimensions dot margin dot bottom. Because we're appending to this x-axis, which is already at the bottom of this chart, we're going to put it all the way at the bottom.

[03:43 - 03:52] And let's actually just bump it up a little bit so we can see it. Let's go ahead and write what it is.

[03:53 - 04:04] So we can use the dot HTML method to set what the text is. So we want this to be do point.

[04:05 - 04:09] Let's see if that's rendering. No, it's not.

[04:10 - 04:18] So let's look at it within our dev tools. Let's see what's going on here.

[04:19 - 04:29] And as we wait for this to load, we know that we want our text to be black. So let's change that fill to be black.

[04:30 - 04:33] OK, great. So we don't even need to inspect it.

[04:34 - 04:46] We know it's right at the bottom. I think the D3-- let's actually open that back up.

[04:47 - 05:00] I think what was happening is the D3 axis has a default fill attribute. And that is inherited down to any text that is within it here.

[05:01 - 05:14] So let's go up to-- it's kind of hard to tell within here. Yeah.

[05:15 - 05:29] So this, when you create a D3 axis, it sends the fill to none. So one of your adding text to it and access, you can see it's doing that for each of these tick labels.

[05:30 - 05:39] It's sending the fill to this current color, which we could also do. We could do fill as current color.

[05:40 - 05:48] And that's also going to draw it in black, but let's specify black just to be safe. It's a little bit small, so let's also bump that up.

[05:49 - 05:57] Let's set a CSS style of font size. Let's set that to 1.4 EM.

[05:58 - 06:08] And then the other thing that would be nice here is specifying what our units are. So this is going to be in degrees Fahrenheit.

[06:09 - 06:21] And in order to rate that degrees symbol, we can use this Unicode code of am persand degrees semicolon. All right.

[06:22 - 06:25] So that's our x-axis. Let's quickly do the same thing with our y-axis.

[06:26 - 06:33] So y-axis generator equals-- and this is going to be on the left side-- so D3. axis left.

[06:34 - 06:46] And we want to pass it our scale. And then-- got to spell things right.

[06:47 - 07:02] And then let's create the y-axis of-- hence y-axis equals bounds. We want a new G element to group them together, and then we're going to call y- axis generator.

[07:03 - 07:10] That's the one. Oh, that's funny.

[07:11 - 07:14] This is a new y-scale. All right.

[07:15 - 07:16] Awesome. So we have this y-scale.

[07:17 - 07:40] One thing to kind of keep things sane here, we can see there's a lot of ticks, and we're not getting a whole lot from, you know, knowing exactly where 0.8 and 0.85 is. One thing we can do is for this y-axis generator, we can pass the number of ticks.

[07:41 - 07:50] And say we want four ticks, we're going to pass four, and it's going to render four ticks. Now, keep in mind that this is just a suggestion.

[07:51 - 08:00] D3 has some code under the hood that rounds this into tidier numbers. So it's not going to give you exactly the number that you asked for.

[08:01 - 08:16] So if we ask for five, it's going to round it into this eight ticks, but it does this so that it can add a tick at a rounder number. So 0.8 and 0.9 make it a little bit more sense.

[08:17 - 08:33] And, you know, if it were to add five equally spaced ticks, they might be really wonky numbers and might be a little bit harder to look at. So the last thing about here is that y-axis label.

[08:34 - 08:43] And this is going to look a lot like this x-axis label. So let's append some text.

[08:44 - 08:52] We know off the bat that this is going to be without a fill. So let's set the fill to black.

[08:53 - 09:00] So we're not missing it. And the way we set the text, we can either use HTML.

[09:01 - 09:05] Or we can use text. They basically do the same thing.

[09:06 - 09:13] It's just that HTML is going to parse this Unicode character. You can see if we put text here.

[09:14 - 09:19] Sometimes it doesn't do that. So it's going to interpret this string as HTML.

[09:20 - 09:29] But here we don't need to see that. The y-axis, we're going to say it's a relative humidity.

[09:30 - 09:33] So we can see it up in the top here. This isn't exactly what we want.

[09:34 - 09:49] Let's scoot it over by the -- this will be a little confusing. But we'll see why soon.

[09:50 - 10:11] So our x attribute is going to be negative half of the height. And the y attribute is going to be negative the left margin plus 10.

[10:12 - 10:16] So scoot it over all the way to the left. And then move it over a little bit so we can see it.

[10:17 - 10:28] So negative dimensions.margin.left plus 10. And we're doing this because at the bottom here we want to rotate our label by 90 degrees.

[10:29 - 10:45] So to do that, that's also in this transform attribute. But instead of translate, we're going to rotate and then that's going to be negative 90 degrees.

[10:46 - 10:54] So we can see it in the middle there. And one thing we might notice is that it's not exactly centered vertically.

[10:55 - 11:02] It's kind of down to the bottom here. And that's due to where the text anchor is.

[11:03 - 11:15] So is it rotating around the beginning of the string, the middle of the string, the end of the string? Let's just make sure that it's anchored around the middle.

[11:16 - 11:29] So it's moving on that middle axis. Okay, perfect. And the only other thing we want here is to move up the size to match the x axis label.