Name: Scaling Basics
Uploaded: 2013-12-04T15:37:53-06:00
Description: In this lesson Ben shows you the basics of dynamically scaling your charts in D3. Scaling is a deep concept, so this is the first video in a series that will cover this topic.

Get Started With D3

Basics of SVG

Scaling Basics

d3.max

rangeBands

Color Scales

Quantitative Scales

Margins

Scatter Plot

Debugging with Dev Tools

Basic D3 chart interactivity

Basic Transitions with D3

Creating Axes with D3

Cleaner D3 code with selection.call()

Line and Area Charts with D3

Responsive D3 charts with the viewBox attribute

Use D3 (v3) to Build Interactive Charts with JavaScript

In this lesson Ben shows you the basics of dynamically scaling your charts in D3. Scaling is a deep concept, so this is the first video in a series that will cover this topic.

**Ben Clinkinbeard**: So our columns now scale properly from the bottom of the chart, but it's still not exactly flexible the way that we've built things, and to fix that we're going to use D3's built-in scale capabilities. We're just going to create our width and our height in some variables here so that we can use these elsewhere, and we'll do that.

Now we have our width and our height set up. We actually... well, let's leave that multiplier for now. Let's create our scale, so if we say "var yScale = d3.scale.linear"... D3 has other types of scales, like logarithmic scales and things like that, but we just want a straight, linear mapping.

We're going to say that our domain, you always use a two-element array for domains and ranges, so we've got a domain that runs from a minimum of 0 to a maximum of 25, and our range is going to be from 0 to our height.

I believe the formal definition for a scale is that it's a function that takes a value in an input domain and maps it to a value in an output range, so in our case here, any values that get passed into this scale are going to be mapped to the domain of 0 to 25, and depending on where they fall, that will be mapped to a corresponding value that falls between 0 and height, which in our case is 300.

Obviously you could pass in a value that doesn't fit in this range, and you're going to end up with something outside of the range, but it still does the mapping based on those proportions.

What we can actually now do is, instead of doing this random D times multiplier, we can just use our yScale that we've created and pass in our data item, so you can see it's now scaling those based on the yScale, and you can see that the size of them has changed because of the values of those things.

Actually, what we need to do here is we want to have this use the same height value, so here we've got our chart now fully using our dynamically set height and our yScale. The height of these bars is going to be determined by passing the datum into the yScale.

The Y value is going to take that same value, the datum passed into the yScale, and subtract that from the height of our chart, and all that essentially functions to do is to pin these columns to the bottom of the chart, if you were to say 40, or whatever, there, it's going to float a little bit above the bottom there, just so you can see what's going on there.

We're now taking our values that are in our data set here. They're being evaluated to figure out where on this spectrum of 0 to 25 that they fall, and that's mapping to an output range of height, so it should not be surprising that the last bar here is filling the chart because its value is 25 and that is the maximum value on our domain, and the maximum value of our range is our height, so they map one-to-one.

If we were to change the input domain and say, "The maximum value that may be in our data is actually 50," this is actually going to fill exactly half the chart, so you can see that this gives you a lot more flexibility to just...

You set up your scales to match what you have to work with in our UI and then your data will automatically be adjusted to work properly, we were to add, say, 50 in here now, it's going to fill that space. If we were to change it to 49, you can see that it's slightly under, and maybe change it to 40. You've got this completely dynamic chart now.

Scaling Basics

Share this video with your friends

Course

Use D3 (v3) to Build Interactive Charts with JavaScript