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: "Extra credit: adding a color scale"
description: "We learn how to create a custom color scale, then we color our circles based on another metric: cloud cover."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/8t880bvia3
codeFolder: course/module_01/lesson_01.09/protected/code/02-making-a-scatterplot/end
---

# Extra credit: adding a color scale

<CodeSandboxEmbed
  src="//codesandbox.io/s/722iz?fontsize=14&hidenavigation=1&theme=dark&autoresize=1&module=/chart.js"
  style={{width: '100%', height: '35em'}}
/>

Remember when I said that we could introduce another metric? Let's bring in the amount of cloud cover for each day. In our dataset, each datapoint records the cloud cover for that day. Let's show how the amount of cloud cover varies based on humidity and dew point by adding a color scale.

![Our dataset](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_01/lesson_01.09/public/images/1-making-your-first-chart/dataset.png)

Looking at a value in our dataset, we can see that the amount of cloud cover exists at the key `cloudCover`. Let's add another data accessor function near the top of our file:

```javascript
const colorAccessor = d => d.cloudCover
```

Next up, let's create another scale at the bottom of our **Create scales** step.

So far, we've only looked at linear scales that convert numbers to other numbers. Scales can also convert a number into a color — we just need to replace the **domain** with a range of colors.

We learn how to create a custom color scale, then we color our circles based on another metric: cloud cover.