Adding the temperature area

[00:00 - 00:16] Okay, so next we want to create the area that shows the minimum and maximum temperature for every day. Previously we've used the d3.area function, but that really only takes an x and a y method.

[00:17 - 00:34] Instead we're going to use area radial, which is how we create these areas in the more radial format. So d3 area radial, and let's just give this a name, area generator.

[00:35 - 00:54] Remember we're going to create a generator function that will then return the path that we need. So instead of x and y, we're going to tell it three things, the angle, the inner radius, and the outer radius.

[00:55 - 01:13] So angle is kind of like how we've used x and y. It'll say here's the data point and return the angle that we, our data point, lies on. And then inner radius is how far from the middle the inside will be, and outer radius is how far from the middle the outside will be.

[01:14 - 01:31] So for the angle, remember that's going to be the date. So we want to use our angle scale, and then remember we were using our date accessor to grab the date from the data point.

[01:32 - 01:41] Alright, so that's angle. For inner and outer radius, we want to use the radius scale. Let's see. Yeah, radius scale.

[01:42 - 01:58] And for inner radius, we want to use the minimum temperature. So we have an accessor for that temperature min accessor, and then we pass in the data, the data point. And then for outer radius, it's the same thing, except we're using the max temperature.

[01:59 - 02:15] So to walk through this a little bit, for every data point, we grab the minimum or maximum temperature, and then turn that temperature into the radius. So just telling it how far from the center this line is going to be.

[02:16 - 02:30] Alright, so now that we have this generator, we can create our area string. And then for this, we need to create a path. So we're going to add it to our bounds, a pen's path.

[02:31 - 02:52] And for our path, we need to create that D string. Let's use double quotes. And then see that all we need to do is grab our area generator and pass it our data set.

[02:53 - 03:05] And there we go. So just to prove to ourselves that this is doing what we think it's doing. We're just lighting that out, and this is going to spit out the string that tells the path what shape to be.

[03:06 - 03:26] There you go. It's pretty long. I'm going to make that go away. Alright, so this is nice, but it can also be hard to tell to compare like how far away this point is from a point over here.

[03:27 - 03:41] So it's nice to have kind of a double encoding for a radial area. In our chart, we're using a gradient that is later in the center and gets darker as it goes out to the outside.

[03:42 - 03:53] So to do this, we're going to need to create a gradient. So in order to create a gradient in SVG, you can either create a linear gradient, SVG element, or a radial gradient SVG element.

[03:54 - 04:19] We're going to need a radial gradient element because it gets darker and progressive bands away from a certain point. A linear gradient is pretty much going to go from one point to another and either horizontally vertically or some other angle go from one color to another linearly, not kind of coming out from one point.

[04:20 - 04:43] So for example, if in our HTML, we had this kind of code. This is kind of the syntax that you would use for a gradient.

[04:44 - 05:00] So for each gradient, you'll have one element and then you'll have stop elements inside that gradient that have a color and an offset. And sometimes no pasty, but we want everything to be opaque right now.

[05:01 - 05:10] So this kind of gradient, you would use it by giving it an ID. So ID equals gradient.

[05:11 - 05:34] If we use this safe for circle, or let's do a rectangle with equals 100, high equals 50 or 40. The way we would use that gradient is we would say, either use it for the fill or the stroke and we would say the fill is URL and then hash and then the ID.

[05:35 - 05:55] So this gradient, this first color is kind of a cyan color. You can see that on the left, the middle is a yellow and the last one is kind of the smogenta color . And we have this diagram that says for every stop, they're going to be spaced based on the offset percent within the gradient.

[05:56 - 06:04] And then it's just going to interpolate in between these colors like so. And that's how you can make a gradient using SVG.

[06:05 - 06:09] So let's delete this example. We don't need that.

[06:10 - 06:16] And then go back to our JavaScript. And to create a gradient, I usually make it in a Deafs element.

[06:17 - 06:31] Deafs is short for definitions and anything you put in the Deafs element isn't going to show up, but you can use it in other places. So it's really nice to define a gradient within a Deafs because you kind of know where it is.

[06:32 - 06:51] So up at the bottom of our third step for drawing our canvas, let's just create a Deafs element. So Deafs is wrapper, a pen, Deafs, and we don't want this in our bounds because it's just kind of this general element we can use.

[06:52 - 07:02] Let's give it an ID. And this way we can just grab it in both places so we know it'll be the same thing.

[07:03 - 07:20] And then what we want to do is create that gradient gradient. So in our Deafs, we're going to add a radial gradient.

[07:21 - 07:24] We can't spell. There we go, gradient.

[07:25 - 07:41] And let's give it that ID. And then we want to add the stop elements within our gradient, radial gradient element.

[07:42 - 08:07] So we can work a few different ways. We can either hard code them or what we want is kind of a smooth interpolation between this color, the middle color and the outer color. First, we'll probably need to create that gradient scale.

[08:08 - 08:21] So what we want to do is create a scale that goes in between yellow, then red, and then a darker red. And we can actually use one of the built-in D3 scales.

[08:22 - 08:32] So first, let's create that scale. It's called gradient color scale. And then we can just use D3 interpolate.

[08:33 - 08:50] I think it's red, yellow, orange, red. And then what we can do is we can either grab some ticks from here or we can go through a certain number of stops.

[08:51 - 09:07] Let's say we went about 10 stops and we think this is going to give us a very accurate gradient. With this kind of scale, if you have too few stops, it's only going to interpol ate between maybe the beginning color and the end color.

[09:08 - 09:20] And it's not going to accurately represent all of the colors that this scale goes through. And what we can do here is D3.range and then go through those number of stops.

[09:21 - 09:34] And then for each number in that range, let's just call it I. We're going to create a stop. So gradient, a pen stop.

[09:35 - 09:44] And we're going to give it an offset. Remember, our stops have an offset and a color. So first let's do the offset.

[09:45 - 09:57] And then what we want to do here is you basically want to interpolate between 0 % and 100%. Depending on half our line that stop number is.

[09:58 - 10:21] We want this to be a percent. So it's going to be a number and then a percent sign. So say there's two stops for 0, it's going to be 0 and for 1, it's going to be 1 divided by 1, which will be 100.

[10:22 - 10:30] Or it'll actually be 1. So we want this to be out of 100. So then we'll also want to multiply it by 100. And then the next thing we want to do is set the color.

[10:31 - 10:48] So I think stop color. And then we want to use our color scale. And it's going to be the way these color scales work is they go from 0 to 1.

[10:49 - 11:04] So it's going to be similar to what we did up here except we want it to be out of 1, out of 100. Alright, so now that we have our gradient, let's go ahead and see if it works.

[11:05 - 11:15] Let's grab this gradient ID. Go all the way down to the bottom where we have our area and then set that fill color.

[11:16 - 11:34] And let's see, let's use a CSS style. The difference between using an attribute fill or a style fill just has to do with inheritance.

[11:35 - 11:59] If you set a fill in an external CSS file with say you're targeting a certain class and you set the style with a CSS property in an external CSS file like our styles at CSS, it's going to override anything set with a fill attribute. But it won't override anything set with a CSS style.

[12:00 - 12:14] So that's just how I differentiate between using one or the other. It normally doesn't matter. Alright, so for the fill we want it to be URL hash and then that gradient ID.

[12:15 - 12:26] Like so. Alright, so there we go. We can see that our gradient goes from yellow to orange to kind of a red brownish color.

[12:27 - 12:40] And you can also play with different built in D3 color skills here or your own custom ones. So a blue is going to look like this or there's some really fun ones in here.

[12:41 - 12:54] But the yellow orange red kind of makes sense here just because we associate red or warmer colors with a hotter temperature. So that's what I'm going with. You don't have to do the same.