d3.js Text, Titles, and Labels Video Lecture Transcript
This transcript was automatically generated by Zoom, so there may be discrepancies between the video and the text.

11:27:52 Hi! Everybody! Welcome back in this video we'll talk about how you can add text titles and labels to your D 3 dot.
11:27:59 Js plots, so adding text is very simple on D.
11:28:04 3 dot js. In terms of you do the same thing for both text annotations, titles as well as access labels, and if you have legends that you'd like to add text in the legends.
11:28:14 So all these can be added just by appending an Svg text element.
11:28:19 So, all you have to do to add this is to provide the position text anchor with the X and Y attributes as well as the text that you want it to say so for access labels. You need to include it.
11:28:36 Can be useful to include. You don't need to, but it can be useful to include the text anchor.
11:28:41 This specifies the anchor of the text, so like the positioning of like your X and Y, specifies the anchor so if you would like your tex anchors to be at the start, the middle or the end of the word, you can set that as an attribute or a style so for access labels.
11:28:59 For example, it's typical to set the tank text anchor to middle.
11:29:02 You can also feed in a rotate into the transform attribute to rotate the text around the anchor.
11:29:09 So for instance, to make a vertical axis, title, or label, you might put a rotate of 90 degrees after setting the text ankor to middle.
11:29:21 Again a note on padding. So because the text, in order for the text to be seen, it has to fit on your Essvg, it may be necessary for you to increase the padding of your plot in order to leave enough space for titles and access labels so with all that being said I think
11:29:36 it's useful to look at some examples. So let's open this up in visual studio, and then we'll look at it in our firefight, or whatever browser you're using or whatever browser you're using. So here.
11:29:49 I've set ed just another quick note. My Svg.
11:29:51 Is, a little bit larger than the past examples, because we are going to have an access with text.
11:29:56 And I've also added an additional padding around the outside of the plot area.
11:30:01 So here I'm just adding my Svgs, which we've seen done before.
11:30:05 And then we'll show you about a pending text.
11:30:09 So the first is just if we want to append some annotations onto our plot, we just do that manually.
11:30:15 So we'll select the desired Svg.
11:30:18 Which is Svg. One. We append our text and then set all the desired attributes, so the font size, the Xy position of the anchor, which I believe by default, is the starting of the text, and then, the whatever you want the text to say, so for us it's here we
11:30:34 have a pendant, some text to the Svg.
11:30:35 So let's go ahead and open this up. Just so we can see that example.
11:30:40 Okay. So here's my appended text. Here we have appended some text to the Spg.
11:30:47 Now let's talk about some labels.
11:30:50 So here I make my X scale on my wife scale. I make my axes and then append them.
11:30:57 And now I add the line plot that we've seen in a previous video.
11:31:02 So let's talk about adding some axis labels that's going to be these 2 highlighted labels right here.
11:31:08 The first is the vertical axis label, so I select the Svg.
11:31:13 Which for this is the second one, I append my text.
11:31:17 I then set my transfer, so that because this is a vertical axis, I'm gonna rotate it in this case. Negative 90.
11:31:26 Degrees would make your. So that because this is a vertical axis, I'm gonna rotate it. In this case.
11:31:28 Negative 90. So I believe 90 degrees would make your words sort of go from the bottom is the left, and the top would be the right and so it's more typical to have the bottom be the right hand side, and the top of the left hand, side, so that's why.
11:31:39 It's negative 90. I'm going to set my text anchor to be the middle, because it's an access label, and then I go ahead and I set my X and Y position here and then sort of just provide the text and the font size as well, for my
11:31:57 horizontal axis label. I select the Svg.
11:32:01 I append to text. I don't have to transform this one, because the text by default will read from left to right so I just have to set the attributes X and Y text anchor font size.
11:32:12 And then what I want the text to read, and then finally, we have to have an example of putting a title on our plot.
11:32:20 So we select the Svg. And you again. We just depend our text.
11:32:24 We set all of our desired attributes, like X. Y.
11:32:28 Font size and text anchor, and then provide the text of the label.
11:32:33 So if we go and look at this example, here's what that looks like.
11:32:35 So we have a title up top a vertical axis label called Y, a horizontal axis label called X, so that's how that works, you know, once again, if you wanted to save some typing, like, if you have a certain format you want your access labels, to be you could provide
11:32:54 them with a class, and then set the style up here in a style or style elements I didn't do that, but you could do that if you'd like to save yourself a little bit of typing as well, especially if you're going to be making a lot of charts in your in
11:33:09 your web. Page. Okay? So that's it for this video.
11:33:13 You now know how to annotate your plots with text, add X-axis and y-axis labels as well as titles.