Using D3.js Scales

[00:00:00]
>> This is how I d3 scales, look and practice and so let's say we're trying to use scale linear to map from continuous to continuous, and then we want to set the domain, which is our input our raw data. And then we want to specify The range, which is the visual channel that it should map to, and so the way that I think about it is we specify the minimum value in our raw data.

[00:00:34]
And then we'll get mapped to the minimum value in our visual channel and the maximum value that we specify for the raw data will get mapped to the maximum value in our visual channel. And the way that we use it is that then this function, or this series of code will give back a function and we then pass some value.

[00:01:04]
Some raw data value into the scale to get the translated visual channel value. So that's how we use scales, and then d3 also has some helper functions for us to help calculate the min and max from our raw data, and so we can use d3.min, pass in the data and then specify how.

[00:01:31]
And then we want to specify like whatever attribute we're trying to get the minimum for, same thing for the max and the one that I find the most useful that I use a lot is dot extent. And what dot extent will do is if you pass in your data, and if you specify like the attribute and the data that you want to get the min and max for.

[00:01:53]
It will return an array of min and max that you can plot directly into the dot domain call right here, because dot domain and dot range will always ask for an array of min and max. So that's how we'll use scales, and let's see how that works with our bar chart that we currently have.

[00:02:20]
So, and so far our bar chart has had a fixed dimension of, you know, 250 pixels by 100 pixels because that perfectly perfectly fit our very simple data array with five numbers. And with those five numbers ranging from only 0 to 100, very predictable and so that's why we were able to hard code it.

[00:02:41]
But, as you can probably imagine, for a lot of the visualizations you're going to do, it's not, you probably won't be able to hard code much. And you want to be able to have the flexibility of fitting any number of, you know, data elements to any sort of width and height.

[00:03:00]
So, and let's use d3 to kind of apply that flexibility and also you might have noticed that our bar chart this far, except for that one time, when we do something with the y attribute. Our bar chart is currently upside down, so let's fix that with d3 scales too, and actually calculating the y value, it's probably the most common way that I use d3 scales.

[00:03:33]
Because I'm trying to, you know, map from my lowest value in the data to, you know the bottom of my container which is like oftentimes, like, whatever the height of the container is. And my highest value to the top of my container, which is actually zero, so it's kind of like this reverse thing that's going on and you'll see what I mean when we get into the code.

[00:04:00]
But I have this little example where and we can just like dynamically just create different number of bars and then we can have any like width or height. And we can kind of specify whatever padding between the bars that we want, and so this example is kind of just to show that d3 scales gives us all these kinds of flexibility.

[00:04:29]
And so let's kind of dig in to the code to see how this is happening, so here's the most relevant parts of the code, so this is a data array that's being randomly generated. And by we specify the number of bars we want, this is a lodash function that I also use a lot, that basically given a number here just creates an array with length.

[00:05:07]
The same length that as we specify here, so this is out data array of in this case, eight randomly generated numbers. And for the x scale, this is where we're using scale band, and scale band as you might remember, is a mapping from a discrete input to a discrete, raw data to a continuous visual channel.

[00:05:36]
And so in this case, what we want is to be able to position each of these bars and so the discrete domain that we're passing in is just the key store data, so it sets the domain to these discrete 01234567. And we're saying that we want to map that to this continuous range of our width of going from all the way to from our left, zero pixels all the way to our right, which is the width of 613 pixels.

[00:06:12]
And so, we're saying that, you know, we want to map this zeroth element to zero pixels and our final seventh or eighth bar to all the way to the right. And everything in between, d3 do your magic and figure out what the exposition for that should be. And that's the x scale right here, and for the y scale, we're using a scale linear, so that's continuous to continuous.

[00:06:47]
And we're saying that first of all, I want the maximum value in our data, which right now just so happens to be 90, if I play around, rolling, if I play around with the number of bars. That could change, so right now the maximum value is 62, and then now the maximum value is 79.

[00:07:08]
And so what I want to do is, I want to map the lowest number, and in this case I'm gonna just hard code it to 0. To the bottom of the container and the bottom of the container is this height of the container that I've set, so I want to map the bars with height 02, the bottom.

[00:07:37]
And I want to map the bars with the maximum but the most, the highest number to the top of my container, in this case the top is zero pixels, the Y is equal to zero. And then here how we use it is, this is probably really familiar now it is, we're saying, let's go and create the number of rectangle elements as in the data, so right now we're creating six.

[00:08:15]
And we're binding those data and to each of our six rectangle elements, and we're passing in an attribute of x. And for the x, what we're doing is we are passing in the index to the x scale, and then getting back some number. And for the y, we're going to pass our data to the y scale and we'll get back some number that we can use for the y position.

[00:08:48]
And indeed, you can see that these are the things that are being calculated with our x and y scales, so this is how we can use d3 scales in practice.