Interpolation computes intermediate visual values between discrete data points. In D3, curve interpolation functions transform line or area boundaries into curves, changing how data appears. section 4.2.2 section 4.3.1
Choose an interpolation that preserves the phenomenon represented by the data:
- Use d3.curveCatmullRom for a smooth, flexible cubic spline that passes through each data point. section 4.2.2
- Test alternatives carefully: d3.curveBasis can underestimate sudden temperature changes, while d3.curveBundle reduces variation. section 4.2.2
- Keep the original data points visible when possible, because a smooth curve can inaccurately suggest behavior between observations. section 4.2.2
Interpolating a temperature line
Create a D3 line generator with x() and y() accessors, then chain curve(d3.curveCatmullRom). Pass the dataset to the generator when setting an SVG path’s d attribute. section 4.2.2 section 4.5
const curveGenerator = d3.line() .x(d => xScale(d.date)) .y(d => yScale(d.avg_temp_F) .curve(d3.curveCatmullRom);
Inspect the compact D3 pattern for attaching Catmull-Rom interpolation to a line generator. section 4.2.2
