- [Instructor] Alright so it's time to put everything we've learned into practice by creating a simple bar chart that uses data as well. So as you can see my index at HTML is back to just being pretty simple with a div that has an ID of viz. Right now in everything we do we'll be inserted into this div. My script file is completely empty. So I'm going to start off by creating a variable called bar data. And then setting that to an array with some simple values here.
Now let's go ahead and create another set of variables that we can insert into our graphic. So we'll create a variable I'll call height, and that's going to have the height of the SVG graphic and some other variables as well. So the bar width variable will be the width of our bars and the offset is how much space in between. So first we need to start off by using d3 to select our element.
So since there's only one element to select, we will target it like this using the ID of viz and immediately we'll go ahead and append a SVG graphic. And then inside that we will create some attributes. So attribute width, I'll set that to the width that we generate it above in that variable. Do the same thing with the height, just set it to the height variable, and then add the style that sets the background color.
So that creates our graphic with the proper background, just like we did before. And now it's time to start using our data. So what we're going to do here is do a select all. So we're going to use the enter with the data attribute. So first we have to select the elements that we're going to be creating, they're going to be a series of rectangles. And then we have to call the data attribute with our bar data and then we'll use the enter command and append the rectangles that we're calling.
So remember we are selecting rectangles before they exist using this data that we are generating up here. And then with the enter command, we're going to append all of the rectangles that we're doin' here. So a series of bars will be just a series of rectangles that we're going to be generating with our data. And so in here we can actually start styling these individual bars. So I'll say fill.
Alright so now we need to set an attribute for the width and this is going to be set to the bar default the width which we call bar width here. So they're all going to be the same width. And then here's where it gets sort of interesting. We'll set up another attribute, and for the height of each one of the different elements, this is going to use a call back with our data, and just return that data.
So if we save this you'll see that we actually have all of the bars, but they're all the same color, and they're sitting right on top of eachother. So that's why it looks like a single bar. That means that we need to also set something for the X position. And for this one we will also need the index and we're going to return the index times our width plus the bar offset.
And when you save that you can see that they all kind of appear next to each other. They have the offset in between, and they're all that default width. So we're getting something now. If you do want to align them to the bottom, we can add another attribute here for the Y position. Again a call back, and return the height minus the data so that now it aligns to the bottom.
So the reason that it's by default going to align to the top is, the weird Y coordinate system that happens with computers. And we're used to seeing a coordinate system that starts with 00 position on the bottom left, but computers have a coordinate system that has a 00 on the top left, and that's why we have to reverse things. So as you can see this is a pretty simple way of creating a graphic by using everything that we've learned so far.
Combining our use of data as well as selections, attributes and style, to create a very simple looking bar chart. We're going to improve on this in the next chapter.
- What is D3.js?
- Controlling HTML within selections
- Binding data to the DOM
- Drawing SVG graphics with D3
- Using ordinal scales
- Adding events and transitions
- Working with data