Color Scales

Let’s talk about color scales. Up until now, we have been using custom colors. We did not receive assistance with colors by D3. If you are not that great at picking colors, you may be tempted to search for color schemes online. That is one viable solution. However, D3 comes with color schemes we can use with our charts.

There is a package called D3 Scale Chromatic. You can find it here: https://github.com/d3/d3-scale-chromatic

This package will contain a list of color schemes readily available. We do not need to do anything to include it in our project. It is already included with the core of D3.

If you scroll around the page, you will find dozens of color schemes. The color schemes are placed into three categories, which are categorical, diverging, and sequential. Let’s explore each of them.

Categorical colors

The first category is called categorical. Color schemes under this category vary in colors.

Categorical

# d3.schemeCategory10 <>

An array of ten categorical colors represented as RGB hexadecimal strings.

# d3.schemeAccent <>

An array of eight categorical colors represented as RGB hexadecimal strings.

# d3.schemeDark2 <>

As you can see, each color scheme is vastly different from the next one. These color schemes are assigned under a property name. We can freely access any of the color schemes directly on the d3 object. For example, the first color set can be accessed via the d3.schemeCategory10 property.

This property will return an array of colors. The number of items in the array depends on the color scheme we are using. That is about it when it comes to categorical color schemes. They are properties that contain an array of colors.

Diverging colors

Let’s explore the next category of color schemes. The next category is called diverging color schemes.

Diverging

Diverging color schemes are available as continuous interpolators (often used with d3.scaleSequential) and as discrete schemes (often used with d3.scaleOrdinal). Each discrete scheme, such as d3.schemeBrBG, is represented as an array of arrays of hexadecimal color strings. The kth element of this array contains the color scheme of size k. For example, d3.schemeBrBG[9] contains an array of nine strings representing the nine colors of the brown-blue-green diverging color scheme. Diverging color schemes support a size k ranging from 3 to 11.

# d3.interpolateBrBG(t) <>
# d3.schemeBrBG[k]

Given a number t in the range [0,1], returns the corresponding color from the “BrBG” diverging color scheme represented as an RGB string.

# d3.interpolatePRGn(t) <>
# d3.schemePRGn[k]

Given a number t in the range [0,1], returns the corresponding color from the “PRGn” diverging color scheme represented as an RGB string.

# d3.interpolatePiYG(t) <>
# d3.schemePiYG[k]

Given a number t in the range [0,1], returns the corresponding color from the “PiYG” diverging color scheme represented as an RGB string.

If we look at the examples, we can see how diverging color schemes work. Each scheme contains two different colors on either end. Both colors transition slowly into each other. Unlike categorical schemes, diverging colors have an almost unlimited number of colors accessible via the scale.

There are two ways we can access a color from the scheme. If we look above any of the schemes, D3 will provide us with two options. The first option is a function called interpolate followed by the name of the color scheme. Each scheme has an interpolate function.

The interpolate function has one parameter called t. The t parameter can be a number between 0 and 1. 0 will give you the color on the left side of the scale. 1 will give you the color on the right side of the scale. Everything in between will give you a color somewhere in the transition.

Let’s try using one of these schemes. For this demonstration, we will use the d3.interpolateRdYlGn() function.