Colours & D3

Steven Bergner

October 1, 2018

Choosing a colour palette

Continuous data: use colour gradient (sequential or diverging)
Categorical data: distinctive colors
Excellent source: LC Rost’s Friendly Guide to Colors

Color picking tools

Classic: http://colorbrewer2.org/
Colour picker for data helps to understand colour space
Multi-hued colour scales (design tool)
Viz Palette to ensure your colours work under deficiencies
Generate palette from an image (e.g. from photos of tropical fish)
Colour compositions, e.g. Adobe Color CC Google Material Design

Evolution of D3

Reusable knowledge of open standards: HTML, SVG, CSS
Prior incarnations: prefuse, flare
Alternatives (historic): processing, protovis

Sources

Ian Johnson’s Hitchhiker guide to D3
Elijah Meeks’ What charts do

Hitchhiker’s guide to D3

Mapping out the landscape
Communicate Complex Concepts
Created using web standards - Shareable on the Web
BlockBuilder’s search
Community

D3 API

Reference
Getting started guide
- d3-scale maps data to marker attributes
- d3-shape convenience functions
- d3-selection, e.g. set attributes to chosen elements
- d3-collection group similar things together
- d3-hierarchy, e.g. to make treemaps
- d3-zoom can show detail in context
- d3-force for graph layouts