Join Ray Villalobos for an in-depth discussion in this video Creating a simple bar chart with SVG, part of Data Visualization with D3.js.
So, from right here, were going to begin by setting up some variables, so we'll create a variable called bar data,. And this is going to have a series of values and these are essentially going to be the data that we want our chart to use. So 20, 30 and you could type in just about anything here, so we'll type in something else here, 15. And then I'm going to create another variable or a series of variables. For the dimensions of my graphics. So this time I'm going to do a height and I set that to 400.
And then a width and set that to 600. And then some other ones. And when you do these variables you can, if you want to. Create a single var statement and use commas like this in between variables. So we could actually put this with all the other ones. Sometimes it seems cleaner to kind of group these different variables into little sections. So I'd like to keep my data by itself. So lets go and keep on going, so we'll do d3.select, and then we'll target our chart ID and then we'll append and SVG to it.
So that's going to append an SVG inside our chart, you can't really see it,. You could if you, right click and Inspect Element, and there's the SVG that we've created. So, let me go ahead and hide this because it'll actually be useful, to see the chart as it gets created. So, once you've got the SVG graphic, we can add some attributes. Again you can do this in CSS but sometimes it's just easier to do everything with d3. So we'll set the width of this SVG to the width variable that we created earlier.
And of course we're going to set the height as well. And then after the height we'll add the style. And we'll use background whenever it is some sort of string. Needs to be in quotes. So let's go ahead and save that. You can see the color appear already. Next, we need to go ahead and grab the data and cycle through each of the different pieces of data. So the way you do that is, we learned in the last video, we'll go ahead and use a select. All statement and select some rectangles.
Those will be the individual bars and then we'll use the data command to read our bar data, and we'll use enter and also pass it along and append command and append. The rectangle so remember this rectangle or this selection right here is actually targeting this append here, and as you go through each of the pieces of data is going to append one of these rectangles and then this command right here is going to select them all.
Okay so now we can style some of these so we can do a style fill, and we'll add a color here so lets do a #C61C6F and then we'll need to some attributes. And this is the width of each bar, so we got a variable up there ready for it. So they're going to be about 50 pixels wide. And we'll set the height. It's going to be a function that passes along the data, and then outputs just the information.
That's in this data. And this data super simple, it's just a bunch of numbers, so it will output each one of these as it cycles through the data. And, as I said this, you can see that our data coming in, but it's all positioned on the top left, so, if it's actually showing you this 45. Height. They're all kind of stacked on top of each other with the same color. So whichever the bigger number we have here, that's what it's going to show. So let's, if I make this like, 105, you'll see that it's, that one shows up as being the one that's a lot bigger.
So we need to offset and buy an x and y position. Let's go ahead and start off with the x for right now. Since it'll immediately show us what's going on, so we'll do an attribute, and here we'll say we want to to work with the x-value and we'll create a function that passes along the data. But we also need something else. We also need to pass along an index. Whenever you pass along data, if you pass a second variable, right here, like this I. It's going to give you the index of the array, because remember this data usually comes in as an array and in addition to the value right here you can also ask for the index.
So it would be, it would go through zero, one, two and three. And the allows you to do something inside this function. And what we want to do is offset the position of each one of these by a certain x amount. So to do that I'll return and I'll do the i, the index times and then the width of each bar plus the offset that we want to set for each bar. Now let me go ahead and save that. And you can see the bars, they're sort of up at the top which.
Looks a little weird, but at least they've got the right offset. And now you can see each one individually. So we need to position them vertically. So attribute y and this is also going to be a function using the data and then over here we're just going to return the height of the chart. Minus the data. And what that will do is position them from the bottom up. So that the height becomes the height that we specified on this different data set.
So, now if you modify this to be like 105, you'll see that gets longer here. You can add additional data points if you want to. So, let's try something else here. 85 and you can see another data point there. So, this is actually a pretty good chart. And you can see how easy it is. All you're doing is just combining everything we've learned so far. Our graphic looks a little anemic right now, and although it's getting some data there's a lot of ways that we can improve on this. So we will pick this up in the next video.
- What is D3.js?
- Creating a basic document structure
- Controlling HTML DOM elements
- Binding data to the DOM
- Drawing SVG graphics with D3
- Using ordinal scales
- Adding events and transitions
- Working with data
- Creating and adjusting layouts