A curve generator defines how D3 interpolates data points into curved SVG path geometry. It works as an accessor on a line generator, turning point data into the path’s d attribute. section 4.2.2 section 4.2
Build one by chaining curve() onto d3.line() and passing an interpolator such as d3.curveCatmullRom. The resulting cubic spline follows each data point while producing a smoother visual path. section 4.2.2
Choose interpolation by checking how faithfully the curve represents the data:
- Compare several interpolators against visible data points; smoothing can make inaccurate patterns look natural. section 4.2.2
- Avoid d3.curveBasis when sudden temperature changes matter, because it underestimates variation in the illustrated data. section 4.2.2
- Use d3.curveMonotoneX or d3.curveCatmullRom when the curve should closely follow the points. section 4.2.2
Temperature line chart
A New York City 2021 average-temperature chart can plot weekly points with xScale(d.date) and yScale(d.avg_temp_F), then connect them through a Catmull-Rom curve. section 4.2 section 4.2.2
const curveGenerator = d3.line() .x(d => xScale(d.date)) .y(d => yScale(d.avg_temp_F) .curve(d3.curveCatmullRom);
Inspect the compact D3 pattern that combines x and y accessors with curveCatmullRom. section 4.2.2
