Going from Data to SVG Solution, Part 2

[00:00:00]
>> Shirley Wu: And then you might notice that it's very black and kind of sad. So let's also bring in a color scale.
>> Shirley Wu: So three, the secret directions that aren't in the directions. Let's map the average temperature to a color. So first of all, get the minimax of the average temperature and so we're very, very practiced with that now, so d3.extent, d.avg.

[00:00:49]
>> Shirley Wu: And then I'm going to introduce a new scale to you that I didn't talk about before. Okay, it's called scaleSequential, and it's very similar to scale linear and scale time, in that it takes in a continuous domain. But, it outputs for range
>> Shirley Wu: It outputs a continuous range, but it outputs a sequential scale that is fixed by an interpolater.

[00:01:29]
And that's just really fancy for saying, scale sequential is basically like scale linear, but you can pass one of these in. I mean you can pass other things in, but for what we want to do, it just means we can pass one of these in. So, imagine instead of mapping to X Y coordinates, we're now mapping to this as the output.

[00:01:55]
So this will be basically, the minimum will be mapped to this red and the maximum will be mapped to this blue. And so for us, we want that to be that our lowest temperatures, average temperatures are mapped to this blue right here and our maximum, our highest average temperatures are going to be mapped to this red.

[00:02:21]
Cuz this is also extremely useful if you want to map to color, but the way that you want to map to color, your domain, your input is continuous. If your input is categorical, then you can use one of these to map to color. So yeah, so we will use scale sequential and we'll map to this interpolateRdYlBlu.

[00:02:50]
>> Shirley Wu: So pass in our domain, and we say .interpolator and then we pass in D3.interplate red, yellow, blue.
>> Shirley Wu: And then, once we have the color scale defined, color scale. And then we say d.average, and that should give us back an RGB.
>> Shirley Wu: For that temperature.
>> Shirley Wu: Actually, let me just console log and show you.

[00:03:34]
So let's say color scale and we have a temperature of, let's say zero. Whoops. Yeah. And it's this rgb. I don't know if anybody can read that and be, this is the color [LAUGH] And let's say we have-
>> Speaker 2: Mostly reddish?
>> Shirley Wu: Yeah! Actually, and we'll talk about that.

[00:04:08]
So, if I do 50 degrees, then this is what it outputs. 100 degrees, and this is what it outputs. Has anyone noticed something weird yet? Why is zero giving me something mostly red? And why is a 100 giving me something mostly blue?
>> Speaker 2: It's sorta inverted.
>> Shirley Wu: So if you take a look at what's down here, it's currently inverted.

[00:04:34]
And that's because, if you look at that scale, sorry, that interplate red, yellow, blue as I mentioned before zero is a red and one is, the minimum is getting mapped to red and the maximum is getting mapped to blue. So there's a really easy fix that I learned where you just have to do dot reverse on your array, and that should take care of it.

[00:05:06]
And now you can see 100 is getting mapped to something mostly red and zero is getting mapped to something mostly blue. And indeed, if you look down here that's what you'll see. So I think what I want to stress is, while you are doing these exercises, console log every single step so that you can see what D3 is giving you back.

[00:05:36]
Actually the first thing to stress is yeah, console log every single step so you can kind of see what D3 is doing. And then, basically the user just, you get output from one thing and you're putting it into another thing to help you translate from that data into whatever you need to draw the SVG.

[00:05:54]
And the key thing is basically, for all of these calculations, it's what do you need to draw your SVG and how do you get there from your raw data. So that's the first thing. And a second thing is, I know I saw Madeline struggle a little bit with D3.map.

[00:06:13]
I'm going to talk about this more later on, but you don't need to use D3 for everything. If you're much more familiar with Vanilla Java Script, use that just use Java Script Map. If you're, for example, I tend to like using Lodash in terms of getting my data ready, use that.

[00:06:32]
Use whatever you're comfortable with. You don't need to use D3 for everything to do your visualizations. I'll even go ahead and cover later on what D3 is really, really good for and where it's not as good for and you can use other Java Script libraries or Vanilla Java Script to supplement that.