Charts communicate ideas with simplicity, clarity, and detail.

Once you're comfortable with D3 you can quickly:

* understand key metrics at a glance
* catch anomalies (before they turn into problems)
* give key insights to your customers
* and impress your boss and co-workers

Today, I will show you the exact methods I use to create beautiful, understandable data visualizations using D3.

The Fullstack D3 masterclass is the complete guide to D3. With dozens of code examples showing each step, you will gain new insights into your data by creating visualizations in this self-paced online course.

Fullstack D3 Masterclass

---
title: "Step 4: Create scales"
description: "The fourth step: creating our scales. We talk about scales in more depth, and learn about d3.extent() & .nice()."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/nbxcqq2nrr
code: https://gitlab.com/fullstackio/books/newline-course-apps/amelia-wattenberger-fullstack-d3-masterclass-app/-/tree/main/code/module_01/lesson_01.05/protected/code/02-making-a-scatterplot?ref_type=heads
---

# Create scales

<CodeSandboxEmbed
  src="//codesandbox.io/s/6cxoh?fontsize=14&hidenavigation=1&theme=dark&autoresize=1&module=/chart.js"
  style={{width: '100%', height: '35em'}}
/>

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.

```javascript
const xScale = d3.scaleLinear()
```

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

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