Charts communicate ideas with simplicity, clarity, and detail.

Once you're comfortable with D3 you can quickly:

* understand key metrics at a glance
* catch anomalies (before they turn into problems)
* give key insights to your customers
* and impress your boss and co-workers

Today, I will show you the exact methods I use to create beautiful, understandable data visualizations using D3.

The Fullstack D3 masterclass is the complete guide to D3. With dozens of code examples showing each step, you will gain new insights into your data by creating visualizations in this self-paced online course.

Fullstack D3 Masterclass

---
title: "Ways to visualize a metric"
description: "We talk about the different ways to visualize a single metric, and how to combine that with the different data types."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/e51ykwj1h7
---

# Ways to visualize a metric

Now that we understand the metrics that we're working with, we need to decide how to represent them visually. Keep in mind that we, as humans, are able to judge some dimensions more quickly or precisely than others.

Let's go through some possible ways we could represent **temperature**, as an example.

### Size

![dimension - size](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_05/lesson_05.02/public/images/7-data-visualization-design/dimension-size.png)

We could represent **temperature** by sizing an element: larger for higher temperatures and smaller for lower temperatures. We could also scale just the height or the width — when making our histograms, we created taller bars for higher numbers.

Humans are very fast and precise at perceiving size differences (especially height or width) between objects, making it a good choice when the exact differences matter.

### Position

![dimension - position](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_05/lesson_05.02/public/images/7-data-visualization-design/dimension-position.png)

We could represent **temperature** by moving an element: horizontally, vertically, even diagonally. For example, we could make a scatter plot with lower temperatures to the left and higher temperatures to the right.

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