Check out a free preview of the full Introduction to D3.js course
The "Scales Solution" 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 live codes the solution to the Scales exercise.
Transcript from the "Scales Solution" Lesson
[00:00:00]
>> We're trying to create an array of objects for creating the flowers. And so let's do that together. And so the very first thing let's do is the colors for the movie genres. Now thus far we've been using that object with the genre, the object that has the genre to the color mapping.
[00:00:27]
And we had to do something weird for when our genre wasn't in that color object because it wasn't one of the top genre. So then, we had to use this other color. Let's kinda take a look at how D3 scales makes that much easier for us. So we're going to use cons color scale.
[00:00:51]
Let's call it color scale. We're going to use scale ordinal. So that one was where we map from a discrete input to a discrete output. And what we're gonna do is we're going to use as our domain and we have this array of top genres. And that I think looks like let's take a quick look at that.
[00:01:16]
So the array of, oops sorry, the array of top genres looks like this. It's this array of these four strings of genres. And then we're gonna take a look at the code. And then, the path colors that we're going to map to is also, there's no path colors?
[00:01:48]
Petal colors, I'm sorry, petal colors. So, petal colors is also an array of Four strings, in this case, the hex code for the colors. And so we're going to map these two arrays to each other. So, basically, we're saying map each of the genres in the top genres array to each of the colors in the petal colors array.
[00:02:24]
And then because I saw our movies have genres that aren't in the top genres array, for anything that's unknown. We want to use the other color. So color object dot other is just this kind of yellow color. So we're just saying if we can map these top genres to these petal colors.
[00:02:59]
But if our movie has a genre that's not in this top genres array, we're going to use this color instead when it's unknown. So that's the first thing. Then, so let's put that in there and let's see if it works. So let's call it color. And let's use color scale and say d dot genres.
[00:03:26]
So, for each movie, the first genre. And let's see if that is working. Perfect. So for each of them, we have the color set on them now. And I think for some of these, these are the ones with other genres and those are being taken care of also.
[00:03:56]
And then the second thing we did was get the, The go from, the rated. So the PG rating to the type of petal. And again, because this is a discrete to discrete, we're going to use scale ordinal. And actually, here's another thing that makes life quite a bit easier with D3 scales.
[00:04:31]
Instead of using the objects that we were doing before. Which is that, in this particular example, we're not going to specify any domains. And we're just going to say we want the output to be this array of petal paths. And what D3 will go ahead and do for us is that and every time it sees a new and parental guidance reading.
[00:05:00]
It will automatically map it to whatever petal path has not been mapped to yet. So let's say that the very first movie as rating is PG, then it will map this PG to the first path in our array of petal paths. And let's say after three or four more of the rating PG it sees, the rating R.
[00:05:37]
And so because it's all a new one, it's going to map that string R, that rating R to the second path in our petal paths array. So that's really nice because we don't have to explicitly write out an array of, G, PG, PG13, R. And D3 will just take care of it for us.
[00:06:02]
So let's go ahead and do that. So we're gonna call it path. And we'll say path scale and we're going to pass in our PG rated. And so now, cool, so, you can see that each of them now has a path, that is being mapped to it. So that's why it appeared like this.
[00:06:33]
In here. So this is our code thus far. And then let's do the two new ones. So let's, map our ratings out of 10 to our scale. So let's call that a size scale. And this one is a continuous mapping, a continuous to continuous mapping. And so in this case, we're going to use scale linear.
[00:07:04]
And you might have noticed that I listed a few other continuous scales, like scale log, or scale power, or scale square root. And so I usually tend to use scale log when there's some really extreme numbers that are outliers. And then so those are kind of like if you just use a linear scale then maybe most of your data points will be down here.
[00:07:32]
But then that one extreme will be up here and you can't quite see the detail within here. And skill log will what kind of like let you kind of expand the bottom part and then be able to see kind of the bottom part also. Though, be careful with scale logs because and a lot of people might not notice that it's a logarithmic scale that's been applied.
[00:08:00]
So then it might potentially be misleading. Be very careful about how you label the axes. And, yeah, so logarithmic scales are also very useful and helpful. When, let's say the data points you have might have a kind of an exponential growth sort of trend going on. So that's when I might use a log scale.
[00:08:25]
And I might use a scale square root when I'm trying to map the radius of a circle. So, there's different times when different scales can be used. But for our example, we're just going to stick to the kind of linear mapping for scaling here. And so we have a reading and so actually now this is where we want to say.
[00:08:59]
Let's say that we're going to get the min and max rating. Out of our movies data set, so we're going to say D3 dot extent. We're gonna pass in the movies data set. And we're going to say that I want to know the min max rating. So dot rating.
[00:09:21]
And we'll pass that in as the array and that will probably look something like 3 to 9.8 or something like that. This is purely a guess, but the min and max rating is going to be an array that looks something like that. And then I'm gonna say that I want to map this to, because we're gonna be using passing this into transform scale.
[00:09:49]
So right now, our petal paths are kind of in the shape out of 100 pixels. And so I probably want it to be smaller than that. So I'm going to scale it from something 0.2 to maybe 0.75. And we can kind of like play around with the scaling.
[00:10:13]
But for now that's how I'm gonna do my scaling. And then finally we're going to go from the number of votes to the number of petals. And again, let's go and get the min and max number of votes. We're going to use D3 extent, and this time we're going to say, seven votes.
[00:10:38]
Yeah, I think it's votes. And because this one is from a continuous to discrete, we're going to use a non petal scale is equal to dot scale quantize dot domain is min and max votes. And this is something probably that's like some few thousand to some like million or something like that.
[00:11:11]
And the range, I'm going to maybe do something between five to 10 petals. So I might do something like this. Alternatively, I like to just use this low dash function that time. We gonna say 5 to 11 and so this will give me back an array of between the numbers 5 and 11 because it's not inclusive here.
[00:11:45]
So this will give me this exact array back. But just for the sake of this exercise I want it to show that. Okay, so let's call that scale, and use the size scale. And we're going to pass in the rating. And then, for the num petals, we're going to do num petals scale, and we're going to pass in the number of votes.
[00:12:16]
If we've done that correctly, then yeah, there we go. So now we have everything scaled correctly. And we're not using the num petals yet. We'll use that in the next notebook when we're creating the whole flower. And that's fine. We'll create the right number of petals for each movie and then rotate them around into a flower.
[00:12:37]
But as of right now, we have the path, we have the color, and we have the scale. And then we have the translation. And so this is what it looks like.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops