Drawing our peripherals in React

[00:00 - 00:07] Next, we want to draw our peripherals. So for this timeline, we want to draw the x and y axis.

[00:08 - 00:23] So we're going to take the naive approach and see what happens if we use the axis left and axis bottom methods we've been using so far with D3. And these will go ahead and draw all the tick marks, the lines, and the text for this axis.

[00:24 - 00:42] And in the next lesson, we'll talk about why you might want to use another approach, but this approach definitely will work. And this is just a way to show you how to use the methods we've learned within React in a really easy way.

[00:43 - 00:53] All right, so we can see we're importing this axis from this axis naive component. We'll update that in the next lesson, but for now we want to use this component .

[00:54 - 01:07] So here, let's go ahead and create our axes. We're going to want two axes. This first one is going to be an x axis. So if we look in our axis component, it wants a dimension and a scale.

[01:08 - 01:22] So we're going to go ahead and pass this dimension. This first one is the x dimension and the scale will be the x scale. And we can go ahead and do the same thing for our y axis using the y dimension and our y scale.

[01:23 - 01:32] And just a reminder that place these axes where you want them. If you want them over your line, place them after your line element.

[01:33 - 01:38] If you want them underneath, place them before. Just a reminder that z index doesn't work with SVG.

[01:39 - 01:47] It's just going to depend on where in the DOM these are drawn. Alright, so we're going to move over to our axis component.

[01:48 - 02:00] First thing we want to do is grab the chart dimensions. Remember in chart we created this used dimensions context that passed down the dimensions of the chart.

[02:01 - 02:14] So we could access them from say our axes. So we're going to go ahead and use that. So our dimensions and then we're going to go ahead and use that used dimensions context.

[02:15 - 02:33] And we're going to have to import this. So let's just log this out to make sure that our context is passing down what we need.

[02:34 - 02:41] Okay, perfect. Close that back up.

[02:42 - 02:57] So for our dimensions we want to create our axis generator. So remember we use d3 axis bottom for the x axis and x is left for the y axis.

[02:58 - 03:07] So we're going to need a way to go from x or y for our dimension to axis bottom or axis left. So usually I'll make a map for this kind of thing.

[03:08 - 03:26] So let's create an axis generators by dimension. And then we'll create an object where x is the axis bottom and y is axis left.

[03:27 - 03:33] Actually let's just put these in quotes. The method needs in quotes so we can call them.

[03:34 - 03:43] And then we're going to create our axis generator generator. And then for this we're going to do something similar that we did for the line component.

[03:44 - 03:55] But just grab this really long variable name and then grab that dimension. So this is going to be either axis bottom or axis left.

[03:56 - 04:01] And then we're going to call it. And then all I need to do is pass in that scale.

[04:02 - 04:15] So it knows how to go from data point to value. Alright, so React gives us something really handy which is it can create references.

[04:16 - 04:31] So we don't have to use document select element by ID or anything like that. If we create a ref to this group element we'll be able to access it within outside of our render component here.

[04:32 - 04:43] And so that we want to use use ref. So I'll usually do this up at the top so const ref equals use ref to create a new ref.

[04:44 - 04:58] And then to label our group element we just want to pass that ref down here. And then up here we want to first make sure that ref exists.

[04:59 - 05:13] Just so this doesn't get called before our g element is rendered because it's not going to exist. And we'll get all kinds of errors here and we can use d3 select, grab that ref.

[05:14 - 05:33] We want to use ref.current because that's the way d3 refs work is they store the node under the current key of the ref. We can transition it and then we'll want to call our axis generator.

[05:34 - 05:54] So this way whenever our access component updates we're going to grab a d3 selection object of that group element. And then create a transition that draws the new axis.

[05:55 - 06:10] So you can see this y axis is updating whenever our data updates to reflect the new values. The other thing we want to do is we can see our x axis is all the way at the top because we're not shifting our axes yet.

[06:11 - 06:22] So what we want to do is transform this group. So it's going to be different whether it's the x dimension or the y dimension.

[06:23 - 06:39] So first we can check if it's x and if it is we'll want to translate by something and if it's not we're not going to need to transform it at all. As we can see our y axis is already in the right place.

[06:40 - 07:00] So here we don't want to move it left or right at all but we do want to shift it all the way down. So we're going to grab our dimensions, our bounded height and then that should scoot our axis all the way down to the bottom of the chart.

[07:01 - 07:09] There we go. So this definitely works. And as you can see we're kind of using similar code that we've used before.

[07:10 - 07:13] We're using D3 selection objects. We're transitioning them.

[07:14 - 07:23] We're calling these axis generators and it's drawing these axes. We could get a little bit fancier and change the number of ticks.

[07:24 - 07:34] They're getting a little bit overwhelmed here. But first in the next lesson we're going to take a step back and talk about another way to do this and the pros and cons.