d3.curveMonotoneX is a D3 curve factory for turning line-generator output into a smooth curve that preserves monotonicity along the x dimension. section 8.6.3 section 4.2.2
Apply it by chaining .curve(d3.curveMonotoneX) after configuring a D3 line generator’s x() and y() accessors. The generator then produces an SVG path from the data. section 8.6.3 section 4.2.2
Use the interpolation deliberately:
- Choose d3.curveMonotoneX when a smooth line should closely follow the supplied points. section 4.2.2
- Compare curve choices against the plotted data, because interpolation can change the visual meaning of sudden variations. section 4.2.2
- Combine .defined() with the curve when missing values should interrupt the generated line. section 8.6.3
Framework rankings
A React Curve component maps year and rank through supplied scales, ignores null ranks with .defined(), and uses d3.curveMonotoneX to draw each framework’s ranking path. section 8.6.3
Listing 8.14 Preparing the curve generator (Curve.js)
import * as d3 from "d3";
const Curve = props => {
const lineGenerator = d3.line() #1
.x(d => props.xScale(d[props.xAccessor]))
.y(d => props.yScale(d[props.yAccessor]))
.defined(d => d[props.yAccessor] !== null)
.curve(d3.curveMonotoneX);
return (
<path #2
d={lineGenerator(props.data)}
fill="none"
stroke={props.stroke}
strokeWidth={props.strokeWidth}
/>
);
};
export default Curve;
Inspect the complete curve-generator pattern, including accessors, missing-value handling, interpolation, and SVG path rendering. section 8.6.3
