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: "Create scales"
description: "We create our scales, but first, we learn how to split our data into equally-sized bins."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/w9ewzk7ghk
codeFolder: course/module_02/lesson_02.04/protected/code/03-making-a-bar-chart/end
---

# Create scales

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

Our x scale should look familiar to the ones we've made in the past. We need a scale that will convert humidity levels into pixels-to-the-right. Since both the **domain** and the **range** are continuous numbers, we'll use our friend `d3.scaleLinear()`.

Let's also use `.nice()`, which we learned in **Module 2**, to make sure our axis starts and ends on round numbers.

```javascript { actualFilename=./protected/code/03-making-a-bar-chart/completed/draw-bars.js endChar=1109 endLine=50 startChar=980 startLine=47 statedFilename=code/03-making-a-bar-chart/completed/draw-bars.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-course-template/module_02/lesson_02.04/protected/code/03-making-a-bar-chart/completed/draw-bars.js#L47 }
const xScale = d3.scaleLinear()
  .domain(d3.extent(dataset, xAccessor))
  .range([0, dimensions.boundedWidth])
  .nice()
```

Rad. Now we need to create our `yScale`.

But wait a minute! We can't make a y scale without knowing the range of frequencies we need to cover. Let's create our data bins first.

### Creating Bins

How can we split our data into bins, and what size should those bins be? We could do this manually by looking at the domain and organizing our days into groups, but that sounds tedious.

Thankfully, we can use **d3-array**'s `d3.bin()` method to create a bin generator. This generator will convert our dataset into an array of bins - we can even choose how many bins we want!

Let's create a new generator:

```javascript { actualFilename=./protected/code/03-making-a-bar-chart/completed/draw-bars.js endChar=1143 endLine=52 startChar=1111 startLine=52 statedFilename=code/03-making-a-bar-chart/completed/draw-bars.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-course-template/module_02/lesson_02.04/protected/code/03-making-a-bar-chart/completed/draw-bars.js#L52 }
const binsGenerator = d3.bin()
```

Similar to making a scale, we'll pass a **domain** to the generator to tell it the range of numbers we want to cover.

```javascript { actualFilename=./protected/code/03-making-a-bar-chart/completed/draw-bars.js endChar=1172 endLine=53 startChar=1111 startLine=52 statedFilename=code/03-making-a-bar-chart/completed/draw-bars.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-course-template/module_02/lesson_02.04/protected/code/03-making-a-bar-chart/completed/draw-bars.js#L52 }
const binsGenerator = d3.bin()
  .domain(xScale.domain())
```

Next, we'll need to tell our generator how to get the the **humidity** value, since our dataset contains objects instead of values. We can do this by passing our `metricAccessor()` function to the `.value()` method.

```javascript { actualFilename=./protected/code/03-making-a-bar-chart/completed/draw-bars.js endChar=1194 endLine=54 startChar=1111 startLine=52 statedFilename=code/03-making-a-bar-chart/completed/draw-bars.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-course-template/module_02/lesson_02.04/protected/code/03-making-a-bar-chart/completed/draw-bars.js#L52 }
const binsGenerator = d3.bin()
  .domain(xScale.domain())
  .value(xAccessor)
```

We can also tell our generator that we want it to aim for a specific number of bins. When we create our bins, we won't necessarily get this exact amount, but it should be close.

We create our scales, but first, we learn how to split our data into equally-sized bins.