Going from Data to SVG Shapes

[00:00:00]
>> Shirley Wu: Let's talk about D3. So like you saw in that little exercise, going from the data to SVG shapes can be kind of overwhelming if you don't have the tools. And that's exactly one of the many things that D3 is good for. So I want to talk a little bit about the D3 API.

[00:00:24]
So I mentioned earlier that D3 can be intimidating because of the enter, update, exit pattern and how that works. But I think one of the other reasons why D3 can be so intimidating is because of the sheer size of the API. The bold parts are the modules, and these are just some modules, and then there's a lot of different functionality under each of the modules.

[00:00:53]
But today I kinda want to break down all of the D3 API and kind of talk about the parts that are relevant to us and what we want to do. And in particular for what we're going to do next I want to talk about scales ad shapes which will help us calculate the x, y coordinates or the path strings that we saw earlier.

[00:01:18]
And it will help us go from the raw data of the temperatures and dates and go to the x, y width height or the path strings. Yeah, so let's talk about that. So let's start again with the bar chart. And again, for each of the bars what we want to do is create a rectangle element that has x, y, width and height.

[00:01:45]
And so to do that we want to use this thing called scales in SVG. And the way that I like to think about scales is that there is a input, and in D3, we call it domain, and then output, and we call it range. And the way that I like to think about scales is that we use it to map from the raw data attributes, domain, to the display, which is a range.

[00:02:14]
So basically, if we take for example the temperate data, it's like going from translating the date to the x axis, and maybe the temperature to the y axis, and maybe some other value to the opacity, etc. So translating raw data into what we need to draw the SVG elements.

[00:02:46]
>> Shirley Wu: And some examples of this is, for example, let's say we have a domain that's minimum is 0 and the maximum is 100. And then we just want to map it to a range of 0 to 1. Maybe this is we're trying to map some raw data to opacity, let's say, and this is how it goes, right?

[00:03:10]
Well, if we're using scaleLinear it's a very straightforward 1 to 1 mapping, so 0 goes to 0, 20 goes to 0.2, 100 goes to 1, etc. We can also flip things around and be like okay, my domain, the minimum is 0, the maximum is 100. But for the range I want to have it such that the 0 maps to 500 and that 100 maps to 0.

[00:03:40]
So the 0 goes to 500, 20 goes to 400, etc, until 100 goes to 0. And the reason why this is useful is for the y axis. And I mentioned earlier that SVG coordinate systems, it starts out at 0, and at the top, and then it increases going down.

[00:04:00]
So that's why, let's say I want my 0 value, if I have a temperature that's 0, I want it to be at the bottom. But the bottom is, let's say, the 500 pixels. And I want my temperature for 50 degrees, let's say, to be in the middle, and the middle would be 250.

[00:04:20]
And then I want my highest temperature, 100 degrees, to be at the very top of my chart, which in the coordinate system is a y position of 0. And that's why scales are extremely helpful, because it does the mapping so we don't have to. And as an example, I want to tell you that one time, I was teaching with one of my friends, and just to drive this point home, he tried to hand code, just the scale linear, which is like the most basic scale, right?

[00:04:51]
It's just like a 1 to 1 linear mapping. And he tried to hand code scale linear. And then it took us three or four tries to get all the edge cases right. I can't remember where we got caught up on, but it took us a while. And so D3 is just really great at giving us these kinds of utility functions, so make even something as trivial as this really easy, or something that looks really trivial, but not trivial, easy.

[00:05:19]
So yeah, these are our scales. And to use them in your code, what you want to do is, let's say you have your data and, like I mentioned before, you need a min and max for your domain. And so the way that you can calculate it is D3 has these functions, d3.min or d3.max, that will help you.

[00:05:43]
If you give it an array and an accessor it will return the min and max for, this example is with dates.
>> Shirley Wu: Or you can use one of my favorite functions, d3.extent, which gives you back the min and max in an array form. So this is getting the min and max temperatures, I'll put it to the extent, and then I create my scale.

[00:06:13]
So, my x-scale, I want it to be scale of time, because I got back the min and max date. I give the domain an array of the min and max dates and I tell it to map from 0 to width. And then for the y-scale, I'm using a scaleLinear, and then I'm passing in domain(extent), because the extent is an array of min and max.

[00:06:38]
And I'm saying map the minimum to the height, and map the maximum to 0.
>> Shirley Wu: Cool.
>> Shirley Wu: And I wrote down a few of the scales I use quite often. And I broke it down by what kind of data types you might use it for. So the first part is quantitative domains, and so something like the temperature I mentioned earlier.

[00:07:13]
And so far if you have a continuous domain and a continuous range, so that could be the temperature going into x, y positions, you want to use scaleLinear, or scaleLog, or scaleTime. If you have a continuous domain but a discrete range, this is a really interesting one, I think I've only have how to use this a few times.

[00:07:42]
But one time when I was making those flowers I showed earlier, I wanted to map the number of IMDB votes, which is a continuous domain, into the number of pedals, which is a discrete range. And that's when I used this scaleQuantize. Not used too often, I don't think, but really good to know.

[00:08:03]
And of course with categorical, when you have a discrete domain. So, genres, and you want to map it to, let's say, a discrete range, like different colors, you want to use scale ordinal. And then if you have a discrete domain but a continuous range, so like when we were talking about the bar charts and we had the domain being genres.

[00:08:32]
But then we wanted to map the genres to somewhere on an exposition, on an x axis, so that's a continuous range, scaleBand is really helpful with that. Yeah, so these are some of the scales. There's, I wanna say five or six others that D3 provides, and I would say if you've the time or if you're interested read through the D3 API for each of these scales.

[00:09:04]
But these are the ones, I think, I will recommend, because these are the ones that we probably will use quite often.