Adding an SVG element

[00:00 - 00:11] So now let's start changing our web page. So if we go to our JavaScript code, we have this wrapper d3 selection object that we can now manipulate.

[00:12 - 00:26] So let's create a new variable SVG and then grab our wrapper object and append a new element. And append is going to take the name of the element.

[00:27 - 00:34] So if you wanted to create a div, you would write div, but we want an SVG element. So let's add SVG as a string.

[00:35 - 00:40] And then let's actually log that out. And this looks very similar.

[00:41 - 00:47] You can see that append is returning this new element. So if we open up groups, there is that SVG element.

[00:48 - 01:06] And the code's inbox console simulator doesn't do this. But one thing I like about the Chrome DevTools is when you log out an element on the page to the console, if we open this up, this is the same thing as over here.

[01:07 - 01:22] But when we open up this object and we hover that SVG element, it will highlight where it is on the page and show you how big it is. So we can see that our new SVG element is 300 pixels wide by about 150 pixels tall.

[01:23 - 01:29] And this is the default, at least in Chrome. It might vary from browser to browser.

[01:30 - 01:34] But that's not how big we want our chart to be. So let's update that.

[01:35 - 01:55] So this SVG element, the D3 selection object also has a method called ATTR, which stands for attribute. And this will help us update or replace an attribute of our target element.

[01:56 - 02:11] So let's update the width and send in dimensions.width. And let's also change the height since we have that and send in dimensions.

[02:12 - 02:33] height. So now, once we log out that SVG and we reopen our DevTools, once we hover it, we'll be able to see that it's updated to match the height and width within our dimensions. So if we open this up and hover this SVG, it is too big to even look at.

[02:34 - 02:39] Oh my goodness. We can't see it.

[02:40 - 02:58] If we were to see that size, the dimensions and the tool tip down there, it would hopefully be whatever the width is and then 400 pixels tall. And we can see it's a much different size than it was before.

[02:59 - 03:15] Another thing we can do here is we're not really going to be doing anything with this SVG element. So let's go ahead and take this out and just use this wrapper variable.

[03:16 - 03:44] Since the SVG is essentially our entire wrapper container because it's the dimensions of our wrapper. And another thing to note here is this is kind of the classical way to use C3 is you'll often see that there are two spaces before anything that creates new element and then for spaces before any method that updates that element.

[03:45 - 04:08] So something like attribute will be updating the element so it'll be intented a little bit further and this just helps clean up the code and make it a little bit more scanable. And the other thing I want you to notice here is that we, one of the beauties of D3 is that you can chain these methods.

[04:09 - 04:26] So instead of having to write wrapper.attribute and wrapper.attribute for multiple lines, you'll be able to just take out that variable name and chain any methods that you want to do to that same element. Just keeps your code a little bit cleaner.