Adding freezing
To ease into our drawing data step, let's start by adding a circle that shows what temperatures are below freezing.
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:14] Okay, so up next we're gonna kind of ease into the drawing the data step. So if we look at our final chart, the easiest thing is to draw this circle on the inside that denotes where the freezing temperatures are.
[00:15 - 00:35] So in here under a drawn data set, we're gonna basically just append a circle to our bounds. So freezing circle and circle, very explicit here.
[00:36 - 00:42] And we're gonna add a circle. And what we need to find is the radius of that circle.
[00:43 - 00:53] So remember we have this radius scale that we defined all the way up here. And it's our data set is in Fahrenheit.
[00:54 - 01:11] So we're gonna use our radius scale and we're gonna pass in 32, which is the temperature which things freeze or water freezes. And then let's also give it a class so we can style it.
[01:12 - 01:20] Freezing circle. And then if we go to our CSS file, let's add a new rule.
[01:21 - 01:30] We have this fill that I've decided on before. It's just this hex value.
[01:31 - 01:36] So kind of like a freezing cyan. And then let's bump down the opacity a little bit.
[01:37 - 01:41] So it's not obscuring our grid lines. Point one five works for me.
[01:42 - 01:53] So it's there, but it's not kind of taking all of the attention that cyan is a pretty bright color. So dimming in, letting those grid lines come through, I think is really nice.
[01:54 - 02:06] And also remember with these colors, you can just have placeholders for now and then update them in the future. Once everything is in, just whatever works best for you.
[02:07 - 02:14] And don't get hung up when you're working on a chart on what the colors are because you're probably gonna change them at the ends when everything's in place anyway .