This video is available to students only

Creating our scales

We learn about scales and create our first ones: our y and x scales.

Creating our scales#

Let's get back to the data.

On our y axis, we want to plot the max temperature for every day.

Before we draw our chart, we need to decide what temperatures we want to visualize. Do we need to plot temperatures over 1,000°F or under 0°F? We could hard-code a standard set of temperatures, but that range could be too large (making the data hard to see), or it could be too small or offset (cutting off the data). Instead, let's use the actual range by finding the lowest and highest temperatures in our dataset.

We've all seen over-dramatized timelines with a huge drop, only to realize that the change is relatively small. When defining an axis, we'll often want to start at 0 to show scale. We'll go over this more when we talk about types of data.

As an example, let's grab a sample day's data — say it has a maximum temperature of 55°F. We could draw our point 55 pixels above the bottom of the chart, but that won't scale with our boundedHeight.

Additionally, if our lowest temperature is below 0 we would have to plot that value below the chart! Our y axis wouldn't be able to handle all of our temperature values.

To plot the max temperature values in the correct spot, we need to convert them into pixel space.

d3's d3-scale module can create different types of scales. A scale is a function that converts values between two domains.

For our y axis, we want to convert values from the temperature domain to the pixel domain. If our chart needs to handle temperatures from 10°F to 100°F, a day with a max of 55°F will be halfway up the y axis.

Let's create a scale that converts those degrees into a y value. If our y axis is 200px tall, the y scale should convert 55°F into 100, the halfway point on the y axis.

Our dataset

d3-scale can handle many different types of scales - in this case, we want to use d3.scaleLinear() because our y axis values will be numbers that increase linearly. To create a new scale, we need to create an instance of d3.scaleLinear().

Our scale needs two pieces of information:

  • the domain: the minimum and maximum input values

  • the range: the minimum and maximum output values

Let's start with the domain. We'll need to create an array of the smallest and largest numbers our y axis will need to handle — in this case the lowest and highest max temperature in our dataset.

The d3-array module has a d3.extent() method for grabbing those numbers. d3.extent() takes two parameters:

  1. an array of data points

  2. an accessor function which defaults to an identity function (d => d)

Let's test this out by logging d3.extent(dataset, yAccessor) to the console. The output should be an array of two values: the minimum and maximum temperature in our dataset. Perfect!

Let's plug that into our scale's domain:

 

This page is a preview of Fullstack D3 Masterclass

Please select a discussion on the left.