This video is available to students only

Step 4: Create scales

The fourth step: creating our scales. We talk about scales in more depth, and learn about d3.extent() & .nice().

Create scales#

Before we draw our data, we have to figure out how to convert numbers from the data domain to the pixel domain.

Let's start with the x axis. We want to decide the horizontal position of each day's dot based on its dew point.

To find this position we use a d3 scale object, which helps us map our data to pixels. Let's create a scale that will take a dew point (temperature) and tell us how far to the right a dot needs to be.

This will be a linear scale because the input (dew point) and the output (pixels) will be numbers that increase linearly.

The concept behind scales#

Remember, we need to tell our scale:

  • what inputs it will need to handle (domain), and

  • what outputs we want back (range).

For a simple example, let's pretend that the temperatures in our dataset range from 0 to 100 degrees.

In this case, converting from temperature to pixels is easy: a temperature of 50 degrees maps to 50 pixels because both range and domain are [0,100].

But the relationship between our data and the pixel output is rarely so simple. What if our chart was 200 pixels wide? What if we have to handle negative temperatures?

Mapping between metric values and pixels is one of the areas in which d3 scales shine.

Finding the extents#

In order to create a scale, we need to pick the smallest and largest values we will handle. These numbers can be anything you want, but the standard practice is to examine your data and extract the minimum and maximum values. This way your chart will "automatically" scale according to the values in your dataset.

D3 has a helper function we can use here: d3.extent() that takes two parameters:

  1. an array

  2. an accessor function that extracts the metric value from a data point. If not specified, this defaults to an identity function d => d.

We'll pass d3.extent() our dataset and our xAccessor() function and get the min and max temperatures we need to handle (in [min, max] format).


This page is a preview of Fullstack D3 Masterclass

Please select a discussion on the left.