Adding the precipitation bubbles

[00:00 - 00:27] Okay, so our last data that we need to draw is this ring of precipitation both type and probability. We can see we have a blue for rain, a darker gray for sleet, and a lighter gray for snow, so you can kind of see that we're getting rain pretty much year round in New York City, except for a few snowy days and sleety days in the winter.

[00:28 - 00:39] So this is going to look very similar to what we just did with the cloud cover. So first we need to create our scale.

[00:40 - 00:51] So it's going to look actually very similar, so let's just copy and paste it. We're going to name it precipitation radius scale.

[00:52 - 01:04] So instead of our cloud accessor, we want to use our precipitation probability accessor. So it's size based on the probability of precipitation.

[01:05 - 01:13] Let's maybe make these a little bit smaller, so one to eight. And then we also need a scale for the color of the dot.

[01:14 - 01:25] So there's three colors. And what we want to do is because this is an ordinal metric, remember in the last module, we talked about different types of metrics.

[01:26 - 01:32] An ordinal. There's kind of an order to this, mostly is in the middle of rain and snow.

[01:33 - 01:45] So let's go ahead and create an ordinal scale. So let's call it precipitation type color scale, and then use d3.scale ordinal.

[01:46 - 02:02] And basically we have a set of types. And let's just define those up here.

[02:03 - 02:14] We could make this a few ways. We could map over our data set, return the types and add them to a set so they 're unique, and maybe turn them back into an array.

[02:15 - 02:23] I already know what they are, and I want to keep this order, so let's just list them out. So it's rain, sleet, and snow.

[02:24 - 02:38] So that's the domain, and then the range is going to be, there's three colors that I've also already picked out for this, but feel free to use whatever makes the most sense to you. So the first one is five, three, a zero, ff.

[02:39 - 02:50] That's that blueish color. And there's two more, it's this darker gray color, so six, three, six, e, seven , two.

[02:51 - 03:04] And then the last one is going to be, B2, B, e, c, three. And these are colors that I've kind of put around with after making this chart.

[03:05 - 03:15] So if you're in the middle of something, don't worry about colors, work on them at the end. So now that we have our skills, we can go all the way onto the bottom of our draw data step.

[03:16 - 03:29] And it's actually going to look very similar to this, so let's copy and paste and then edit, just to save some time. So instead of a cloud group, we're going to want to create a precipitation group.

[03:30 - 03:45] And so out of cloud offset, we'll create a precipitation offset and let's bring this in a little bit, maybe around 1.14. And then instead of cloud dots, we're going to do precipitation dots.

[03:46 - 03:59] And we want to add them to this group, not our cloud group. We still want a new circle for every single one, and we want to use this smaller offset, so our ring is just inside our cloud group.

[04:00 - 04:11] So they're already showing up, which is great. One thing is we want to use this precipitation radio scale, because they're a little bit smaller.

[04:12 - 04:18] And the domain's a little bit different. Let's see, what did I call it?

[04:19 - 04:28] Precipitation. Radio scale, I just spelled it wrong.

[04:29 - 04:36] And we want to use our precipitation accessor. Precipit.

[04:37 - 04:41] What did I call it? Precipitation accessor.

[04:42 - 04:47] Oh, right. So for the radius, we want the probability. So it's just the probability accessor.

[04:48 - 04:57] And then we're already seeing it's differentiating itself a little bit. So it goes all the way to zero if it's zero chance or precipitation.

[04:58 - 05:15] And then the last thing we need to do is we probably don't even need this, because we'll want to set the style right in here. And for that fill, we're going to be using that precipitation type color scale.

[05:16 - 05:32] And then here we're just going to grab that precipitation type. So we're going to grab that type accessor and pass it that data point.

[05:33 - 05:48] Okay, awesome. So another thing here is we are kind of losing them a little bit . So let's do the same thing as we did with the cloud dots.

[05:49 - 06:03] So attribute class. So the expectation dot just copy and paste that to our CSS file.

[06:04 - 06:13] And let's set the opacity to something. Opacity is something a little bit more transparent.

[06:14 - 06:23] So about half opacity. So that's looking a lot like our finished chart where the only thing that is different is we're getting these dots.

[06:24 - 06:34] For days that maybe don't have any precipitation. Let's see what we could be doing here.

[06:35 - 06:49] Maybe first let's go back up to our scale and see if we want it to go all the way down to zero. Yeah, I think that's a little bit nicer.

[06:50 - 06:58] So we're not getting dots for days where there is a very small or zero chance of precipitation. Let's just double check.

[06:59 - 07:18] Let's see what the smallest percent chances I bet it's zero. Oh wait it's a lot of console logs.

[07:19 - 07:29] So it goes from zero to one. So in this case it kind of makes sense for our radius scale to zard at zero because there's zero chance of precipitation.

[07:30 - 07:34] So maybe we shouldn't have a dot at all.