Scales Exercise

[00:00:00]
>> Let's do an exercise to really kind of get it ingrained in us, how to use these scales. And what I want to do is, to have us convert our raw movies data into the visual channels that we're going to need to render our flowers. And the mapping is before PG rating to the type of flower petal,number of IMDb votes to the number of petals, and IMDb rating out of 10 to the size of petal.

[00:00:37]
And the movie genre to the color of petals. And here's again a reference for the movies. And this time around, it's a slight bit different from how we've been doing it before, because we're going to actually create an array. So it's gonna be an array of objects that we're going to then bind to our d3 selection.

[00:01:06]
And the reason why I like doing it this way, where I separate out my raw movies array, from my flowers array. And my flowers array, will have all of the visual channels, visual encodings that I need to render to the DOM, and my movies array will have all of my original raw data.

[00:01:28]
And the reason why I like to kind of separate out these two data arrays, or sorry, these two arrays, is because often times when I'm creating visualizations, I might have multiple different visualizations that's based on the same data set. And so I've gotten kind of in this habit of creating, of separating the kind of translated visual channels for each, because there'll be different for each different visualization.

[00:02:01]
And having that be kind of like its own contained array that doesn't mutate the original raw data just so that, one calculation for one visualization, doesn't mess up any calculation for another chart or visualization. And so even when I'm only doing one visualization, I've kinda gotten in that habit of separating my array of raw data, from my array of visual channels, just as like a kind of personal best practice.

[00:02:43]
So let's do that and, what we're going to do, is for each of these four different things, let's use the right scale. And set the domain and range on them. And then we'll return it here. And I think yeah, so I think, yeah, let's then kind of evaluate and return, say the color and the path and the scale and num petals here.

[00:03:20]
And if we've done it correctly, then it will all render in this cell. And so this again is very similar to what we've done before. If you kind of want to look at what it should look like, and what the flowers array should look like, and this is what it should look like, but yeah