This video is available to students only

Create scales

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

Create scales#

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.

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:

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

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.

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.

 

This page is a preview of Fullstack D3 Masterclass

Please select a discussion on the left.