Adding the UV index marks
We add marks to show which days are above a certain UV index threshold.
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Fullstack D3 Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
[00:00 - 00:15] Okay, so the next data that we're going to draw is these UV index lines over here. And we're basically saying these are days with a high UV index.
[00:16 - 00:32] What that threshold is is going to depend on the subject matter, use your subject matter expert use to decide certain thresholds. I chose UV index over 8 because there's only 20 or so days where it's over that number.
[00:33 - 00:52] So it seems meaningful for this area, but really for your own charts, think through where's the threshold that's going to mean something to our readers just so we can highlight those points. So let's go ahead and just save that threshold so we can set it or change it in one place.
[00:53 - 01:02] So UV index threshold, set that to 8. We also want these to be within their own group.
[01:03 - 01:16] So if we're debugging and looking in the HTML for our page, it's a little bit easier to read. And also if we need to move them or modify them in some way, it's nice to have them kind of encapsulated in their own group.
[01:17 - 01:34] So we're going to create a UV group and we're just going to add a G element to our bounds. And then the last thing I'm going to do is decide how close to the edge of the circle do we want these to be.
[01:35 - 01:54] And in our finished example, they're sitting kind of across the edge of that circle, which is kind of nice because it keeps us out of the way of the line, but it's not too far away. So let's set the UV, oh my goodness, UV offset to about 0.95.
[01:55 - 02:10] And we can always change this later, but this is in units of one radius for the chart. All right, so now what we want to do is draw one line for each day that's over this UV index threshold threshold.
[02:11 - 02:31] So we're going to create high UV days and then basically we're going to use a data bind. So we're going to grab this group and then we're going to select all lines.
[02:32 - 02:51] This is another reason having a group is really nice is we can do a data bind and have kind of a marginary selector so that we're not selecting other lines that are in the chart. All right, so for the data here, we let's first do it with our whole data set and see how that looks.
[02:52 - 02:56] And then we're going to join it with a line. We want to create lines for these.
[02:57 - 03:10] And then for our lines, we can use these utility functions we created before planning ahead. So get x from data point and get y from data point.
[03:11 - 03:34] So what we want is to set the x1, x2, y1, and y2, which is set ourselves up here. And so this is x1, y1 is going to be the start of the line, x2, y2 is going to be the end of the line.
[03:35 - 03:56] So you can use our get x from data point, pass the data point for that individual point and then we're going to pass that UV offset to say this is how far from the center I want it to be. And this is basically what we're going to do for all of them.
[03:57 - 04:09] For the y's, we want to get y instead of x. And then for the second point, we want this offset to move a little bit further out.
[04:10 - 04:16] So let's just add 0.1 to both of these. So these aren't showing up.
[04:17 - 04:41] Let's give them a class of UV line and then let's go over to our styles UV line and give it a stroke of... go ahead and use whatever colors that you want. I'm going to go with this color I've used before.
[04:42 - 04:46] It's kind of a nice yellow. And then we need a stroke width.
[04:47 - 04:53] Let's do two. All right, let's see what's going on here.
[04:54 - 05:03] So we should be seeing those lines. We're not using this yet.
[05:04 - 05:29] We're grabbing all of our lines, joining them with their data set, doing a data bind to create a new element called a line, giving it a class of UV line and then adding, specifying the beginning and end for these. So let's open up our console.
[05:30 - 05:42] We're going to do some live debugging here and see what is going... what are we currently drawing? We should also check if we have any errors right now.
[05:43 - 05:57] So they should be... just select our area because we're drawing them right after that. So underneath this we should have this group and within the group we have all of these lines.
[05:58 - 06:08] Oh, right, because we're using... this isn't a pen, this should be attribute. We're just appending new elements in here.
[06:09 - 06:18] That was kind of fun. That's cool, it's like a fun lemon.
[06:19 - 06:26] But now we want... okay, so what is going on here? We kind of have one line for every day.
[06:27 - 06:43] We also have them squished because another typo because we need to add that 0.1 to this offset. So now what we're doing is we're adding that UV line to every single day, but every single day isn't over our threshold.
[06:44 - 07:11] So what we can do is filter our dataset so that we're only using data points that are above this threshold. So we need our UV accessor and we only want them if our UV value is over this ... so many typos over this UV index threshold.
[07:12 - 07:28] All right, so let's double check that this is returning anything. In our console over here.
[07:29 - 07:36] Okay, so that's not returning anything. So let's double check what our UV accessor is grabbing.
[07:37 - 07:40] Another... it's the same typo. All right, great.
[07:41 - 07:54] So now we're grabbing all of our data points that are above this threshold. We're creating a line and we're giving that line a class so we can set the stroke color and width.
[07:55 - 08:15] And then we're drawing the line from at that angle right before that end of our circle to a point right outside the end of our circle. So they're kind of radio extruding from the center, which is a really nice style.
[08:16 - 08:25] I think it looks great. So up next we only have two other data elements yet through the precipitation ring and the cloud cover ring.