Creating our bounding box

[00:00 - 00:10] All right, so we have our wrapper element in place ready to go. And now if we look at our diagram again, we'll see that we also have this bounds container.

[00:11 - 00:23] So let's get that set and in place before we get further into this chart code. So let's create a new element called bounds.

[00:24 - 00:31] And we're going to just append it to the wrapper. So append and then append just takes the name of the element we want to add.

[00:32 - 00:44] And one thing to note here is that within an SVG element, everything inside of that has to be an SVG element. And this is a parallel but different worlds to HTML elements.

[00:45 - 00:56] So in a web page, you're probably most familiar with divs and spans and buttons . And none of those will show up if you put them within an SVG element.

[00:57 - 01:03] SVG elements have a different set of elements. And we'll talk about them one by one.

[01:04 - 01:13] The first one we're going to talk about is the group element. And this index for that is just the letter G. So instead of div, you have the letter G.

[01:14 - 01:25] And the group element is kind of like the div element for SVG. It's basically just a way to organize your code and move things around in a group.

[01:26 - 01:40] So our bounds are going to be a G element. And then if we look at the diagram again, we'll see that our bounds are shifted from the top left corner because in SVG, everything starts from the top left corner.

[01:41 - 01:50] They're shifted down into the right. So to do this, we can add a style.

[01:51 - 02:12] So D3 selection objects also have a style method that's very similar to the attribute method that we used up here. The only difference is that instead of creating an attribute on the element, we are creating an SVG CSS style on that element.

[02:13 - 02:23] So we're going to add this CSS style of transform. And then we're going to just translate it.

[02:24 - 02:31] Transform takes a few different keywords. Translate, scale, rotate, skew, just a few of them.

[02:32 - 02:45] That translate is just going to shift our element. And the first item for a translate is going to be the number of pixels that it needs to move to the right.

[02:46 - 02:57] You could also have a negative number to move it to the left. But to move to the right, we're just going to find our dimensions, margins.left .

[02:58 - 03:06] We can see we're shifting our bounds over by that left margin. And then we're going to add pixels because it's in pixels.

[03:07 - 03:15] And then we're going to add the shifted down from the top. So that's going to be dimensions. margins.top.

[03:16 - 03:28] And again, we're using pixels. If this syntax is unfamiliar to, it's just a template literal that was introduced to ES6.

[03:29 - 03:41] We're using back ticks to start and end the string. And then anything after dollar sign and inside curly braces is going to be a JavaScript expression.

[03:42 - 03:53] So we can pass in JavaScript variables. And this will compile into a string with just translate and those two values.

[03:54 - 04:22] So if we log this out console log bounds, and then we again open up our native dev tools console because it has that highlight that we like so much. And we grab this g element, we can see that it's shifted a little bit from the top left.

[04:23 - 04:32] We can also see that it's zero pixels by zero pixels. And this is okay because the g element is going to expand to fit anything inside of it.

[04:33 - 04:39] There's no way to specify the actual size. It's just kind of this container around its contents.