This is the first video in a series on D3 from Ben Clinkinbeard. D3 can be... dense, but Ben breaks down the bare essentials and will guide you to D3 mastery.
Ben Clinkinbeard: In this video we're going to use D3 to create a simple column chart using the dataset array you see defined. To do that we're just going to say D3, select, then tell it to select the body, because that's where we want our visualization to be defined.
We're then going to tell it to select all of the divs that it can find and tell it which data to use, which is just our dataset array. You'll notice that there are no divs defined on the page yet. The way we're going to fix that is by using D3's enter selection mechanism and tell it to, whenever it goes into the enter selection which means that it has found a data element that doesn't have a UI element corresponding to it, in that case we want you to append the div.
After you append the div, we want you to set an attribute. In this case it's the class attribute. We want that class attribute to bar, which you'll see here has already come up. That is thanks to the style defined up here which sets a width, height, margin, and a color.
Once we do that we can actually get a little bit more control. We'll say I want your height to actually be 30 pixels, so we're going to override that style that's defined there. Now we have our column chart defined, but it's not terribly useful to have everything be the same size.
We're not really using the data that we have there, so let's change that by changing that statics chain into a function. Each one of our data elements is going to be passed in here. We can use that to create a dynamic value.
We'll say D times seven and then add on the pixel units. Now we have a chart that is actually using our data. Obviously you can play with the value here to sort of modify the scaling of the chart. That's it...