Making a Bar Chart
Next, we embark on a mission to create a slightly more complex chart: a bar chart. We talk about what we can learn from a bar chart, and what a histogram is.
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.
Get unlimited access to Fullstack D3 Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:14] All right, so we're going to make one more chart. And this is just to keep familiarizing ourselves with the steps that go into making a chart and to learn a few more concepts that will come in handy in the future when making different types of charts.
[00:15 - 00:30] So the last chart we made was a scatter plot and that was to compare one metric to another metric and look at the relationship in between them. But there are some other questions we can ask for a data set that have to do with only a single metric.
[00:31 - 00:41] So if we're looking at say humidity, how does humidity vary? Are there many types of humanities that we can go through?
[00:42 - 00:53] Does New York City only center around when humidity value? Are there really only dry days and humid days with nothing really in between?
[00:54 - 01:10] So let's take a look at our scatter plot and see how we might look at this question with this chart type. So we have humidity on the Y-axis here and we can kind of see how far up each of our dots are.
[01:11 - 01:23] So if you look closely, you might be able to see like the dots are a little bit sparser on the bottom here. So we might have a few really dry days, but not many.
[01:24 - 01:36] And then much more humid days, but it's really hard to tell where these dots are falling on that Y-axis. So instead, now we're gonna make a histogram.
[01:37 - 01:50] So let's pull up our diagram. A histogram is a bar chart where the X-axis, horizontal, is showing the different values for that one metric.
[01:51 - 02:00] And we're gonna be making a histogram of humidity. So these values on the X-axis are going from the lowest humidity on the left to the highest humidity on the right.
[02:01 - 02:12] And the Y-axis, instead of being another metric, it's showing you how many values are falling within each of these bins. So let's look at what this might look like for humidity.
[02:13 - 02:21] So you can see our different humidity values on the bottom here. And then each of these rectangles has a number on top.
[02:22 - 02:34] That is the number of days that fall into that humidity bracket. So here we can see that there were 14 days that were between 0.4 and 0.45 units of humidity.
[02:35 - 02:47] And there are a few things that are configurable for a histogram. There's of course the peripherals, do you label each of these bars?
[02:48 - 02:57] Do you have a line that shows where the mean is? And one of the biggest ones is how many bins am I drawing for my histogram?
[02:58 - 03:06] We could basically draw one rectangle for every value. Maybe there's 100 different levels of humidity that our days fall into.
[03:07 - 03:27] Maybe we could have 100 different rectangles, but if you could imagine that would be really noisy and kind of hard to pick out bigger patterns. So this is kind of something to play with is how many bins is gonna show me the general pattern without obscuring it or detracting from it.
[03:28 - 03:30] Yeah, super exciting, let's dig in.