Extra credit

We talk about how to generalize our code, and change it so that we draw multiple histograms for different metrics.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To 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.

This video is available to students only
Unlock This Course

Get unlimited access to Fullstack D3 Masterclass with a single-time purchase.

Thumbnail for the \newline course Fullstack D3 Masterclass
  • [00:00 - 00:10] Alright, so this is our extra credit section. I know we already finished our chart, but let's kind of build on their knowledge a little bit.

    [00:11 - 00:31] So something you'll often have to do is if you're making a chart, you want it to be a little bit generic. So maybe we let the user choose the metric or we actually let's draw one hist ogram for each of the metrics that we have in our data set.

    [00:32 - 01:13] So if we go to the top and log out the first value in our data set, we can see, just expand this a little bit, there's a lot of metrics here and right now we're only looking at the humidity, so we have moon phase, precipitation intensity, the temperature metrics, dew point, humidity pressure, there's a lot going on here. So let's figure out how to make our chart code a little bit more generic so that we could create a histogram for any one of these metrics.

    [01:14 - 01:35] Now if we look at our checklist, let's figure out which of these steps will need to change in order to make this code a little bit more generic. So first we have we're accessing the data that's going to be the same because we have this one data set, although accessor function might be a little bit different.

    [01:36 - 01:58] The chart dimensions are will be the same, drawing the canvas will be the same, creating its scales, should be the same because we already have those accessor functions , drawing the data will be the same and drawing the peripherals will be the same except for that access label. So really we're not going to have to change that much code, which is great.

    [01:59 - 02:14] So we're not going to want to refetch the data set, but here let's create a function called draw histogram. Yeah, I like that.

    [02:15 - 02:32] And then this is going to take the label of the metric that we want to use and then we're going to define our function here. So right now we're using humidity as the metric.

    [02:33 - 02:50] Let's go ahead and change this to use whatever metric we send in. So let's go all the way to the bottom, none of this needs to change really sc oot this over an indent and then close our function.

    [02:51 - 02:59] And right now because we're not calling the function, we're just defining it, we're not going to see anything in our browser. So let's go ahead and call it.

    [03:00 - 03:11] So draw histogram and then we want to call it with the humidity, let's just use humidity for now to see what it looks like. There we go.

    [03:12 - 03:20] So it looks exactly the same, which is what we want. Let's switch it actually to moon phase to see how that changed.

    [03:21 - 03:46] So as you might expect, the moon goes through each phase in a cycle. So each of these values is going to be, have about the same count, just because it has to go through each phase one after the other.

    [03:47 - 03:57] One thing that we can realize that we're missing here is we're still seeing humidity and that's this label right here. So let's instead change this text to reflect the metric that we're passing in.

    [03:58 - 04:02] So here we're passing in moon phase. This is a great histogram.

    [04:03 - 04:19] We've completely changed our code to show this different metric. So now that we have this, let's go through many different metrics and draw a histogram for each of them just so we have them each drawn going down the page.

    [04:20 - 04:31] So there are a lot of metrics. Let's go ahead and grab a few of them and put them in metrics array.

    [04:32 - 04:43] So if we look at this data point, let's just grab a few. So we have, what's good?

    [04:44 - 04:52] So wind speed is a good one. We're already doing moon phase.

    [04:53 - 04:56] Two point. I already have an array over here.

    [04:57 - 05:13] I'm just going to copy and paste it, but you can see how you could look through this data point and just pick and choose whichever metrics you want to see a hist ogram of. So either copy and paste this code or go through it yourself and choose different metrics.

    [05:14 - 05:26] So here we have about nine metrics that we're going to go through. In order to create a chart for each one of these, let's grab this draw hist ogram call.

    [05:27 - 05:45] We want to say metrics for each and pass it the metric. And we could do it like this where we type draw histogram and pass it that metric.

    [05:46 - 06:02] As you can see, we're passing our function, the same primers that we're mapping over with metrics. So we could really replace this with just draw histogram, which is going to look exactly the same.

    [06:03 - 06:07] All right, so we're going through each of these metrics. And up first is wind speed.

    [06:08 - 06:15] And we're seeing moon phase and we're seeing dew point. And now I get a histogram for each one of these metrics.

    [06:16 - 06:41] So I hope you can see once you get the basics down for our chart, they're really easy to extend. This also hopefully drives home how important those accessor functions are because if I wanted to make this code a little bit more generic and I weren't using accessor functions, I'd have to go through basically every point that we're using our x successor.

    [06:42 - 06:57] So like here, here, here. Now there's only three points, but in the future when you're doing more complicated charts, you'll really have to go through each point individually and change humidity to metric or whatever you're doing.

    [06:58 - 07:14] So use accessor functions. They really keep your code more generalized and also help you with maintenance.

    [07:15 - 07:25] So one thing that also might be nice to talk about is the shapes of these distributions. So you can see they're very different from each other.

    [07:26 - 07:36] This moon phase is really flat, which makes sense because we know each one of them is going to show up equally. This wind speed metric is kind of skewed to the left.

    [07:37 - 08:07] So there's more values on the left than there are in the right and that right tail kind of shows that we're usually seeing low wind speeds, but there are a few days where it gets really windy. So humidity is almost a normal distribution where most of our points are lying in the middle and there are a few extremes, both lower and higher humidity.

    [08:08 - 08:22] And then our temperature of min is bimodal. So we're seeing a lot of values that are kind of colder around 35 degrees Fahrenheit and a lot of days are more in the 70s range.

    [08:23 - 08:34] And we're kind of seeing the effect of the seasons in, we're looking at New York City right. So it gets really cold in the winter.

    [08:35 - 08:54] It gets really hot in the summer and there's not many days that are kind of just mild temperatures around 50 degrees Fahrenheit. So just a quick glance at these histograms can give you a sense of how this metric changes over the year.

    [08:55 - 08:56] Histograms can be really useful for that kind of thing.