Ways to visualize a metric

We talk about the different ways to visualize a single metric, and how to combine that with the different data types.

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, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Fullstack D3 Masterclass
  • [00:00 - 00:21] So now that we've talked about how to identify the different types of data that we have, let's talk a little bit about how to visualize the specific metrics. So for an individual metric within a dataset, say the temperature for a specific date, we can choose to visualize it in a number of different ways.

    [00:22 - 00:56] One way is size, so say we had a rectangle for every day, we can have it taller for a larger number for a smaller, for a lower temperature or if it were a circle, we can increase the radius for a more humid day and decrease it for a less humid day. Another option is position, which is a little bit similar to size, but instead of changing the size of an element, we move it left or right for a smaller, larger value.

    [00:57 - 01:17] We can move it up and down, we can move it on a diagonal. Just however we can visualize it so that when a person looks at our chart, they can figure out that, oh, this dot is really far to the right, that means it's very humid, and we just keep that consistent within the whole chart.

    [01:18 - 01:59] Both size and position are pretty easy for us as our visual systems to compare, so if you need to, as someone looking at the chart, if they need to make very precise comparisons of different values, then using position or size is a really good choice there. Another dimension that you could play with is color, so say you were making a scatterplot and you made less humid values, a reddish color, and more humid values, a bluish color.

    [02:00 - 02:11] There's a lot of different ways we can play with color. On top here, we have more of like a multi-hue scale, where it goes from red to yellow to green to blue.

    [02:12 - 02:33] The second one is what's called a diverging color scale, so it has kind of this neutral color in the middle, and then all the on the left, it turns red, or all the way on the right, it turns blue. This is really good for datasets where there's kind of the central value, and you want to highlight things that are very different, either in the negative or positive direction.

    [02:34 - 03:01] It's also really nice for qualitative data where you can just have buckets, so anywhere from two to around five or six colors are really good for showing what category something falls into. I also wanted to kind of look at the charts that we made so far and talk about how those dimensions come into play for these charts.

    [03:02 - 03:21] So for our line chart, we have a line, and you can see the line changes its position based on the maximum temperature for each day. We also have a position encoding for the x-axis, which is the date, but we haven't changed the size of the line or the color of the line.

    [03:22 - 03:55] For our scatter plot, we're playing with a similar thing where we have a vertical y-position for the humidity and a horizontal x-position for the dew point. We can also try to add a third metric by playing with a different size for these circles or a different color, so if we wanted to add the date to see how it changes over time, we could try to add that as either a color or changing the size, maybe increasing them as the date gets a little bit later in the year.

    [03:56 - 04:37] And then the last one is our histogram, where we're kind of messing with both size and position, where these bars are horizontally arranged based on the bucket for 0.6 to 0.65 humidity, and then the size of the bar for how many days fall within that bucket. So when you're going through your dataset, single out the metrics that are the most important to you, you don't really want to cram all of the data into one single chart.

    [04:38 - 04:48] It's better to spread them across different charts and really focus on two to three metrics and think through what dimensions can I visualize these metrics in?