Render a Y Axis for a Bar Chart with D3 and React

Andy Van Slaars: [0:00] I've added a new leftAxis component to this project. I've imported into chart. Then down in charts render, I'm rendering out leftAxis passing it margins and yScale as props. leftAxis is just an empty group right now.

[0:14] Let's use our props and populate this to show some labels down the left side of our chart. I'll start by destructuring props to grab margins in yScale. Inside the group, I'm going to add a temporary rectangle just so we can see where this axis will sit.

[0:37] Create a rect. We'll give this a fill of light blue. We're going to give this a width, and this width is going to be based on our margins. We'll make it as wide as our left margin. Then we'll hard-code a height for now, 295. We'll save that.

[0:56] We'll see that we have a blue rectangle that's sitting to the left, but it's a little bit too high. To fix that, we're going to go into our group, and we're going to give it a transform. This transform is going to get a translate. We're going to leave the x at , and then we're going to use margins.top to set our y transform. We'll save that and we'll see that our blue rectangle is exactly where we want this left axis to sit.

[1:22] Under our rectangle, let's add a loop so that we can learn our labels from our yScale. I'm going to access the yScale and then I'm going to get the domain values from that scale.

[1:34] Because this is a band scale, our domain is a discrete list of values. In this case, it's east, west, north, and south. We're going to map over those. For each one of these bands, we're going to render out our label. Add a text element for each one of these. We'll give it a key, and our key is just going to be our band value. Our text is also going to be our band value.

[1:59] I'm going to save this, and we should see that we get a jumble of values up here. What we need to do is apply transforms to each of these to space them out.

[2:07] In my opening text, I'm going to add a transform. This is also going to get a translate. I am not going to translate the x, so I'll leave that at . Then we'll translate our y based on applying our yScale to our band value.

[2:26] We can save that, and we'll see that our labels are now spaced out. They're not exactly right, but they're each aligning up at the top of their individual band. Let's update our y transform to center those on the band.

[2:37] What we're going to do is take our yScale applied to our band, and then we're going to add half the bandwidth. This will be yScale.bandwidth. Then we'll just divide that by 2 and we can save that. We'll see that our labels have been pushed down and they're just about centered with their elements.

[2:56] The next thing we want to do is in this same text element, is we want to set the dominant baseline and we want to set that to middle. When we save this, we'll see a slight shift. Now they're actually centered. Then I'm just going to style these a little bit with a font weight. I'm going to set that to bold. Now our items are labeled.

[3:16] It's a little tough to tell where one item stops and the next one starts. Let's go into our chart component where we define our yScale. We're going to add one more method call to our yScale.

[3:28] We're going to come down here. We're going to add padding. We're going to add padding value of .1, and we'll save that. We'll see that everything is recalculated. Our label stays centered and now there's some space between our bars.

[3:40] We could change this value if we wanted to. If we go up, we'll get very skinny bars. Going to drop it down because I just want a little bit of space in between each bar.