Check out a free preview of the full Introduction to D3.js course

The "Scales" Lesson is part of the full, Introduction to D3.js course featured in this preview video. Here's what you'd learn in this lesson:

Shirley shares examples of the most commonly used scales that translate data types into visual channels, and explains when and how to use them.

Preview
Close

Transcript from the "Scales" Lesson

[00:00:00]
>> Let's look at some common visual channels. And so some common visual channels are potentially position, so your x y position. And it could be size or dimensions, so if you have a rectangles, width and height, a circles radius or in our case, our flower petals like scale.

[00:00:24]
And so that's also continuous. And we can have a color channel and so that could either be sequential. So kinda going from this light to darker or diverging, which means that we have some central value and then it diverges going to both sides. And these visual channels are also continuous.

[00:00:56]
And on the other hand, we have some visual channels that are discrete. So we have these categorical colors and we can potentially have different shapes. So for example, for our flower petals, we have distinct, different shapes for each of our flower petals. And some other ones that we might commonly use is maybe we'll map something dots or squares to letters.

[00:01:35]
So these are discrete visual channels. And it's really helpful to think in kind of this way of continuous or discrete and from mapping from data to visual channels when we think about D3 scales. So for D3 scales, and again, this isn't the whole list of D3 scales but these are the ones that I end up using quite often.

[00:02:02]
And you can kind of break them down into this mental model of a continuous input a continuous data type to a continuous visual channel. So that could be scaled linear, scale log, scale square root, scale time. And these are mapping from one continuous data type to, let's say something like, xy positions or size a continuous visual channel.

[00:02:32]
And then we have some scales that helps you map from a continuous data type to a discrete visual channel. And so, scale quantize is what we'll use when we map from our number of IMDb votes to our number of petals. Because number of IMDb votes it could be anything from a few thousand votes to a million votes or something like that.

[00:03:06]
So it's a kind of a continuous and data type when we think about it. But then the number of pedals and it's either we have five pedals or six pedals or seven pedals or eight pedals and there isn't like 5.5 pedals or anything like that. So, and this scale quantize helps us kind of translate from that number of votes.

[00:03:36]
And they will like kind of chunk into these discrete chunks and then it will map it to the number of petals for us. And then we have discrete to discrete, which is a new scale ordinal. And scale ordinal is really great for when we're trying to map discrete data type to, let's say a discrete color.

[00:03:58]
So this kind of categorical color scheme, it's very helpful for that. And then finally we have going from discrete to continuous, and we can use scale band. And that could be something we have a bunch of bars that we're trying to draw. So each bar might be this discrete thing that we're trying to represent in the data.

[00:04:22]
And then maybe it's that we want to calculate the x-position for each of those bars. And so the x-position is something that's continuous, visual channel. And so that's the way that I kind of think about D3 scales and when and how to use them.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now