This video is available to students only

Color scales

Choosing colors is one of the hardest parts of designing a data visualization! We talk about the three main types of color scales, and related functions that are built into d3.

Colors#

One of the hardest parts of creating charts is choosing colors. The wrong colors can make a chart unappealing, ineffective, and, worst of all, impossible to read. This section will give you a good framework for choosing colors, important facts about human perception, and simple tips.

Color scales#

When choosing a color scale, you first want to identify its purpose. Going back to what we know about data types, there are three basic use cases:

  1. Representing a category

  2. Representing a continuous metric

  3. Representing a diverging metric

Let's dive deeper into each of these.

1. Representing a category#

The first two data types we talked about (binary and nominal) will be best represented with a categorical color scheme.

Since our metric values don't have a natural order, we don't want to use a color scheme that has a natural order (like white to black).

d3 has built-in color schemes in its d3-scale-chromatic library.

color scales - categorical

These categorical color schemes have been carefully designed to have enough contrast between colors. Each of these schemes is an array of colors — for example, to use the first scale in this list, we would access each color at its index in d3.schemeCategory10.

For categorical color schemes, it's helpful for each color to have a different descriptive name. For example, there might be two colors that could be described as "blue", which can be confusing to talk about.

2. Representing a continuous metric#

For metrics that are continuous, we'll want a way to interpolate in between color values. For example, we could represent humidity values with a color scale ranging from white to dark blue.

 

This page is a preview of Fullstack D3 Masterclass

No discussions yet