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

12:52:17 Hi, everybody in this video, we continue to learn about d 3 dot.
12:52:20 Js, to see how you can use d 3 dot Js.
12:52:24 And Sbg groups to your advantage. So just like with any Spg element, d.
12:52:29 3 can be used to append a group. So all you have to do is select the relevant Svg, so in this example, Asvg.
12:52:37 One, and then a G to it. Then afterwards you provide it with an attribute like a class or an id this is useful for ordering a like a class or an id. This is useful for ordering of elements, and so what do I mean by that and spg, elements are drawn on the
12:52:53 Svg. In order in the order that they are applyed with d. 3D.
12:52:57 Js. So, if you were to draw a line like a path and then draw a series of markers, if the path was drawn before the markers the markers would be seen on top, if the markers were drawn before the past the mark the line chart would be seen on top so it can be useful to
12:53:15 place, Svg. Elements within a group to ensure that the elements are drawn in a desired order, so to see what I mean by that, let's look at the HTML.
12:53:25 Code that we've written up for this lecture.
12:53:29 So here I've got my 3 Svgs.
12:53:32 S 3 g. 1, 2, and 3. And here is an example where I start.
12:53:38 Just the default. So I'm just gonna go ahead and add.
12:53:43 The path followed by the Fbg so let's look at what that looks like.
12:53:47 In the code. So this is just the normal route of adding the line, and then the markers.
12:53:55 And then in contrast or by contrast. Here is an example where first I add the markers followed by the line, and we can see what that looks like here.
12:54:05 Okay, so we can clearly see that the line has drawn over the markers because the line was added after the markers.
12:54:14 So, one way we can ensure that what we want on top remains on top is to add them and groups so what does that look like?
12:54:24 Well, in our third Svg. Svg. Dash 3.
12:54:28 The first thing I'm going to do is aend a group that I'm going to call line.
12:54:34 So this group will have the Id line. And why is that important?
12:54:38 Well this by adding the line group first, and then adding the markers.
12:54:44 Group second, this will ensure that whatever is drawn within the line group is always drawn underneath whatever is drawn within the markers group.
12:54:55 So here we can see that when we want to do it this way, instead of selecting the Svg.
12:55:00 You select. For instance, I can draw the markers first by selecting the Markers group using its Id and then appending the circles, and then afterwards, so selecting the line group by using its identity and then appending the path and so if we go down to the svg where that was done we can
12:55:23 set that, even though in the code the circles were appended in the code before the line was appended in the code.
12:55:33 Here the circles are drawn above the line. Why is that?
12:55:37 Because the group that we're holding the circles were drawn and appended to the Svg.
12:55:42 After the group that is holding the line. So you might be thinking, well, this is silly.
12:55:49 Why would I always just draw my things in the correct order in the code?
12:55:54 Sometimes you'll want to make an interactive graphic where the what is drawn changes depending upon input from the user.
12:56:05 So in that case you don't always have control, over which thing is drawn when, unless you add them inside of groups, first AD groups, and then when various functions get called based upon user, input you then add them to the relevant group, so this is something i've done before in blog posts and it
12:56:24 really helps you keep track of making sure that things are drawn in the correct order.
12:56:30 So I think this was just demonstrating the same thing I've done by looking at the code, but it's here for your reference.
12:56:37 Okay. So now you know why groups are useful in particular with ensuring that things are drawn in the correct order on your d.
12:56:46 3 dot j s plots. I hope you enjoyed watching this video, and I hope to see you next time where we learn more about d 3D.