Drawing the axes

[00:00 - 00:12] All right, so we're so close to having a finished chart. If we look at it, we can see there's just one thing missing and that is the left and the bottom axes that say what different values are.

[00:13 - 00:20] But I just look at this. This could be charting anything or these temperatures could be, you know, 50 to 70.

[00:21 - 00:26] Who knows? So let's start by creating a Y axis.

[00:27 - 00:35] And this can be a lot like our line generator. So we're going to create a Y axis generator function.

[00:36 - 00:47] And this is going to use the d3 method axis left. So if we look at our diagram, we can see that our Y axis is going to be to the left of our chart.

[00:48 - 01:02] And d3 has four of these axis functions for all the different sides of your chart. It could be top, right, bottom, or left.

[01:03 - 01:13] This just changes the orientation of everything within the axis. And our axis generator, all we need to do is pass this scale.

[01:14 - 01:33] Y scale. So this is really handy because our scale already knows what is the domain, the input domain and what is the output domain and how large these domain and range dimensions need to be.

[01:34 - 01:42] So if we just pass it the scale, we have this Y axis generator. If we log this out, we're just going to see a function.

[01:43 - 01:56] And if we call it, it's going to complain because it expects something to be passed to it. So let's pass our, well, first let's create a new group element.

[01:57 - 02:10] So const Y axis equals, let's add that to our bounds. G is for a group.

[02:11 - 02:18] And then we're going to pass our Y axis to our Y axis generator. And we can see all of a sudden our chart has a Y axis.

[02:19 - 02:38] So it's created these little tick marks for each of the ticks and the tick labels that say what each of these positions means on the chart. One way of refactoring this code is just by using call and then passing this Y axis generator.

[02:39 - 02:51] It's going to do the same exact thing. I think now we actually have two Y axis because this code and this code are doing the same thing.

[02:52 - 03:01] Using call is really nice because you don't have to break the chain. So you're still using that chain that helps keep our code so concise.

[03:02 - 03:12] Yeah, so we can do the same thing for the X axis. So first we'll need to make the generator.

[03:13 - 03:26] So d3.axis bottom because our X axis is going to be at the bottom of our chart and pass our X scale. And then we're going to add that element.

[03:27 - 03:42] So bounds append G and then call our X axis generator. That created a X axis.

[03:43 - 03:55] You can see it's the bottom orientation of an axis. The tick labels are underneath the line that's supposed to show the boundary of the chart.

[03:56 - 04:02] But it's not exactly where we want it to be. So let's move it.

[04:03 - 04:17] Let's use style and then our transform, translate trick. But now we only want to specify the Y value.

[04:18 - 04:28] We can see it's horizontally exactly where we want it to be. So we can just specify and translate Y and then pass in the entire height of our bounds.

[04:29 - 04:34] So dimensions that bounded height. And then we want to throw pixels in there.

[04:35 - 04:44] And it's a little bit scrunched right now. It's just creating that default axis.

[04:45 - 04:51] There are ways to specify how many ticks there are, what format are these ticks in. And we'll get into that a little bit later.

[04:52 - 05:00] But for now, you've created your first chart and this is so great. Super amazing.

[05:01 - 05:06] Spend some time celebrating and going through the code line by line, just making sure you understand everything.