liveBook · Manning

D3-scale-chromatic

As explained in D3.js in Action, Third Edition

d3-scale-chromatic is a D3 module that provides standardized sequential, diverging, and categorical color schemes and interpolators.

d3-scale-chromatic provides D3 color interpolators for visualizing continuous values. A sequential interpolator maps low values through a color progression to high values. section 13.2.3

Use a sequential scheme when:

  • A continuous measure, such as country-level Nobel laureate counts, needs color encoding. section 13.2.3
  • An extreme value would flatten differences, so the scale domain can be capped at a useful upper limit. section 13.2.3

Coloring a choropleth map

Import scaleSequential from d3-scale and interpolateYlGnBu from d3-scale-chromatic, then create countryColorScale with domain([1, 100]). Apply countryColorScale(country.properties.laureates.length) to each country with data, and use a pale fallback for countries without laureates.

How D3.js in Action, Third Edition covers it

How deep it goes
Explains sequential scales, interpolator-based construction, domain capping, and application to SVG paths.
Examples
Uses Nobel laureate counts, the YlGnBu interpolator, a world map, and country tooltips.
What it assumes
Assumes familiarity with D3 scales, SVG paths, imported modules, and data-bound geographic features.
What you can do after
Build a sequential color scale and apply it to geographic regions with a neutral fallback for missing data.
How it connects
Connects color scales with sequential data encoding, choropleth maps, SVG paths, and tooltips.
Cover of D3.js in Action, Third Edition
liveBookmanning.com
Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.