Radial Chart Solution

[00:00:00]
>> Shirley Wu: So let's go through this together.
>> Shirley Wu: I think there might have been a little bit of confusion, so let's do it. So, this time around the scales, we don't need a time scale anymore because if you notice there's no x-axis, there's only angles and radius. So, we're going to have a radius scale, and this is basically gonna be the same exact thing as when we had the scale linear before.

[00:00:35]
And for this one we're going to map the low and high temperatures. So for this one let's do d3scalelinear, again, that's scalelinear and then I saw this I liked this, I saw this I thought this was really nice. So let's pass in an array and then here we'll have D3 min.

[00:01:01]
So the min value is, again, the data and then the accessor is d.lowtemperature. And then the max is dated and then d.hightemperature. And then the range,
>> Shirley Wu: Is basically whatever you want the radius to be. And so for me what I'm gonna do is, I'm going to just make it half this width of the screen, that's what I'm gonna make the maximum radius.

[00:01:38]
So, I'll just put that as width divided by two. And again, if I console.log that radius scale. I am in zero degrees. Let's see, is because there is no zero degrees, so it's gonna be a negative number, we don't want negative numbers. So I think, let's do 20, 20 degrees is going to be a radius of 31.

[00:02:04]
And then I think the maximum, it was 104, and that's going to be 325. Think the minimum is 11 so that's going to be zero. So these are going to be our radius that we're going to use to calculate the inner and outer radius. And we talked a little bit before about using the per slice angle.

[00:02:27]
So, what do we want to do? Let's only calculate it for just the first slice to start out with. So let's just say, temporarily, let's just do something, and we need to actually make the arc generator.
>> Shirley Wu: So let's do that.
>> Shirley Wu: And all we need to do for that is declare d3.arc().

[00:03:00]
>> Shirley Wu: That's the very basic, if we don't pass in settings or anything, so we can just start with that. And let's just generate the,
>> Shirley Wu: Path string for the first, the very first date. So, what the arc generator takes is an object. And in this startangle and so will make that the basically origin on the zeroith index times per slice angle.

[00:03:50]
And then end angle for that first one would be 0 + 1 * persliceAngle. We need an inner radius, so lets get the first thing out of the data. And then the inner radius is low. But then we also have to translate that raw data into screen space, into the radius we want.

[00:04:18]
And then the outer radius is, we'll translate it into radiance or .sorry radius. And we want the high temperature of the very first data. And if we console.log the path string, this is what it looks like. So, I think the confusion might happen because in that example I had, in this example I had, I set the inner radius and outer radius.

[00:04:58]
And I asked for the start angle and end angle to be the start angle and end angle of the data I pass in. But we could just as easily just pass in an object that has all of this to our angle and angle inner radius and outer radius already calculated.

[00:05:22]
And then, the arc generator
>> Shirley Wu: Will just know what to do with it. So this is actually the easiest way to do it. But if you want to see it done the other way, we can go through that too. But this is the way that I recommend. Just pass in an object with all of the settings that the arcGenerator requires.

[00:05:48]
So if we think about that we can extrapolate that. If we think about this we can extrapolate this to each of the dates. So we can do data.map and then for each of the slices we want to get both the data itself as well as and the index of that data.

[00:06:12]
I want to calculate the path for each of them. And so the start angle is, the index times per slice angle, an angle is index plus one times per slice angle. And the inner radius is the low temperature translated into radius and the outer radius is the high temperature translated into the radius.

[00:06:52]
And so if we then console.log this, we should be seeing over here 365 path strings.
>> Shirley Wu: Yes.
>> Shirley Wu: And so these are all the path strings. And so that's the first part of what we need. to return that path and the other part is the color. Let's do this first.

[00:07:24]
So if we just get back the path we'll see all of these slices except black.
>> Shirley Wu: And then let's really quickly go through and create the colorScale again because that's the exact same as what we've done before. The colorSequential and the domain is d3.extent. I'm passing data, and then use the average temperature, and the range, sorry, and then for the sequential, I have to use interpolator, and then, am I going to be able to remember this off the top of my head?

[00:08:07]
Red, yellow, blue. Hopefully, this is it. So that's the same as our bar chart example. And for the fill, I just say colorScale D dot average. Sorry. Scale sequential. Sorry. Up here I accidentally said "colorSequential". I meant "scaleSequential." And then that should have worked. This is what it ends up looking like.

[00:08:42]
And for all of these exercises and it's not as important for you to know exactly how d3 land works or d3 arc works that and my hope is in. My goal isn't for you to like memorize how I knew this work that's with documentation is for. And if you had a chance to look at the documentation, it's really quite extensive and detail.

[00:09:07]
My goal is primarily to just show you how easy it is to get. I get these shapes that when SVG looks really complicated, but the goal is to make it. the goal is to show you how easy D3 makes it and that's really what I love about D3.