Creating Line Charts Solution

[00:00:00]
>> Shirley Wu: I want to quickly go through the example together. So we start out quite similarly to the last time around, because it's still the same skills that we're using. So let me really quickly write that out, d3.extent, and we pass in the data. And again, for the exposition, we're using the date.

[00:00:25]
And then I'm going to define xScale, scaleTime. So this should be exactly the same as before, oops, sorry. .domain, pass in xExtent, .range, and pass in from 0 to width. The y scale is where I'm going change it a little bit. Because while I was going around, I think we realized that the correct [LAUGH] way to do the y scale is actually to have the minimum be the minimum of the low temperatures and the maximum be the maximum of the high temperatures.

[00:01:03]
So this is a little bit of an edit to previously when we were doing the y scale. So let's do that together. So the max of the high temperatures, d3.max(data, and then d.high. And so this will give me just the value of right here. Just the value, 104, that's the highest temperature all year.

[00:01:34]
And then lowMin, d3.min(data,. And then this one, I want the minimum of the low temperatures, so then lowMin. And then that's 11 degrees, and that's the lowest temperature all year. And that way, I can map it such that it's const yScale is equal to d3.scaleLinear. So the scale linear, this time instead of using the min max of the high temperature, we'll use the lowMin and the highMax.

[00:02:12]
And this will probably be the most accurate way. And so we will map that lowMin, the 11 degrees, to the height, the bottom part. And we will map the highMax, that 104 degrees to 0, the highest point. So that's the one change from prior. We don't need a color scale this time around because we just need a red and a blue.

[00:02:47]
So,
>> Shirley Wu: We want to then return, right? We need to then create a line generator. So this is where it's the line generator that we talked about, the d3.line. And I saw a lot of people do two line generators, which make sense. Because you want a line generator that will access the high temperature for the y value.

[00:03:25]
And you want another line generator that accesses the low value for each of the temperatures. So,
>> Shirley Wu: I saw this going on where it's for the x. The x value of each of the points, the accessor is we do this. And so I want to talk about this a little bit more.

[00:03:59]
So this is basically saying, for each of the dates, translate that into an x value, and that's the x coordinate of that particular point for that data. And then, for the y,
>> Shirley Wu: We want to do a yScale. Because this is the high, we want to pass the high temperature into the yScale and return that.

[00:04:29]
And so if you put that,
>> Shirley Wu: Into an object, I think I called it path.
>> Shirley Wu: And then it would be highLine is a function, console.log(highLine) is a function like that, which means that if I pass in our data,
>> Shirley Wu: Oops.
>> Shirley Wu: It will give me back the string, this really, really, long string, of moveTos and lineTos.

[00:05:26]
And all of the x and y coordinates that it's drawing lines between. And you'll see down here that there's nothing because you'll also need a fill, so for the fill [LAUGH]. And then once you have the fill, it will draw the upper line.
>> Shirley Wu: And to do the lower one,

[00:05:52]
>> Shirley Wu: Another line generator. Actually, so I think a lot of people did another line generator, but I want to show you a different option. So let's do line. And then instead of setting the y accessor on here, I want to show you that you can actually do the line generator and then set the y accessor on that variable.

[00:06:25]
So line.y, and then give back yScale(d.high). So this modifies the line generator and tells it how to get the y position. And then because this whole thing gives you back a function, we can then pass in data to this whole thing. So that's how to read what's going on here.

[00:06:57]
And so as you can imagine, then the next thing that we can do is do the same thing, exact same thing, but for the low temperatures. So return a function that will use the dates for the x. And then use the low temperatures for the y, pass in the data, give it a fill.

[00:07:23]
>> Shirley Wu: And then that's the lower line. So you could either create two line generators or reuse the same one. Both work perfectly well. But I wanted to present that as an option. This one's quite straightforward after the bar chart one.
>> Shirley Wu: Just say line generator, but,
>> Shirley Wu: Hopefully the fact that you don't have to write this yourself is really nice.