Visualization + Color

Visualization + Color

Colors are a critical, but a tough-to-do-right part of visualization.

South China Morning Post: Iraq's bloody toll

Pitch Interactive: Out of Sight, Out of Mind

Wikipedia

Axis Maps

Die Zeit: Regionale Arbeitsmärkte

Tamara Munzner: Visualization Analysis And Design (p. 106)

Colin Ware: Visual Thinking for Design

GOOD: Are The Richest Americans Also The Best Educated?

Cool idea, but:
It's not possible to mentally separate color channels!

🌈

Scientific American: Physics Or Fashion?

Spiegel Online: Ballbesitz

Moritz Stefaner: Redesign

Semantically resonant colors

Stanford Vis Group: Selecting Semantically-Resonant Colors

Tips

Get it right in Black + White.

Use color mostly for categories or highlights.

If used for quantities use mostly variation in brightness.

If used for diverging scales, blend over a neutral color.

Tools

Tools

ColorBrewer

Tools

Color Blindness Simulator

Tools

Adobe Color CC

Tools

IWantHue

More on color:

Stephen Few: Practical Rules for Using Color in Charts

Lisa Rost: Your Friendly Guide to Colors in Data Visualisation

Color in d3

Color in d3

d3-color

Color in d3

d3.schemeCategory10
d3.schemeCategory20
d3.schemeCategory20b
d3.schemeCategory20c

d3-scale#schemeCategory10

Color in d3

You can find predefined color scales in d3-scale-chromatic.

<script src="https://d3js.org/d3-scale-chromatic.v1.min.js">