Adding Labels

[00:00 - 00:16] Alright, so there's one thing missing from our bins. So if we look at our completed example, they have these count numbers on top of each of the rectangles. So let's go ahead and add those. Oh, and the reason these are important is imagine you had a y-axis over here.

[00:17 - 00:33] These values are going to be pretty far away from the bins over here. So sometimes it's just nice to put the numbers on top of each of the elements, especially if there are so few. So let's call these bar text.

[00:34 - 00:44] And then we're going to add these to each of our bin groups. And one thing that's good to do here is say one of these buckets didn't have any values.

[00:45 - 00:52] We don't necessarily need to put a zero on top of that non-existent rectangle. We can just not put any text there at all.

[00:53 - 01:15] So these d3 selection objects have a method called filter. And basically if we put a function in here that will take a data point and return something truthy or falsey, depending on whether we want that to be filtered out of this set of elements.

[01:16 - 01:36] So this is going to look something like if there are any elements within this bucket, return any number other than zero. And if there aren't return zero or false or null or undefined.

[01:37 - 01:56] So this is actually going to look just like our y-accessor function because that's going to return the length of items within that bucket. So for each of these items where there are any items, let's append a text element.

[01:57 - 02:10] And let's go ahead and add the text for this. This is also going to be our y-accessor because we're just returning the number of items within that array.

[02:11 - 02:34] And if we look up at the top, our y-accessor is looking at the length of items within this bin. And if you wanted to format this text a little bit differently, say you had numbers up in the thousands, you'd probably want to expand on this and do some formatting in here and pass that data point to your y-accessor.

[02:35 - 02:39] But for now we can get away with just using our y-accessor. So we need to position this.

[02:40 - 02:57] So our text elements, if you remember, take a y and an x-attribute for positioning. So let's go ahead and tell it what our x-attribute should be.

[02:58 - 03:16] So this is going to look very similar actually to how we're positioning our rectangle. But if we look at here, we want this to be halfway in between the left side and the right side of this bar.

[03:17 - 03:50] So in order to get the middle of that bar, we're going to have to take the left side and add half of the width of that bar. So that's going to look like using our x-scale on the left side, the left bound , and then adding in parentheses, we're going to add the scaled...

[03:51 - 04:06] We're going to do the right side minus the left side, and then we're going to divide this by 2. So this is the left side plus the width of the bar divided by 2.

[04:07 - 04:15] And we can see these are spaced right over those bars. There's a little bit of an alignment issue, but we'll fix that in a minute.

[04:16 - 04:29] And then to scootch them down onto the top of those bars, let's set that y-ass ribute. And then taking that data point, we're just going to do something very similar that we did for the bars.

[04:30 - 04:50] We're going to use our y-scale, pass our accessory function, and then we're just going to bump them up a little bit so that they're not sitting right on top of those bars. So these are looking a little bit weird. They're off to the right.

[04:51 - 05:05] So if you can tell, the left side of this text is lined up exactly to the middle of this bar. So we need to set the text anchor for each of these elements, and text anchor for SVG.

[05:06 - 05:22] Text elements is a lot like text-to-line for normal HTML elements. So this is just setting what part of the text horizontally.

[05:23 - 05:31] So we want to line up to this x value. So this is going to be a CSS style, so we'll need to use this style method.

[05:32 - 05:39] No, no, filter style. And this is going to look like text anchor.

[05:40 - 05:45] And this is going to the middle. And it's middle, not center, which I always find confusing.

[05:46 - 06:01] So now if we look at it, we can see that the center of the text is lined up to the center of this bar, which is exactly what we're going for. And then we're just going to do a few stylistic changes. So this text is a little bit harsh. It's sealing a little bit of the attention.

[06:02 - 06:18] So let's dim it, maybe make it a dark gray. So it's not center stage. Let's also kind of bump the font size down a little bit.

[06:19 - 06:42] Let's put it at, let's say, 12 pixels. And let's also switch it to a serif font or a sans serif font, because I feel like the serifs at this small size kind of detract from the readability. So font family, this is the same as for HTML.

[06:43 - 06:57] I'm just going to set it to a sans serif. You can set it to a specific font if And you know what? That gray is actually really light for me. I doubt that's very accessible for people with lower vision.

[06:58 - 07:10] So let's just use a hex code. Let's do 666. Where it's still readable, but not taking center stage.