2b:null 2c:["$","title",null,{"children":"Monotone Cubic Interpolation | jviide | Observable"}] 31:T8da,{ const legend = html`

${curves.map(curve => html` ${curve.name} `)} data point

can be dragged around

bounding box

all data points fit inside this

`; const points = [ [0.03333333333333333, 0.8666666666666667], [0.06666666666666667, 0.7666666666666667], [0.2, 0.8666666666666667], [0.3, 0.8666666666666667], [0.33666666666666667, 0.13333333333333333], [0.4166666666666667, 0.23333333333333334], [0.4666666666666667, 0.8666666666666667], [0.5333333333333333, 0.8333333333333334], [0.8233333333333334, 0.2], [0.8333333333333334, 0.8333333333333334] ]; return html`

${chart(curves, points, 400, true)}

${legend}

`; }32:T41d,md` Cardinal and Catmull-Rom curves may not always stay inside the bounding box, depending on the choice of data points. The curves are essentially accidentally creating new extreme values outside the domain of the actual data. The monotone interpolation, though, gives us a reasonably smooth chart while staying inside the bounding box. This happens because it uses a variant of [monotone cubic interpolation](https://en.wikipedia.org/wiki/Monotone_cubic_interpolation), preserving the *monotonicity* of the data points. That is, interpolated values between two data points are *always* either purely decreasing, purely increasing or constant. There are several different algorithms for monotone cubic interpolation, but d3's implementation is based one proposed by M. Steffen in [A simple method for monotonic interpolation in one dimension](http://adsabs.harvard.edu/full/1990A%26A...239..443S). Especially the introduction of the paper is a good read. So, next time you're working on smooth line charts, give monotone cubic interpolation a go! `33:T918,chart = function(curves, originalPoints, height, drawBoundingBox = false) { const w = Math.min(width, 750); const xMargin = w / 25; const yMargin = height / 7.5; const pointMargin = 1; const points = originalPoints.map(([x, y]) => [ xMargin + x * (w - 2 * xMargin), yMargin + y * (height - 2 * yMargin) ]); const svg = d3.select(DOM.svg(w, height)) .datum(points); const boundingBox = drawBoundingBox && svg.append("rect") .attr("fill", "white") .attr("stroke", "#888") .attr("stroke-width", 0.8) .attr("stroke-dasharray", 3); const lines = curves.map((curve, index) => svg.append("path") .attr("fill", "transparent") .attr("stroke", curve.color) .attr("stroke-width", curve.width) ); const point = svg.append("g") .selectAll(".point") .data(points) .enter().append("g") .attr("class", "point") .call(d3.drag().subject(d => ({x: d[0], y: d[1]})).on("drag", dragged)); point.append("circle") .attr("stroke", "black") .attr("stroke", "white") .attr("stroke-width", 1.75) .attr("r", 2.8); point.append("circle") .attr("cursor", "move") .attr("pointer-events", "all") .attr("fill", "transparent") .attr("stroke", "none") .attr("r", 16); function dragged(d, i) { const x = d3.event.x; const y = d3.event.y; const minX = i === 0 ? xMargin : points[i - 1][0] + pointMargin; const maxX = i === points.length - 1 ? w - xMargin : points[i + 1][0] - pointMargin; d[0] = Math.max(Math.min(x, maxX), minX); d[1] = Math.max(Math.min(y, height - yMargin), yMargin); update(); } function update() { point.selectAll("circle").attr("cx", d => d[0]).attr("cy", d => d[1]); curves.forEach((curve, index) => lines[index].attr("d", d3.line().curve(curve.curve))); const xs = points.map(p => p[0]); const ys = points.map(p => p[1]); const minX = Math.min(...xs); const maxX = Math.max(...xs); const minY = Math.min(...ys); const maxY = Math.max(...ys); if (boundingBox) { boundingBox .attr("x", minX) .attr("y", minY) .attr("width", maxX - minX) .attr("height", maxY - minY); } } update(); return svg.node(); }34:[] 2f:{"id":"a8a018f34919d37c","slug":"monotone-cubic-interpolation","title":"Monotone Cubic Interpolation","thumbnail":"12ea17140e236f0e8e79ff481e928f723ae12f609716b8a98199dbc725dc5c44","access_level":"public","create_time":"$D2018-12-08T21:04:17.835Z","update_time":"$D2022-11-14T12:51:08.195Z","view_time":null,"first_public_time":"$D2018-12-09T03:04:26.963Z","fork":false,"stars":22,"starred":false,"owner":{"type":"team","id":"22a07e86f71de8ed","login":"jviide","name":"","avatar_url":"https://avatars-next.observableusercontent.com/6855a8a7d721d4ef44e2320ec83554b7d0fefaa370cb94a297e4c2290ee64d14","tier":"starter_2024"},"version":1008,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3006b442db9757ef","login":"jviide","name":"","avatar_url":"https://avatars-next.observableusercontent.com/6855a8a7d721d4ef44e2320ec83554b7d0fefaa370cb94a297e4c2290ee64d14","tier":null}],"members":[{"type":"individual","id":"3006b442db9757ef","login":"jviide","name":"","avatar_url":"https://avatars-next.observableusercontent.com/6855a8a7d721d4ef44e2320ec83554b7d0fefaa370cb94a297e4c2290ee64d14","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"title":"Monotone Cubic Interpolation","cells":[{"id":704,"value":"md`\n# Monotone Cubic Interpolation\n\nThis is a [line chart](https://en.wikipedia.org/wiki/Line_chart), a staple in data visualization:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":695,"value":"chart(\n [{ curve: d3.curveLinear, color: \"lightgray\", width: 2 }],\n [ \n [0, 0.9285714285714286 ],\n [0.05660377358490566, 0.7142857142857143],\n [0.1509433962264151, 0.9285714285714286],\n [0.24528301886792453, 0.5714285714285714],\n [0.3433962264150943, 0.07142857142857142],\n [0.4339622641509434, 1],\n [0.49056603773584906, 0.5714285714285714],\n [0.5660377358490566, 0.8571428571428571],\n [0.7169811320754716, 0.21428571428571427],\n [0.9056603773584906, 0.8571428571428571]\n ],\n 200\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":710,"value":"md`\n(Let's omit the x-axis and the y-axis, as they're not relevant here.)\n\nIt's common to see charts where the lines drawn between the discrete data points are smoothed for aesthetic purposes, often by switching from linear interpolation to [cubic spline (or quadratic) interpolation](https://en.wikipedia.org/wiki/Spline_interpolation). In such cases the control points for the splines have to be chosen somehow. When the source data is constant and known ahead of time then manually adjusting the splines works fine. For dynamic or unknown data there are seemingly many options. Here's a chart with [Catmull-Rom splines](https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Catmull%E2%80%93Rom_spline) superimposed on the linear line segments:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":714,"value":"chart(\n [\n { curve: d3.curveLinear, color: \"lightgray\", width: 1 },\n { curve: d3.curveCatmullRom, color: \"red\", width: 2 }\n ],\n [ \n [0, 0.9285714285714286 ],\n [0.05660377358490566, 0.7142857142857143],\n [0.1509433962264151, 0.9285714285714286],\n [0.24528301886792453, 0.5714285714285714],\n [0.3433962264150943, 0.07142857142857142],\n [0.4339622641509434, 1],\n [0.49056603773584906, 0.5714285714285714],\n [0.5660377358490566, 0.8571428571428571],\n [0.7169811320754716, 0.21428571428571427],\n [0.9056603773584906, 0.8571428571428571]\n ],\n 200\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":0,"value":"md`\nHowever, a wrong choice may accidentally compromise the correctness of the visualization.\n\nLet's illustrate this using the popular [d3](https://d3js.org/) library. Below we have a chart, based on some data hand-picked for the purpose. The data's minimal bounding box for is also visible. The three smooth lines drawn through the points use different cubic line interpolation methods that d3 supports: [cardinal spline](https://github.com/d3/d3-shape#curveCardinal), [Catmull–Rom spline](https://github.com/d3/d3-shape#curveCatmullRom) and [a monotone spline](https://github.com/d3/d3-shape#curveMonotoneX).\n\n👉 **The chart is interactive: drag the points around to see how the different curve types behave.** \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":516,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":800,"value":"chart(\n [\n { curve: d3.curveMonotoneX, color: \"#444\", width: 1 },\n ],\n [ \n [0, 0.9285714285714286 ],\n [0.05660377358490566, 0.7142857142857143],\n [0.1509433962264151, 0.9285714285714286],\n [0.24528301886792453, 0.5714285714285714],\n [0.3433962264150943, 0.07142857142857142],\n [0.4339622641509434, 1],\n [0.49056603773584906, 0.5714285714285714],\n [0.5660377358490566, 0.8571428571428571],\n [0.7169811320754716, 0.21428571428571427],\n [0.9056603773584906, 0.8571428571428571]\n ],\n 200,\n true\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":496,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":233,"value":"curves = [ \n { name: \"cardinal\", curve: d3.curveCardinal, color: \"teal\", width: 0.8 },\n { name: \"Catmull-Rom\", curve: d3.curveCatmullRom, color: \"red\", width: 0.8 },\n { name: \"monotone\", curve: d3.curveMonotoneX, color: \"#555\", width: 2 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":472,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"