Adding the cloud cover bubbles

[00:00 - 00:10] Okay, we're almost done with drawing our data. The next thing we're going to do is draw this circle of gray circles around the edge of our circle.

[00:11 - 00:25] These are showing them out of cloud cover that every day got. Before we start drawing, we want to create our scale that determines the size of each one of these circles.

[00:26 - 00:45] We're basically going to make it so that a smaller circle means less cloud cover and a larger circle means more cloud cover. In our scale step, right here, we're going to create our cloud radius scale.

[00:46 - 01:05] Let's call it that. One important thing to note here is we would usually use a linear scale, but for circles, the area doesn't scale linearly.

[01:06 - 01:12] This inner circle, the radius is 100. For this outer circle, the radius is 200.

[01:13 - 01:31] If you're linearly scaling the radius, a 1 to 2 ratio for the radius isn't going to equal a 1 to 2 ratio for the area. This radius is twice as big as the first circle's radius, but the area is about 4 times as large.

[01:32 - 01:48] You're also going to notice this the way we perceive circle area. It's going to skew the scale so that bigger circles look a lot bigger than they should.

[01:49 - 01:56] What we want to do is we want to use a square root scale. We'll go into that in a second.

[01:57 - 02:12] This purple circle is what's actually twice as large when we're talking about volume. The radius is going from 100 to 141, but the area is actually twice as large.

[02:13 - 02:19] How do we get to a square root scale? The area of a circle is pi r squared.

[02:20 - 02:27] We kind of invert that. Basically we want to get this radius onto one side of the equation.

[02:28 - 02:41] We take the square root of the area and then we divide it by pi and then you're basically solving the equation for r. Since pi is a constant, we don't need to take that.

[02:42 - 02:59] We get the radius, we use a square root scale because the radius is about the square root of the area. All that to say, if you're creating a scale for a circle size, you want to use a square root instead of scale linear.

[03:00 - 03:11] For this scale, we need a domain and we need a range. For our domain, we want to grab the extent of cloud coverage.

[03:12 - 03:18] Data set, cloud, we have an accessory function. There we go, cloud accessory.

[03:19 - 03:34] For the range, let's say these circles should be anywhere from 1 to 10 radius. Now that we have our scale, if we go all the way down to the bottom, we get to draw these circles.

[03:35 - 03:51] Let's create our own group, cloud group. I'm just going to create a new g element and then we're going to decide how far out we want this ring to be.

[03:52 - 04:00] Let's go with 1.27. Kind of a magic number, but it's what makes sense for this chart.

[04:01 - 04:14] Cloud offset equals 1.27 and again, that's in units of the radius of our circle . Now we need to draw one circle for every day, really.

[04:15 - 04:24] Const cloud. I like to name these variables even if we're not necessarily going to use them just to keep my code really readable.

[04:25 - 04:36] In our group, we're going to select all circles similar to what we did with the UV lines up here. We're going to join them with our data set.

[04:37 - 04:43] We're going to set the data to our data set and then we're going to join them with a circle. All right.

[04:44 - 05:07] So each of these circles, they're going to have a radius from our cloud radius scale. So for our, I think we named it cloud radius scale and we basically just need to give that the cloud value from that data point.

[05:08 - 05:16] So we're going to use our cloud accessor for that data point. So we have a lot of circles just in the center here.

[05:17 - 05:30] Looks kind of like an angry eyeball and we want to set their position. So for circles, remember it's CX and it's CY because it's positioning based on the center of the circle.

[05:31 - 05:42] Remember, for rectangles, we position the top left, which is why it's X and Y, but for circles, we're positioned based on the center of the circle. So it doesn't really move around when the radius changes.

[05:43 - 06:01] So for this, we want to use something similar that we did from the lines. We're getting X from a data point and we want to use this cloud offset instead of the UV offset.

[06:02 - 06:10] And then we need to do the same thing for this CY, except we're getting the Y value from that data point. All right, great.

[06:11 - 06:19] So now we can see this black ring of circles all the way around. What we want to do is change the color.

[06:20 - 06:34] So let's give those a class. So attribute class, let's say cloud dot, and then over in our CSS file, we can use cloud dot.

[06:35 - 06:53] And I have this gray that I guess I haven't used yet, but C8D65. So we can make them this kind of nice gray cloudy color.

[06:54 - 07:23] And another thing that's nice when you have overlapping shapes is you can just change the opacity to let's go with 0.6 here, just so you can kind of see the overlap. Another really nice thing I like to do is you can use a blend and mix blend mode and do like multiply, which will really emphasize those overlaps.

[07:24 - 07:36] We're not going to use it on this chart just because it's not in the final example, but this is a trick I've used before for overlapping shapes just to show where they 're overlapping instead of having the overlap kind of hidden behind one of them.