What Are Group Elements

[00:00:00]
>> Previously, we covered drawing a pedal for each movie. And then we learned how to apply deep rescales to map our raw data, into our visual channels. And this is what we ended up with, with all of these different pedals, with the right colours, at the size, with the right shape, the right path shape.

[00:00:26]
And at the end of the last lesson, and we also talked about scales for SVG transform. And how that also changes a whole coordinate system, when you apply a scale. As well as an extremely important note about, if you end up chaining transforms. So if you end up chaining translate and scale, to be really careful about the order in which you chain.

[00:01:00]
Because depending on which one you prefer first, the coordinate system will actually end up looking different. And I've had many bugs, also because of this much confusion. And the general rule of thumb that I've learned through all of that confusion, is to put the translate first and the scale second.

[00:01:25]
And that usually leads to the results that I'm looking for. So next, I want us to cover how to turn each of those petals into flowers for each movie. So this is, I mean this is quite exciting. So, let's do this. And so to do that to be able to turn each petal, which is a path into flowers.

[00:01:54]
What we're going to have to do, is to make our paths first into this g element. And the SVG g element stands for group, and it helps us group all of the children elements together. So that we can manipulate its attributes all together. So if you're familiar with Adobe Illustrator, this is if you put all of your path and other shape elements into a group in Adobe Illustrator.

[00:02:29]
And move it around or scale it or rotate it together. So with a flower, the new kind of SVG elements that we need to create for each flower looks like this. So, it's got that group element and we'll use that group element, to move all of the children together.

[00:02:53]
To position in the right place for the grid, or right place in the grid. And we'll have a number of path elements, and each of these path elements will be drawing one of the petals. And the number of petals for each flower depends on the movies data. It depends on the number of votes, MDV votes for the movies and that we calculated in the previous lesson for scales.

[00:03:25]
And we calculated the number of petals for each movie. And then finally, we want to just add a text element where we can put in the title for each movie. And just a note that group elements, g elements don't render anything. And so yeah, let's use D3 to build these flowers.

[00:03:55]
So this is what the first part will look like. And so we want to very similar to what we did with the paths, we want to select all of the group elements in our SVG. And we are going to bind our flowers dataset, the flowers data that we calculated in the previous lesson.

[00:04:20]
And we're going to bind that flowers array, to our selection of group elements. We're going to enter and append those group elements and what will happen is, we're going to get 135 of these group elements. Because if you have 135 movies, and each of those g elements will have the movie data, the individual movie data bound to them.

[00:04:50]
And we'll just put that selection of 135 group elements, into this variable that we'll call g, for simplicity. And if we're to take a look at what that D3 selection looks like, it looks like this. And so indeed we have an array of 135 group elements. And if we open it up, each of them has the data, movie data that we bound to it.

[00:05:28]
So the next step we want to take, is we want to create a text with our title for each of these groups. And so the line we want, is we want to take that group that D3 selection of groups, the g, we say append text. So create a text element for each of those, and set the text to the title, so that's what's happening here.

[00:05:53]
And visually, this is what it looks like for each of these groups. And we've created a text element and the important thing to note with D3 is, whatever data that was bound on the parent element. When you create a child element within that, the child element inherits that exact same data that's been bound on the parent.

[00:06:19]
So this is what's happening here. And the text element inherits the movie data for that group. And because of that, we can In this case, with this group, the data says that the title is minions. And that's why we can say, get the title from the bound data and then we'll render minions, or a rule render inception.

[00:06:44]
And so that's how kind of that data binding, an inheritance is working. So if we want to take a look at what the D3 selection looks like for the text elements, this is what it looks like. So interesting which is in news that the parents are estimating, sorry.

[00:07:07]
It has the array of SVG text elements, with the same data as the parent group elements bound to them