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

const xScale = d3.scaleLinear()

### The concept behind scales#

Remember, we need to tell our scale:

what

*inputs*it will need to handle (**domain**), andwhat

*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:

an array

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

const xScale = d3.scaleLinear()

.domain(d3.extent(dataset, xAccessor))

.range([0, dimensions.boundedWidth])

This page is a preview of *Fullstack D3 Masterclass*