Using .data() to Draw Text

[00:00:00]
>> So in this case, we want to go, and for each group, we don't need to do this whole data binding and enter a pen because there's only one of them. So we're going to simply call append. We're going to append the text element and we're going to put in our title as the text.

[00:00:23]
And so these two lines and we should have, yes, awesome. Okay, so now we have all of our titles rendering. And you can see that we need to also change a little bit of the styling. So let's go ahead and do that. And actually, one of the first things I'm gonna do just to make it look visually a little bit better it truncate, well, truncate.

[00:00:55]
Lodash has a nice function called truncate and so I'm going to say truncate at just 20 letters. And so that will help us with reducing some of the longer titles and the small side note about using SVG text. If this makes no sense to you right now, no worries.

[00:01:24]
I just want to kind of give the small note for if you run into this issue in the future. Which is that with SVG text, it's actually quite hard to get things to wrap, so word wrapping with SVG text is a little bit hard. And so what I've kind of started doing over the years is I kind of put a absolutely positioned div in front of my SVG, and then just use divs to put labels on, let's say each of my flowers or in other cases, if I'm creating other sorts of charts, maybe I'll label each of the dots with a div.

[00:02:10]
So instead of trying to like fight with SVG text on trying to get it wrap into like two or three lines to fit a longer piece of text, I've kind of just started to use HTML divs. Just because divs naturally already have text word wrapping built in, so it's a little bit easier.

[00:02:36]
And so for some of these longer titles, if I was to use HTML divs then it will look a lot better because then I don't have to truncate. But for the sake of this exercise because I wanted to show the sort of nested elements and necessary selections. We're going to use text and we're going to truncate.

[00:03:02]
But from a design standpoint, usually for data visualization, I wouldn't truncate like this, I would have it a wrap with HTML div elements. But let's go ahead and style this. So the first thing I'm gonna do actually, that's a style, font size and we're going to say I'm gonna make it smaller, I'm gonna say 0.7M.

[00:03:36]
And I also want it to get centered. So I'm gonna scroll back and forth a little bit, but right now you can see that this is our 00. This is the center of our flower, but it's not being centered around that, so let's center that and I'm also gonna vertically center with an attribute called DY, so let's do that.

[00:04:07]
We're gonna call text anchor, middle, and the outer dy 0.35m. I actually never looked into why it was 0.35m, but it just magically centers, like vertically centers, the text on whatever x, y position we have. So yeah, I don't know why it's 0.35, but just kind of a standard that I picked up.

[00:04:38]
So now with this we should have everything, I think the one little thing that I'm missing is, I think I might have set the font style to italic. And actually, now that I take a look at it, maybe truncating at 20 characters is still a little bit too long.

[00:05:01]
So I'm just gonna go back and truncate it to 18. And I'm gonna style, font style. Italic. And that should do it. So yeah, I'm still a little bit big actually the look of it, how about 0.7? I'm not sure why this is overlapping still but you can probably go back and forth yourself to try a different font sizes or trying different truncations to make the titles work.

[00:05:44]
But we just created our flowers together, which is really exciting. And the reason why I put the scale, the transform scale on the panels instead of the group is, and you might be able to guess that if I had put it on the groups then not only would the petals be scaled, but our text titles will be scaled also.

[00:06:15]
And that is kind of like an aesthetic choice of, yeah, so you can see, it gets scaled along with it, so it's much smaller than previously. And that is very much kind of an aesthetic or design decision of whether you want to put the scale on the group or on the path.

[00:06:39]
And when you're using groups, I think you'll be making a lot of these tiny little aesthetic decisions. But I wanted to make a new I decided to, after seeing that, I decided to put it on the pedals for readability. Yeah, so these are our flowers.