Getting set up

[00:00 - 00:29] Okay, so now we're ready to dig right in. If you look at the code, we've already done a few of these steps, just because we should be really familiar with them for now, and they're pretty similar across charts. So first we're grabbing our dataset, then we're creating our chart dimensions, and we have a square chart. We also have this new radius just stored in our dimensions for easy access.

[00:30 - 00:51] This is going to be the radius of a circle starting from the center, all the way to the edge of the chart. And then we're drawing our canvas, so we have our wrapper container and our bounds group that shifted for our left and top margins. And if we look, we have about 120 pixels for all the sides of our chart.

[00:52 - 01:08] So first, let's just look at our dataset. Because we're going to want to create those data accessors for all the different metrics that we're going to be using in this chart. So, first, let's look at our chart.

[01:09 - 01:33] We're going to need temperature min, temperature max, cloud cover, precipitation type, precipitation volume, and UV index. Alright, so let's get started. So first, let's start with temperature min, temperature min accessor.

[01:34 - 01:52] And then we're just going to make a function that's going to return the minimum temperature, so we can find that here, temperature min. And we're going to repeat this for all of the different metrics that we're going to be using with this chart.

[01:53 - 02:12] Maybe it's easier just to copy and paste. So we're also going to want the maximum temperature. We're going to want the UV index. So UV accessor. Let's look in our log. So that's UV index.

[02:13 - 02:37] Next, we're going to want precipitation probabilities. So we're going to want that for days circles, and that's going to determine how big that circle is. Precipitation probability. So long variable name. If we look in here, let's see .

[02:38 - 02:50] Percip probability. Alright, next precipitation type. So we get the color for those circles.

[02:51 - 03:14] And I think it's just precip type. Let's double check though. I bet it's in here somewhere.

[03:15 - 03:30] Maybe we don't have it for this first day. Let's see if we can log it out.

[03:31 - 03:42] Is it not every single day? There we go. Okay, so it doesn't exist for every single day, but it does exist.

[03:43 - 03:52] So let's throw it in there. Next, and we're almost done with them. We want our cloud cover.

[03:53 - 04:08] If we look at this one, we can find cloud cover. And the last thing we want is the date. So we want to get the angle around that circle.

[04:09 - 04:31] So we want a date accessor. And if we remember, we're going to use this date string, but we're going to want to parse it into a JavaScript date time object. So you can add a date parser function, which just uses d3.time parse.

[04:32 - 04:43] And then we have to pass in a string that is analogous so it knows what format it's in. So we're using the year, then the month, then the day.

[04:44 - 04:55] And we want to wrap that accessor so we're returning an object and not a string . And we don't need these two. All right, so now we have all of our accessors.

[04:56 - 05:16] And this is going to be really helpful as we're going through and also if the data changes in the future, if the data structure changes, then we're only going to have to change it in this one place. And we know what the structure used to be. And we can just change it up here to maybe cloud cover changes to cloudiness.

[05:17 - 05:29] And that'll be a really easy change. All right. And the other thing I wanted to do here is go down to our create scales function. Create scales section. This is the fourth step.

[05:30 - 05:43] So looking at this, the first skill that comes to mind is we're going to want to change the date into the angle around the circle. And we're going to need this for pretty much every element on our chart.

[05:44 - 05:56] So it's going to take a date. We're going to use our date accessor. And it's going to spit out an angle. And we can either use degrees or radians.

[05:57 - 06:09] So let's go in here. Let's make an angle scale. We're going to want a time scale. So scale time. It's going to take a domain and also a range.

[06:10 - 06:26] So for our domain, we want to say it's anywhere between the start and date for our data set. D3 extent. We're going to grab our data set and pass our date accessor.

[06:27 - 06:45] So this will go through every item in that data set and return the date time object and then spit out an array of the first and the last date. And then for the range, we want to go from, you can either do degrees. So that 's zero to three sixty. Let's use radians.

[06:46 - 06:59] Sometimes it's a little bit easier to do calculations with and radians go from zero to two pie. So our math object, which is just always exists within web browsers.

[07:00 - 07:16] It has a pie key, which is just 3.14 plus all those decimal places. So it's pie times two. All right. So now we're all set up and we're ready to dig in and start drawing stuff to our chart.