From the course: D3.js Essential Training for Data Scientists

Introducing scales - D3.js Tutorial

From the course: D3.js Essential Training for Data Scientists

Start my 1-month free trial

Introducing scales

“

- [Narrator] Now that we've got groups under our belt, we will soon be able to use D3's built-in axis generators. You can build axes manually, if you'd like, but the automatic ones save a lot of time. D3 will draw the axis line, the tick marks, and the labels dynamically from the data, spacing everything neatly for us. D3 arranges all these elements in groups. If the data change, your axis updates. Even if you go from annual data to daily data, D3 will cope. In fact, D3 axes can show dates, text, or numeric data. You can format the various parts of D3 axes any way you'd like, too, so really, there's no reason not to. Before we can make an axis, we need to understand about scales. So far we've supplied the raw data to D3, such as our array of five, 11, and 18, and then multiplied it by 15 or something, to make it the right sort of size on the web page. But we don't want to have to work out a multiplier every time we draw a chart. Scales will do this for us. Scales have domains, or inputs, and ranges, or outputs. Let's say our data set contains financial debt data, and we need to use a linear numeric scale. The smallest debt is zero on the left, and the largest is 10,000, and since this is real-world data, there are units. In this example, the units are dollars. The domain can accept negative values, even though it isn't here. So this is the domain of our scale, our input. Think of it line a number line, if you can remember those. Possible values run from left to right, from naught to 10,000. Most charts need two domains: one for the x-axis, and one for the y-axis. This looks like it's going to be y-axis data, to me, anyway, because the x-axis is usually dates. Next we have the range. Range is D3 speak for output. The range describes the height or width available for our chart on the web page, so the range is always in pixels. Range cannot be negative, because a negative height would be meaningless. As with domain, most charts would have two ranges: one for the x-axis, and one for the y. Let's say our domain here is for the y-axis. Then this range tells us that the y-axis is 300 pixels high. As with the domain, the range can be thought of as a number line, running left to right. All the scale does is works out the appropriate multiplier for our data. It's going to tell us that a debt of 3,500 dollars should be plotted at a y value of 105 pixels, for a linear scale. To work out the multiplier, the scale needs four bits of information: the minimum and maximum values from our data, and the starting and ending pixel position where we want the chart. One final thing: do you remember when we made our first bar chart? The bars were upside down to begin with. That's because web pages draw their elements top down, but we read charts bottom up, so we had to invert our y-position. For this reason, we normally match the minimum value of the domain against the maximum value of the range, and vice versa. It saves having to subtract y values from a height later.

Contents