Axes Exercise & Solution

[00:00:00]
>> Shirley Wu: So, this is where we create axes at the very beginning of the life cycle. Or in this case, I think I'm just gonna declare on the component itself. So, let's create a x axis and so, x axes,
>> Shirley Wu: Let me show you this.
>> Shirley Wu: So x-axes are the one down here, and this sits at the bottom so that's why we call it d3.axisBottom.

[00:00:34]
We pass in, actually, so create that. And then yAxis, usually we want it on the left, but of course, you can also create one on the right. But for us we're going to create it on the left. And so that's all you need for the axes. But do you guys notice something?

[00:01:05]
Which is that the bars we've been drawing start at zero, but these bars start at about 20 pixels over, so that there's enough room for the axes. So let's take that into account also. Let's shift this over by, I have this margin thing declared up top, so let's move some things over a little bit.

[00:01:32]
So, for the x scale, you know how we've been saying from 0 to width. Let's make that from margin.left, so push that over by the 20 pixels or so. And let's make that go from margin.left to width- margin.right so we can have a bit of padding on both sides.

[00:01:54]
Let’s, and now, see, we have, we now have a nice bit of padding. Let’s do that exact same thing for the Y scale, so we have some padding to draw the axes on the bottom. Height- margin.Bottom, because this right here, down here is the height and we want to subtract the bottom margin from it.

[00:02:15]
And then, let's just give a little bit of margin at the top. And now we should have enough kind of little bit of buffer on both sides to draw our axes. So, again, I declared them up here, the axes. And then, the second part is putting them into the render.

[00:02:49]
So let's make a group element. Give it a ref of xAxis. Create another group element, give it a ref of yAxis.
>> Shirley Wu: And then in component data update,
>> Shirley Wu: All I have to do is get d3, well, actually, first of all,
>> Shirley Wu: We have to get the x scale and the y scale, which we've defined in this function.

[00:03:34]
Right? So, let's return that as the state as part of the state also. So just return xScale and yScale so that in componentDidUpdate, I can say
>> Shirley Wu: this.xAxis and pass in the scale which is this.state.xScale.
>> Shirley Wu: this. And then let's draw that XAxis. So to do that, I need to just use d3 to select the group element.

[00:04:08]
So this.refs.XAxis. So I've selected the group element and I've wrapped that into a d3 selection. Just so that I can call the this.xAxis.
>> Shirley Wu: Look at that. It's drawn the axis at the top.
>> Shirley Wu: Yay, [LAUGH] that's all it took. And let me do the same thing for the yAxis.

[00:04:40]
scale(this.state.yScale d3.select (this.refs.yAxis). So select the yAxis group element. And then call the yAxis. And then you'll see there is something that's been created right here. And so these are the two axes. And then you might notice that they're not at the places that we expect them to be.

[00:05:09]
And so to put them at their places that they should go, again, use that transform that I mentioned earlier. And for the x axis, I just want to bring it to the bottom, so translate.
>> Shirley Wu: So I don't want to translate anything in this x direction. I do want to translate it so that it's at the bottom,

[00:05:40]
>> Shirley Wu: Minus the margin.
>> Shirley Wu: And so now you see the x-axis is at the right spot,
>> Shirley Wu: After I did the translation. And then I want to do the same thing for the Y-axis.
>> Shirley Wu: So I don't need to translate it in the Y direction, but I do want to translate it over by the padding to the left.

[00:06:18]
And that's how we have, we now have axes.
>> Shirley Wu: Let me put that here.
>> Shirley Wu: So all it took was returning the scale, setting the scale, calling it, so this x axis is actually a function and so calling this d3 axis function on the VSG group element draws the x-axis.

[00:06:50]
Doing the same, we'll draw the y-axis.
>> Shirley Wu: Making sure that
>> Shirley Wu: d3 doesn't know anything that's going on within these group elements. So that, sorry, making sure that React doesn't know anything that are going on within these group elements, so that d3 can do whatever it needs in there.

[00:07:19]
That's the axes.