Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 832 of the free egghead.io lessons, plus get D3 content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Get Started With D3

2:44 D3 lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Jacob

I have been looking at graphic framework like D3 to draw a dynamic family chart like this one: http://genealogy.stackexchange.com/questions/9506/what-type-of-chart-is-this The trick in this chart is to find the vertices because the data is dynamic. Do you think D3 can do both the arithmetic as well as graphic aspect to draw a chart like those? What branch in mathematics like geometry or algebra help to solve the vertices?

In reply to egghead.io

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...

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?