Draw peripherals

[00:00 - 00:11] Okay, so we made it to our last step for our histogram, and this last step is to draw those peripheral elements. And I know we usually only draw an x-axis and a y-axis.

[00:12 - 00:33] I thought it'd be kind of fun and test out what we've learned so far to also draw a mean line for the histogram. So if we look at our histogram, this is going to be a line, a vertical line, a straight vertical line, wherever the average value is on our histogram.

[00:34 - 00:51] And usually when you want to calculate a mean, you would map through all of the items in the dataset, find that x-value. So let's look at this here.

[00:52 - 01:05] These are all of those humidity values, there's 365, because that's how big our dataset is. We want to find the average by adding them all up and dividing by the number of values.

[01:06 - 01:35] Instead, we get to take advantage of the d3.mean method, which, like a lot of the methods we've used before, is an array of values of data points, and the second parameter is an accessor function. So what d3 mean is going to do is go through our dataset, for each point, it's going to pull out that humidity value, and then it's going to do the calculation of summing them up, dividing by the number to find the average.

[01:36 - 01:44] So if we're logging this out, we can see that our average humidity value is . 695.

[01:45 - 01:53] Alright, so where do we go from here? Let's actually use an SVG element that we haven't used before.

[01:54 - 02:03] It comes in handy every now and then, and that is the line element. And we can see on our cheat sheet that it takes four attributes.

[02:04 - 02:13] It basically goes from x1, y1 to x2, y2. So those four attributes are x1, x2, y1, and y2.

[02:14 - 02:40] So let's go ahead and create a mean line, and append it, create a new one, append it to our bounds group element, and that's going to be a line element. And let's, before we forget, just set the x1, x2, y1, and y2.

[02:41 - 03:00] We're just setting ourselves up to fill these in. And we're actually not going to see anything, even if this is going from 0, 0 to 0, 100, and that is because SVG shapes by default have a fill of black and a transparent stroke.

[03:01 - 03:09] So let's go ahead and set that stroke to a color. And maroon is going to be a nice color.

[03:10 - 03:15] And the reason you're not seeing any fill is the line is two-dimensional. So there's nothing to fill in, right?

[03:16 - 03:25] It's just going to be a line from one point to another point. So here we can see our line going from 0, 0 to 0, 100.

[03:26 - 03:46] And we want this to scoot over to sit wherever our mean humanity value is on our x-axis. So in order to convert this humanity value to a pixel value, we want to use our x-scale and pass it that mean value.

[03:47 - 04:02] So you can see the top of it has scootched over to sit where that mean is. And then let's just copy this because we want the bottom of the line to sit horizontally in the same place.

[04:03 - 04:17] Now for our y1, let's actually just scootch it up about 15 pixels, so it's sitting above the top of our chart, above all of our bars. And then for y2, let's move it all the way down to the bottom of our bounds.

[04:18 - 04:27] So we're going to move it down by the bounded height. There we go. So now we can see our mean line.

[04:28 - 04:37] And having a solid line is a little bit distracting. And then I think a dash line would help clarify.

[04:38 - 04:56] This is an annotation, make it a little bit more clear and have it be a little bit visually less important. So in order to do that, we have this stroke dash array.

[04:57 - 05:01] There you go. Stroke dash array CSS property.

[05:02 - 05:20] And what the dash array does is it alternates between whatever the stroke color is and transparent so that you get kind of a dash line where you have color and not color alternating. And here we're going to add two numbers.

[05:21 - 05:42] So if we do 20 pixels and 10 pixels, that's going to alternate between 20 pixels of maroon and 10 pixels of transparent. And it's not showing up because I can't spell.

[05:43 - 05:49] So there we go. We can see 20 pixels of this color and 10 pixels of clear space.

[05:50 - 06:01] And the fact that I'm going for is a little bit more dense than that. So let's do two pixels and four pixels.

[06:02 - 06:12] There's more transparent than there is color, but it's still there. And you can see where it goes all the way through the line.

[06:13 - 06:17] All right. So next up, let's make it even more clear that we're showing the mean right now .

[06:18 - 06:23] We just have a line in the middle of our chart. So in order to add text, we use a text element.

[06:24 - 06:41] So let's add mean label and append a text element. And then text, if we look at our cheat sheet again, is going to use an X and the Y attribute in order to position it.

[06:42 - 06:49] The X is going to be the same place as our line. We want it to be centered right above our line.

[06:50 - 06:57] And it's X and X1. And then for the Y, we want it to be just above our line.

[06:58 - 07:03] So our line is going up 15 pixels. Let's make this go up 20 pixels.

[07:04 - 07:12] Let's just give it text value so you can see it. Let's just have it say mean.

[07:13 - 07:28] And something you might notice, it's kind of looking like a flagpole right now. And that is because for text SVG elements, they're by default anchored on the left side of the label.

[07:29 - 07:38] So we have this X and Y point is right here. But the anchor for our text is all around the left side.

[07:39 - 08:02] And if we want to change this, it's actually pretty easy. There's a text anchor CSS style CSS property that's, if you're a developer, similar to text align, which is going to horizontally decide how that text is aligned with , you know, what's around it or what the point is.

[08:03 - 08:09] But with SVG text, it's a text anchor. Just a syntactic difference.

[08:10 - 08:22] And then if we choose and we're going to write align the text. So the point is in the same place, but our text is now aligned to it on its right side.

[08:23 - 08:38] But what we really want is the center, which isn't centered, but it is middle. So this is something I end up using a lot where you want text to be centered with a line or with a specific spot.

[08:39 - 08:47] Good thing to know. And then let's see that serif font is bugging me a little bit.

[08:48 - 08:57] So let's switch that to a sans serif. So font family sans serif.

[08:58 - 09:08] Let's change it to the same color. So change the fill to that maroon color.

[09:09 - 09:21] And then the other thing I want to do here is a little bit big. So let's change the font size to those two pixels.

[09:22 - 09:27] All right. So now we have a line.

[09:28 - 09:35] Just fix our alignment. We have a line going all the way down our histogram where that mean value is.

[09:36 - 09:49] And this can be really useful for histograms. Say if you want to know if they're scooing right or left or if they're kind of like a normal shape, a bell curve, and the mean goes right down the middle.

[09:50 - 10:04] It's just another piece of information to learn about the distribution of points that you're looking at. And usually we'll end up this peripheral drawing step by adding an x axis and a y axis.

[10:05 - 10:16] But we're in left this time because we have the count values over each of our bars so we don't necessarily need a y axis here. Just because each of our points is labeled.

[10:17 - 10:21] But we do need an x axis. So let's create that x axis generator.

[10:22 - 10:29] And that's just going to be d3.axis bottom. We want to pass it the scale.

[10:30 - 10:34] So let's do our x scale. And then let's use it.

[10:35 - 10:48] So we'll create our x axis by appending a group element to our bounds. Calling our x axis generator.

[10:49 - 11:06] So that it can take that group element and draw all of these labels and all of these tick marks. And as usual, it just draws at the top left of our chart and we'll need to sc ootch it all the way down to the bottom.

[11:07 - 11:16] So we're going to do style transform translate and only that y. We only want to shift it in the y axis.

[11:17 - 11:28] So let's shift it down by the height of our bounds. And we'll have to set the unit because we're setting a CSS style.

[11:29 - 11:31] So there we go. There's our x axis.

[11:32 - 11:39] One other thing that would be nice here is a label. We don't really say humidity anywhere, although we're looking at humidity values.

[11:40 - 11:49] So let's create an x axis label and actually add it to our x axis. So x axis append.

[11:50 - 11:55] This is a text element. And then let's just set the text.

[11:56 - 11:59] It's going to be humidity. So we can see where it is.

[12:00 - 12:20] And the other thing about appending to d3 axis is I think it sets the fill value to transparent. So we actually aren't going to see anything until we set the fill to black.

[12:21 - 12:22] Let's just have it be black. So there we go.

[12:23 - 12:36] There's our text. That's just something that's good to remember is if you're adding something to a group that you're calling a d3 axis on, it will set the fill value to transparent.

[12:37 - 12:45] So you're not going to see it until you change the fill or the stroke. That's definitely something that has tripped me up in the past.

[12:46 - 12:48] All right. So let's position this.

[12:49 - 12:59] We want this to be halfway across our chart and kind of underneath our axis. So we want to grab our bounded width and divide that by two.

[13:00 - 13:05] So halfway across. And then let's just scoot it down.

[13:06 - 13:18] Let's bring it all the way down to the bottom of the chart and then scoot it up a little bit. So we're going to do dimensions.margin.bottom.

[13:19 - 13:25] And then subtract 10. It's just sitting a little bit above the bottom of our chart.

[13:26 - 13:34] And then the last thing I want to do here is bump up the font size because it's looking a little bit small here. So font size.

[13:35 - 13:46] Let's make that about 1.4.em. And as a good unit to know, it's relative based on the font size of its parent.

[13:47 - 14:10] So if we have font size 1.48.em on say the x-axis, that's going to bump this up even more. So if this is in another element with a larger font size, this 1.48.em is going to be relative to that larger or smaller font size.

[14:11 - 14:18] Just keeps things a little bit more proportional. And that is it actually. So now we have our histogram.

[14:19 - 14:27] We have this mean line and we've labeled our x-axis as humidity just so we know what we're looking at.