There are a wealth of resources on the web for creating and using color scales with Chroma.js and D3.js.

I've been looking for a simple consolidated page with simple examples that explain inuition behind the color theory, so I created one.

When to use color schemes

Color is powerful communication element. As Cynthia Brewer writes:

"The graphic display of data plays a critical role in visualization and exploratory data analysis. Appropriate use of color for data display allows interrelationships and patterns within data to be easily observed. The careless use of color will obscure these patterns."

But if colors are selected unwisely, they do more harm than good:

"[Resulting in] a disorderly jumble of colors produces a map that is little more than a spatially arranged look-up table."

The type of map and data your are visualizing determine whay type of color scale or scheme you should use. Here's a handy reference.

When to use color schemes

Tools:

  • Chroma.js is the best library for working with color.
  • D3.scale and Plus D3.js scales includes categorical color scales(http://bl.ocks.org/aaizemberg/78bd3dade9593896a59d).

For all colors in a scale there are three qualities or attributes of the color that can be controled: hue, saturation, and luminosity.

Categorical Color Scales

Scales for qualitative comparison. The important thing here is that colors be presented equal appearance and weight. The color brewer schemes try to balance hue, saturation, and luminosity to achieve this.

Chroma.js provides all the qualitative scales from Color Brewer:

Multi-Hue Color Scales

Scales for linear qualitative values. Pick two nice looking colors and step between them. The trick is how visualy differentiate each color and smooth the hue, luminosity, and saturation at each step. Here is an excellent article on the process by Gregor Aisch, creator of Chroma.js.

The great thing is you don't need to understand any of the math for interpolating colors along a bezier curve to take advanage of it, Chroma includes a bezier scale that does the math between between each step.

Diverging Color Scales

Diverging color scales are used to show the difference between values along quantitavie scales and ordinal scales.

Heat Maps and Bi-Variate Color Scales

A related to concept to diverging color scales is the use of scale in heatmaps and bi-variate choropleths.


5,224 1 32