This video is available to students only

Extra credit: adding a color scale

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

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

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:

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.

Let's make low cloud cover days be light blue and very cloudy days dark blue - that's a good semantic mapping.


This page is a preview of Fullstack D3 Masterclass

Start a new discussion. All notification go to the author.