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 ...