Group Elements Practice

[00:00:00]
>> And then finally, very exciting. We have all the groups and paths, and tags, that we need. So let's go ahead and set the attributes and styles on them, so that they'll render the way that we want. And so these are almost the same attributes and styles that we set previously, and this is what it ends up looking like.

[00:00:29]
And just for an actual little bit of repetition and retention, I was thinking that we can go ahead and code all of that together, what we just ran through together, to bring all of that code together into one place. So, let's get going. So, we will have, The same as before where we have an SVG with the width and height.

[00:01:07]
So let us first create our parent group elements const g = d3.select the parent (svg). And then we're going to select all of the groups in the svg that do not yet exist. And we're going to pass in our flowers, data, Which is an array of objects with all of our scales and rotate or scales and translates.

[00:01:47]
And then we're gonna say enter.append('group'). And if we do that, we don't see anything yet because group elements don't render anything to the screen. But if we inspect element, if I open up the chrome inspector, ooh, that always it's okay, lost a place a little bit there but, okay, so let's inspect that element again.

[00:02:14]
And then we can see all of these group elements, have been inserted or created in the DOM and there's 135 of them. So now, let's go ahead and let's create our pedal paths. And in a small side note about SVG is, just like with HTML elements, the order in which you create and insert the elements into DOM dictates the order in which they'll get rendered.

[00:03:01]
And so, in the examples, or in the explanation I gave earlier, I explained the text element first just because conceptually it was easier to grok. But in actual practice what we want to do, is we want to create our paths first because we want our petals to get rendered first, so that our text can lie on top of it and we can see the titles for our movies.

[00:03:30]
So, let's get going with that. And so we actually can just say, within the selection of our 135 group elements, we want to select all of the paths that don't yet exist. We're going to figure out what the data should be for each of those groups, each of those movies.

[00:03:57]
And so we are passed in the movie data from our parent group element, and we want to return _times(). The number of petals for that particular group or movie. And then we want to create a new object with the same apparent data. We're creating this new object so that our children are new kind of individual children datum objects, sorry, our individual children data don't mutate the parent data because they shouldn't mix, this shouldn't affect the parent.

[00:04:42]
And so we're going to create a new object copy over our parent data with all of our movie information, or sorry flower information, and we're going to also calculate the rotation for each of the paths. And then another small new about SVG rotate which is that it uses degrees, and so that's why I am dividing it 360 divide by the number of petal paths.

[00:05:21]
If I remember correctly in Vanilla JavaScript, with a lot of the math functions like cosine and sine and all that and we pass in radians, so two pie, and that always confuses me and in the switch. So just remember with SVG, with rotate, we pass in degrees, SVG, degrees.

[00:05:46]
And so now [COUGH] we have the data bound, and we're going to do .enter and append on that data. And so with this piece of code, we should be able to inspect element and see, That, Within each group element, we have the correct number of paths. Perfect, and if we were to say select one of these paths and we wanted to see the properties on them, then we'll see the data that's been bound with the newly calculated rotation in degrees.

[00:06:49]
So let's use that piece of information, and the first thing we want to do is, we want to do SVG transform. And we want to take the data that we have, on each of these petals, so right now we're operating on each of these petal paths. And so for each of them, what we want to do is first, we want to be able to rotate them to the right, whatever we calculated, and so let's say rotate($(d.rotate)).

[00:07:33]
And then we also want to be able to scale them. So now if we take a look, wait, no, we haven't bounded the data yet, or the d attribute yet. So now, let's go ahead and bind our d attribute, which is in d.path, and we see all of these up here, and the reason why they're all up here is because we need to set .attr('transform' translate on our group elements.

[00:08:16]
And so let's go ahead and do that, let's see 'translate($ and then we're going to use the position array that we calculated previously. And was in not called position, transform translate. Okay, so that's not happening, so let's debug this together. So we have the rotations and and ooh, undefined so I don't think I called it position so, let me see.

[00:08:59]
Okay, let me see our flowers array, And what do we call it? We call it translate, okay. [LAUGH] All right so, D.translate, Here, awesome. So we've now translated all of our paths, and so we have our flower shapes. And, you can see that we still need to set the color, and their other shows and the opacity.

[00:09:36]
But I just wanna take a small moment to celebrate the flowers on the screen. And wait okay, I'm gonna go back and do something really quickly, which is that we need to use VJ's. Let's see, so we need to use VJ's path, and so we're going to, Use that.

[00:10:12]
Okay, so now that we've done that, pardon me as I refresh this, Look at how cool that our shape looks. So that's the petal path that VJ gave us, And so, that's so exciting. Okay so, and I hope at this point that you're seeing your own petal paths in there too.

[00:10:47]
Yeah, let's go ahead and set some of our styles, so let's go ahead and fill it by the color that we previously calculated. We're going to also stroke it by the color that we calculated, and let's give it a lower fill-opacity of 0.5. And let's give it a slightly thicker stroke, and let's have that be I think we said 2 pixels.

[00:11:26]
And there we go, look at that. Yeah, there's like a little bit of an inside detail with what VJ gave us, for these petals, right here.