Basics of SVG

Ben Clinkinbeard: We now have a column chart that will scale our bars based on a multiplier that we give it but, as you can see, it actually scales from the top which is not exactly a behavior that you're commonly going to want. And so, to fix that we're going to go ahead and convert this to an SVG chart which will make a couple of things a lot easier.

Actually, we're going to do this. Let's say we're going to build our chart inside of this chart area, which this gray shape will just make it a little bit easier to see what's going on and where it's scaling from. You'll notice that all I had to do to change where our chart is built is to tell it to use the chart area ID.

D3 uses CSS 3 selectors in all of its select statements so anything that's valid there will work for you.

Actually, I'm also going to pull out the root SVG element into its own variable. We'll say "Select that DIV and then append in SVG." Go ahead and fill that back in there. We want to go ahead and give our SVG element a width and a height as well so we'll say, "Attribute width is 400," and "Attribute height is 300." That matches the size of this gray box we have here.

You'll notice when using SVG you don't need to give pixel units. You don't need to attach the PX because that's a given in SVG.

We still don't have anything on our chart. That is because we need to change this part of our chart. We're no longer going to be using DIVs but SVG rect elements. We'll place both of our DIVs at that. We can still use our class here but our height is no longer a style. It's just an attribute.

As I mentioned before, there's no need for pixels so if we did that we're now going to have to give it a width because SVG elements cannot get their width from CSS.

You can now see we do have a bar on there but it's not exactly positioned correctly. Let's do this. Let's give it an X position. We're going to want to spread those over the size of our area, obviously. We'll say, "Return D times 20." That's what we picked as the width of our chart.

Actually, we don't...This is a good example. We actually don't want to multiply the data element by 20. We want to multiply its index. And so, if you supply a second parameter to any of these functions that are in the attribute calls the second parameter, which generally uses I, is going to be the count or the position in the data set. The first one will be zero, then one, and on and on.

We've now set up X and you can see they are appropriately staggered. If we set the Y we can actually affect where they're placed. So Y of 20, that's not what we want. But if we do a Y of zero you can see that they're still staggered but they're not positioned correctly. Let's actually add a little bit of padding here so "Plus two." What am I not doing right there?

5 times 20 plus 2. Do I need to get rid of that? So 22? There we go. We actually just need to give it a little bit more than the width there but that should have been obvious to me.

The next thing we'll fix, and actually you can see that our style is not working. I realize that that's because we are setting the background color which is not what SVG elements use. They use a fill attribute. And so, if we change that to fill you can see we've got our nice teal bars back.

Our bars are still sort of upside down. You generally expect them to come from the bottom up. To do that we're going to use our Y function here. We'll pass in the DU. We don't need the index this time. We will return...The height of our chart is 300 so we're going to say 300 minus whatever the height is. You can see below that the height is D times 8. And so, now we've got these things glued to the bottom.

This isn't terribly flexible and so one of the next thing we'll cover are scales and ranges. But you can see now we have converted this to a chart that actually scales its items from the bottom though we've got a couple of these values hard coded in here. And so, it's going to make it hard for us to show how to change this.

Let's do this. We'll put our multiplier up here as eight and use that in both of these place so that our Y and our height are based on this multiplier. If we wanted to go change the scale we can say, "Five," or "Two," or "12."

There you go. We've gotten the same behavior back that we had before except now we're using SVG and we're properly scaling from the bottom as you would generally expect a chart to do.

In the next videos we'll see how to make this a lot more flexible.