liveBook · Manning

D3.curveCatmullRom

As explained in D3.js in Action, Third Edition

d3.curveCatmullRom is a D3 curve factory that generates a Catmull–Rom cubic spline passing through the supplied data points.

d3.curveCatmullRom is a D3 curve factory that generates a smooth, flexible Catmull–Rom cubic spline passing through supplied data points. Apply it through a generator’s curve() accessor. section 4.2.2

Choose the interpolation based on how faithfully the curve should represent the data:

  • Use it with d3.line() when a line chart needs interpolation between discrete points. section 4.2.2
  • Compare its result with other interpolation functions because smoothing changes the visual representation of the data. section 4.2.2
  • Keep the data points visible when accuracy matters; a smooth curve can otherwise suggest values the data does not support. section 4.2.2
  • Use it with d3.area() to curve the upper and lower boundaries of streamgraph or stacked-area series. section 5.2.3

Curving a streamgraph

Configure an area generator with x(), y0(), and y1() accessors, then chain .curve(d3.curveCatmullRom). Bind the resulting generator to SVG paths for each stacked series.

How D3.js in Action, Third Edition covers it

How deep it goes
Explains generator configuration and representation trade-offs, but does not descend into spline mathematics or implementation internals.
Examples
Uses a temperature line chart and a revenue streamgraph whose stacked-area boundaries receive Catmull–Rom interpolation.
What it assumes
Assumes familiarity with D3 generators, accessors, scales, data points, and SVG path binding.
What you can do after
Apply it via D3 line() or area() generators and evaluate whether the resulting smooth curve preserves the data’s visual meaning.
How it connects
Connects curve interpolation with D3 line generators, area generators, streamgraphs, stacked area charts, and data points.
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

Related concepts

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.