2b:null 2c:["$","title",null,{"children":"All spline curve functions in D3 | Lao | Observable"}] 31:T805b,{ // Global state for previous parsed commands and drag baseline. .5 let prevParsedCommands = null; let dragBaseline = null; let preservePrevPoints = false; function printCurveCode(commands) { const curveType = getEl("#curveType").value; let singleColumn = (curveType == 'linear' || curveType == 'step'); let htmlStr = ``; let makeHighlight = (point) => { // Blend between #EEE and the index color using D3's RGB interpolator. // The factor is point.p/2 so that when p==0 the color is 100% #EEE and when p==1 the mix is 50:50. let indexColor = getColorForIndex(point.index); let blended = d3.interpolateRgb("#EEE", indexColor)(point.p/2); let str = ''; str += ''; return str; }; let space = (str) => { return ``; }; let i0, i1 = -1; let newRow = (cmd) => { // i0 = i1; // i1 = cmd.points[cmd.points.length-1].index; // let color = getColorForIndex(i1); return ``; }; commands.forEach(cmd => { if (cmd.command == 'M') { htmlStr += newRow(cmd); htmlStr += ''; //htmlStr += space('M'); htmlStr += makeHighlight(cmd.points[0]); } if (cmd.command == 'L') { htmlStr += ''; htmlStr += ' '; htmlStr += newRow(cmd); htmlStr += ''; htmlStr += space('L'); htmlStr += makeHighlight(cmd.points[0]); } if (cmd.command == 'C') { htmlStr += space('C'); htmlStr += makeHighlight(cmd.points[0]); htmlStr += space(','); htmlStr += ' '; htmlStr += newRow(cmd); htmlStr += makeHighlight(cmd.points[1]); htmlStr += space(','); htmlStr += makeHighlight(cmd.points[2]); } }); htmlStr += ''; htmlStr += ''; htmlStr += '

${singleColumn ? '' : 'In-handle'} Knot ${singleColumn ? '' : 'Out-handle'}

'; str += `

`;
      str += '';
      str += '';
      str += ``;
      str += '';
      str += ``;
      str += '${point.x1.toFixed(1)} ${point.y1.toFixed(1)}
';
      str += '

'; str += '

${str}

<path d = "M

"/>

'; // Fade each highlight div's background color to #EEE over 0.3 seconds. setTimeout(() => { d3.selectAll(".highlight-div") .transition(d3.easeQuadInOut) .duration(1000) .style("background-color", "#EEE"); }, 0); return htmlStr; } let parsed = []; let max_d; function parsePath(pathStr) { let lastParse = parsed; let commandIndex = 0; const curveType = getEl("#curveType").value; const variation = getEl("#curveVariation").value; const regex = /([MLC])([^MLC]*)/gi; const matches = Array.from(pathStr.matchAll(regex)); let commands = []; let index = 0; if ((variation == 'open' || variation == 'closed') && curveType != 'linear') { index = 1; } matches.forEach(match => { const command = match[1]; const coordsStr = match[2].trim(); if (!coordsStr) { commands.push({ command, points: [] }); return; } const parts = coordsStr.split(/[\s,]+/).filter(Boolean); const numbers = parts.map(Number); const pts = []; if (command === "M") { pts.push({ index: index, x0: numbers[0], y0: numbers[1], x1: numbers[0], y1: numbers[1], }); } else if (command === "L") { if (curveType == 'linear') { index++; } if (curveType != 'step') { pts.push({ index: index, x0: numbers[0], y0: numbers[1], x1: numbers[0], y1: numbers[1], }); } if (curveType == 'step') { index++; let idx; if (variation == 'before') { idx = Math.floor((index + 1) / 2); } if (variation == 'middle') { idx = Math.floor(index / 2); } if (variation == 'after') { idx = Math.floor(index / 2); } pts.push({ index: idx, x0: numbers[0], y0: numbers[1], x1: numbers[0], y1: numbers[1], }); } } else if (command === "C") { pts.push({ index: index, x0: numbers[0], y0: numbers[1], x1: numbers[0], y1: numbers[1], }); index++; pts.push({ index: index, x0: numbers[2], y0: numbers[3], x1: numbers[2], y1: numbers[3], }); pts.push({ index: index, x0: numbers[4], y0: numbers[5], x1: numbers[4], y1: numbers[5], }); commandIndex++; } commands.push({ command, points: pts }); }); let updatePreviousPoints = true; if(parsed.length != commands.length) updatePreviousPoints = false; if(parsed.map(e=>e.command).join(',') != commands.map(e=>e.command).join(',') ) updatePreviousPoints = false; if(updatePreviousPoints){ for(let i=0; i { cmd.points.forEach(pt => { pt.d = Math.sqrt(Math.pow(pt.x1 - pt.x0, 2) + Math.pow(pt.y1 - pt.y0, 2)); max_d = Math.max(max_d, pt.d); }); }); // Then, assign each point its percent value (p). commands.forEach(cmd => { cmd.points.forEach(pt => { pt.p = (pt.d / max_d )**.35; }); }); return commands; } function getColorForIndex(idx) { if (isContinuous) { const n = +getEl("#numPoints").value; const scheme = getEl("#colorScheme").value; if(scheme == 'interpolateRainbow'){ return colorScheme((idx % n) / n); } else{ return colorScheme((idx % n) / (n - 1)); } } else { return colorScheme[idx % Math.min(n, colorScheme.length)]; } } let colorScheme = d3.interpolateCool; let isContinuous = true; const container = html`

`; const colorSchemeControl = html`

Color Scheme:

`; container.appendChild(colorSchemeControl); const controls = html`

Curve Type:

Number of Points:

Arrangement:

`; container.appendChild(controls); const getEl = sel => container.querySelector(sel); const width = 500, height = 400; const svg = d3.select(DOM.svg(width, height)) .style("overflow", "visible"); const mCodeDiv = html`

`; const chartDiv = html`

`; chartDiv.appendChild(svg.node()); const listDiv = html`

`; listDiv.appendChild(mCodeDiv); const flexContainer = html`

`; flexContainer.appendChild(chartDiv); flexContainer.appendChild(listDiv); container.appendChild(flexContainer); const mCodePointsGroup = svg.append("g").attr("class", "mcode-points-group"); const handleLinesGroup = svg.append("g").attr("class", "handle-lines-group"); let n = +getEl("#numPoints").value; let points = d3.range(n).map((d, i) => ({ x: (width / (n - 1)) * i, y: height / 2 })); // Helper functions for scaling points function scaleToFit(points, targetWidth, targetHeight) { // Find current bounds let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity; points.forEach(pt => { minX = Math.min(minX, pt.x); maxX = Math.max(maxX, pt.x); minY = Math.min(minY, pt.y); maxY = Math.max(maxY, pt.y); }); const currentWidth = maxX - minX; const currentHeight = maxY - minY; // Calculate scale factors and padding const padding = Math.min(targetWidth, targetHeight) * 0.1; const scaleX = (targetWidth - 2 * padding) / (currentWidth || 1); const scaleY = (targetHeight - 2 * padding) / (currentHeight || 1); // Apply scaling and centering return points.map(pt => ({ x: padding + (pt.x - minX) * scaleX, y: padding + (pt.y - minY) * scaleY })); } function scaleProportionally(points, targetWidth, targetHeight) { // Find current bounds let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity; points.forEach(pt => { minX = Math.min(minX, pt.x); maxX = Math.max(maxX, pt.x); minY = Math.min(minY, pt.y); maxY = Math.max(maxY, pt.y); }); const currentWidth = maxX - minX; const currentHeight = maxY - minY; // Calculate scale factor (preserve aspect ratio) const padding = Math.min(targetWidth, targetHeight) * 0.1; const scale = Math.min( (targetWidth - 2 * padding) / (currentWidth || 1), (targetHeight - 2 * padding) / (currentHeight || 1) ); // Center in the available space const centeredOffsetX = (targetWidth - currentWidth * scale) / 2; const centeredOffsetY = (targetHeight - currentHeight * scale) / 2; // Apply scaling and centering return points.map(pt => ({ x: centeredOffsetX + (pt.x - minX) * scale, y: centeredOffsetY + (pt.y - minY) * scale })); } function updatePoints() { n = +getEl("#numPoints").value; const arrangement = getEl("#arrangement").value; // Update reroll button visibility based on arrangement type const rerollBtn = getEl("#rerollBtn"); if (["randomWalkY", "randomWalkXY", "randomX", "randomXY", "randomRadar"].includes(arrangement)) { rerollBtn.style.display = "inline-block"; } else { rerollBtn.style.display = "none"; } switch (arrangement) { case "randomWalkY": points = randomWalkYPoints(n, width, height); break; case "randomWalkXY": points = randomWalkXYPoints(n, width, height); break; case "randomX": points = randomXPoints(n, width, height); break; case "randomXY": points = randomXYPoints(n, width, height); break; case "randomRadar": points = randomRadarPoints(n, width, height); break; case "circle": points = circlePoints(n, width, height); break; case "square": points = squarePoints(n, width, height); break; case "cardioid": points = cardioidPoints(n, width, height); break; case "epitrochoid": points = epitrochoidPoints(n, width, height); break; case "spiral": points = spiralPoints(n, width, height); break; case "sin": points = sinPoints(n, width, height); break; case "star": points = starPoints(n, width, height); break; case "lissajous": points = lissajousPoints(n, width, height); break; default: points = randomXYPoints(n, width, height); } } // Random walk that only changes Y values function randomWalkYPoints(n, width, height) { let points = []; let y = height / 2; for (let i = 0; i < n; i++) { const x = (width / (n - 1)) * i; y += (Math.random() - 0.5) * height / 2; // Bigger random step in Y direction y = Math.max(0, Math.min(y, height)); // Keep within bounds points.push({ x, y }); } return scaleToFit(points, width, height); } // Random walk that changes both X and Y values function randomWalkXYPoints(n, width, height) { let points = []; let x = width / 2; // Start in center let y = height / 2; for (let i = 0; i < n; i++) { // Equal probability of moving in any direction x += (Math.random() - 0.5) * width / 3; // Bigger steps y += (Math.random() - 0.5) * height / 3; // Don't clamp here to allow scaling to work better points.push({ x, y }); } // Scale to fit the available space return scaleToFit(points, width, height); } // Random Y values with evenly spaced X values function randomXPoints(n, width, height) { const points = d3.range(n).map((d, i) => ({ x: (width / (n - 1)) * i, y: Math.random() * height })); return scaleToFit(points, width, height); } // Completely random X and Y values function randomXYPoints(n, width, height) { const points = d3.range(n).map(() => ({ x: Math.random() * width, y: Math.random() * height })); return scaleToFit(points, width, height); } // Random points in a radar/circular pattern function randomRadarPoints(n, width, height) { const centerX = width / 2; const centerY = height / 2; const radius = Math.min(width, height) / 2 * 0.8; const points = d3.range(n).map((d, i) => { const angle = (i / n) * 2 * Math.PI; const jitter = .8 * radius * Math.random(); // More jitter const r = radius - jitter; return { x: centerX + r * Math.cos(angle), y: centerY + r * Math.sin(angle) }; }); // This is already centered and scaled reasonably, but can refine further return scaleProportionally(points, width, height); } // Apply scaling to circle points to fill the area better function circlePoints(n, width, height) { const centerX = width / 2; const centerY = height / 2; const radius = Math.min(width, height) / 2 * 0.8; const points = d3.range(n).map((d, i) => { const angle = (i / n) * 2 * Math.PI; return { x: centerX + radius * Math.cos(angle), y: centerY + radius * Math.sin(angle) }; }); // Already circular and centered, but ensure consistent scaling return scaleProportionally(points, width, height); } // Points forming a square function squarePoints(n, width, height) { const side = Math.min(width, height) * 0.8; // Make it a true square const leftMargin = (width - side) / 2; const topMargin = (height - side) / 2; const perimeter = 4 * side; const pointsPerSide = Math.floor(n / 4); const remainder = n % 4; let points = []; let count = 0; // Top side for (let i = 0; i <= pointsPerSide + (remainder > 0 ? 1 : 0); i++) { if (count >= n) break; points.push({ x: leftMargin + (i / (pointsPerSide + (remainder > 0 ? 1 : 0))) * side, y: topMargin }); count++; } // Right side for (let i = 1; i <= pointsPerSide + (remainder > 1 ? 1 : 0); i++) { if (count >= n) break; points.push({ x: leftMargin + side, y: topMargin + (i / (pointsPerSide + (remainder > 1 ? 1 : 0))) * side }); count++; } // Bottom side for (let i = 1; i <= pointsPerSide + (remainder > 2 ? 1 : 0); i++) { if (count >= n) break; points.push({ x: leftMargin + side - (i / (pointsPerSide + (remainder > 2 ? 1 : 0))) * side, y: topMargin + side }); count++; } // Left side for (let i = 1; i < pointsPerSide; i++) { if (count >= n) break; points.push({ x: leftMargin, y: topMargin + side - (i / pointsPerSide) * side }); count++; } return points; } // Points forming a cardioid shape function cardioidPoints(n, width, height) { const centerX = width / 2; const centerY = height / 2; const scale = Math.min(width, height) / 3; // Increased from /4 to /3 const points = d3.range(n).map((d, i) => { const angle = (i / n) * 2 * Math.PI; // Cardioid formula: r = a(1 + cos(θ)) const r = scale * (1 + Math.cos(angle)); return { x: centerX + r * Math.cos(angle), y: centerY + r * Math.sin(angle) }; }); return scaleProportionally(points, width, height); } // Points forming an epitrochoid function epitrochoidPoints(n, width, height) { const centerX = width / 2; const centerY = height / 2; const scale = Math.min(width, height) / 6; // Reduced from /5 to /6 const R = 3; // Major radius const r = 1; // Minor radius const d = 2; // Distance from center of minor circle const points = d3.range(n).map((_, i) => { const angle = (i / n) * 2 * Math.PI; // Epitrochoid formula const x = centerX + scale * ((R + r) * Math.cos(angle) - d * Math.cos((R + r) * angle / r)); const y = centerY + scale * ((R + r) * Math.sin(angle) - d * Math.sin((R + r) * angle / r)); return { x, y }; }); return scaleProportionally(points, width, height); } // Apply scaling to other geometric shapes function spiralPoints(n, width, height) { const centerX = width / 2; const centerY = height / 2; const maxRadius = Math.min(width, height) / 2 * 0.8; // Adjust the number of rotations based on number of points // With fewer points, we need fewer rotations to make it visible const rotations = Math.max(1.5, Math.min(n/2, 6)); const points = d3.range(n).map((d, i) => { // Start at a noticeable radius rather than 0 to avoid straight line with few points const baseRadius = maxRadius * 0.1; // Start at 10% of max radius const angle = (i / (n - 1)) * rotations * Math.PI * 2; const radius = baseRadius + (i / (n - 1)) * (maxRadius - baseRadius); return { x: centerX + radius * Math.cos(angle), y: centerY + radius * Math.sin(angle) }; }); return scaleProportionally(points, width, height); } // Apply scaling to sine wave function sinPoints(n, width, height) { const amplitude = height / 3; // Increased from /4 to /3 const centerY = height / 2; const points = d3.range(n).map((d, i) => { const x = (width / (n - 1)) * i; const y = centerY + amplitude * Math.sin((i / (n - 1)) * 4 * Math.PI); return { x, y }; }); return scaleToFit(points, width, height); } // Apply scaling to star shape function starPoints(n, width, height) { const centerX = width / 2; const centerY = height / 2; const outerRadius = Math.min(width, height) / 2 * 0.8; const innerRadius = outerRadius * 0.4; const points = d3.range(n).map((d, i) => { const angle = (i / n) * 2 * Math.PI; const radius = i % 2 === 0 ? outerRadius : innerRadius; return { x: centerX + radius * Math.cos(angle), y: centerY + radius * Math.sin(angle) }; }); return scaleProportionally(points, width, height); } // Apply scaling to Lissajous curve function lissajousPoints(n, width, height) { const centerX = width / 2; const centerY = height / 2; const amplitude = Math.min(width, height) / 2 * 0.8; const a = 3; // X frequency const b = 2; // Y frequency const delta = Math.PI / 2; // Phase offset const points = d3.range(n).map((d, i) => { const t = (i / (n - 1)) * 2 * Math.PI; return { x: centerX + amplitude * Math.sin(a * t + delta), y: centerY + amplitude * Math.sin(b * t) }; }); return scaleProportionally(points, width, height); } updatePoints() function getCurve() { const type = getEl("#curveType").value; const variation = getEl("#curveVariation").value; const param = +getEl("#curveParam").value; if (type === "natural") return d3.curveNatural; else if (type === "linear") { if (variation === "closed") return d3.curveLinearClosed; else return d3.curveLinear; } else if (type === "basis") { if (variation === "open") return d3.curveBasisOpen; if (variation === "closed") return d3.curveBasisClosed; return d3.curveBasis; } else if (type === "cardinal") { if (variation === "open") return d3.curveCardinalOpen.tension(param); if (variation === "closed") return d3.curveCardinalClosed.tension(param); return d3.curveCardinal.tension(param); } else if (type === "catmullRom") { if (variation === "open") return d3.curveCatmullRomOpen.alpha(param); if (variation === "closed") return d3.curveCatmullRomClosed.alpha(param); return d3.curveCatmullRom.alpha(param); } else if (type === "bundle") return d3.curveBundle.beta(param); else if (type === "monotone") { if (variation === "y") return d3.curveMonotoneY; return d3.curveMonotoneX; } else if (type === "step") { if (variation === "before") return d3.curveStepBefore; if (variation === "after") return d3.curveStepAfter; return d3.curveStep; } return d3.curveLinear; } const line = d3.line() .curve(getCurve()) .x(d => d.x) .y(d => d.y); const path = svg.append("path") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 2) .attr("d", line(points)); function updateCurvePath(override = false) { line.curve(getCurve()); const originalDStr = line(points); path.attr("d", originalDStr); parsed = parsePath(originalDStr); if(max_d > 0.00001 || override) mCodeDiv.innerHTML = printCurveCode(parsed); const flatPoints = parsed.reduce((arr, cmd) => arr.concat(cmd.points), []); const mCircles = mCodePointsGroup.selectAll("circle.mcode-point").data(flatPoints); mCircles.exit().remove(); mCircles.enter().append("circle") .attr("class", "mcode-point") .attr("r", 3) .merge(mCircles) .attr("fill", d => getColorForIndex(d.index)) .attr("cx", d => d.x1) .attr("cy", d => d.y1); let segments = []; let prevPoint = null; parsed.forEach(cmd => { if (cmd.command === "M") { prevPoint = cmd.points[0]; } else if (cmd.command === "C" && prevPoint) { if (cmd.points.length >= 3) { segments.push({ start: prevPoint, control1: cmd.points[0], control2: cmd.points[1], end: cmd.points[2] }); prevPoint = cmd.points[2]; } } else if (cmd.command === "L" && !prevPoint) { prevPoint = cmd.points[0]; } else if (cmd.command === "L" && prevPoint) { prevPoint = cmd.points[0]; } }); if (segments.length > 0) { let handleLines = []; segments.forEach(seg => { handleLines.push({ x1: seg.start.x1, y1: seg.start.y1, x2: seg.control1.x1, y2: seg.control1.y1, index: seg.control1.index }); handleLines.push({ x1: seg.control2.x1, y1: seg.control2.y1, x2: seg.end.x1, y2: seg.end.y1, index: seg.control2.index }); }); const lines = handleLinesGroup.selectAll("line.bezier-handle").data(handleLines); lines.exit().remove(); lines.enter().append("line") .attr("class", "bezier-handle") .merge(lines) .attr("x1", d => d.x1) .attr("y1", d => d.y1) .attr("x2", d => d.x2) .attr("y2", d => d.y2) .attr("stroke", d => getColorForIndex(d.index)) .attr("stroke-width", 0.5); } else { handleLinesGroup.selectAll("line.bezier-handle").remove(); } } updateCurvePath(true); let circles; function redrawCircles() { circles = svg.selectAll("circle.control").data(points); circles.exit().remove(); circles = circles.enter().append("circle") .attr("class", "control") .style("cursor", "move") .attr("r", 10) .merge(circles) .call(d3.drag() .on("start", dragStarted) .on("drag", dragged) .on("end", dragEnded) ); circles .attr("fill", (d, i) => getColorForIndex(i)) .attr("opacity", 0.8) .attr("cx", d => d.x) .attr("cy", d => d.y); updateCurvePath(); } function dragStarted(event, d) { preservePrevPoints = true; if (!dragBaseline) { dragBaseline = prevParsedCommands ? JSON.parse(JSON.stringify(prevParsedCommands)) : null; } } function dragged(event, d) { d.x = Math.max(0, Math.min(event.x, width)); d.y = Math.max(0, Math.min(event.y, height)); d3.select(this).attr("cx", d.x).attr("cy", d.y); updateCurvePath(); } function dragEnded(event, d) { dragBaseline = null; } redrawCircles(); function updateCurveOptions() { const type = getEl("#curveType").value; const variationSelect = d3.select(getEl("#curveVariation")); const slider = d3.select(getEl("#curveParam")); const variationLabel = d3.select(getEl("#variationLabel")); const sliderLabel = d3.select(getEl("#sliderLabel")); const paramName = getEl("#paramName"); variationSelect.selectAll("option").remove(); if (type == "bundle") { slider.property("value", 0.85); getEl("#paramValue").textContent = "0.85"; } else if (type == "catmullRom") { slider.property("value", 0.5); getEl("#paramValue").textContent = "0.50"; } else { slider.property("value", 0); getEl("#paramValue").textContent = "0.00"; } if (["linear"].includes(type)) { variationLabel.style("display", "inline-block"); sliderLabel.style("display", "none"); variationSelect.append("option").attr("value", "endpoint").text("Endpoint"); variationSelect.append("option").attr("value", "closed").text("Closed"); } else if (["basis", "cardinal", "catmullRom"].includes(type)) { variationLabel.style("display", "inline-block"); sliderLabel.style("display", (type === "basis") ? "none" : "inline-block"); variationSelect.append("option").attr("value", "endpoint").text("Endpoint"); variationSelect.append("option").attr("value", "open").text("Open"); variationSelect.append("option").attr("value", "closed").text("Closed"); if (type === "cardinal") { paramName.textContent = "Tension:"; } else if (type === "catmullRom") { paramName.textContent = "Alpha:"; } else { paramName.textContent = "Parameter:"; } } else if (type === "bundle") { variationLabel.style("display", "none"); sliderLabel.style("display", "inline-block"); paramName.textContent = "Beta:"; } else if (type === "monotone") { variationLabel.style("display", "inline-block"); sliderLabel.style("display", "none"); variationSelect.append("option").attr("value", "x").text("X"); variationSelect.append("option").attr("value", "y").text("Y"); } else if (type === "step") { variationLabel.style("display", "inline-block"); sliderLabel.style("display", "none"); variationSelect.append("option").attr("value", "before").text("Before"); variationSelect.append("option").attr("value", "middle").text("Middle"); variationSelect.append("option").attr("value", "after").text("After"); variationSelect.property("value", 'middle'); } else { variationLabel.style("display", "none"); sliderLabel.style("display", "none"); } } updateCurveOptions(); // When controls change that should reset previous positions, set preservePrevPoints to false. d3.select(getEl("#curveType")).on("change", () => { preservePrevPoints = true; updateCurveOptions(); updateCurvePath(true); }); d3.select(getEl("#curveVariation")).on("change", () => { preservePrevPoints = false; updateCurvePath(); }); d3.select(getEl("#numPoints")).on("change", () => { preservePrevPoints = false; updatePoints(); redrawCircles(); updateCurvePath(true); }); d3.select(getEl("#arrangement")).on("change", () => { preservePrevPoints = false; updatePoints(); redrawCircles(); }); // Add event listener for reroll button d3.select(getEl("#rerollBtn")).on("click", () => { preservePrevPoints = false; updatePoints(); redrawCircles(); }); // For parameter slider and color scheme changes, keep preservePrevPoints true. d3.select(getEl("#curveParam")).on("input", () => { preservePrevPoints = true; updateCurvePath(); getEl("#paramValue").textContent = (+getEl("#curveParam").value).toFixed(2); }); d3.select(getEl("#colorScheme")).on("change", () => { preservePrevPoints = true; const value = getEl("#colorScheme").value; colorScheme = d3[value]; if (value.startsWith("interpolate")) { isContinuous = true; } else { isContinuous = false; } updateCurvePath(); redrawCircles(); }); return container; }32:T112c,

Curve Name	D3 Code	Additional Variables	Continuity Class	Uses	How control points create spline
Natural	`d3.curveNatural`		C2	Data visualization	Minimizes bending energy ${tex`\int [f''(x)]^2dx`} to create the smoothest possible curve through all points, with zero curvature at endpoints.
Basis	`d3.curveBasis` `d3.curveBasisClosed` `d3.curveBasisOpen`		C2	Camera movements and reflective surfaces	Uses groups of 4 consecutive points as control points for B-spline segments that pass near (but not through) the middle points.
Bundle	`d3.curveBundle`	`.beta()`	C2	Hierarchical edge bundling	Blends between basis spline and evenly spaced points between the first and last point.
Cardinal	`d3.curveCardinal` `d3.curveCardinalClosed` `d3.curveCardinalOpen`	`.tension()`	C1	Animation (Hermite splines have continuous velocity)	Sets tangents at each point based on the vector between neighboring points, scaled by a tension parameter that controls curve tightness.
Catmull-Rom	`d3.curveCatmullRom` `d3.curveCatmullRomClosed` `d3.curveCatmullRomOpen`	`.alpha()`	G1	Shape smoothing that avoids cusps, similar to original wood splines	Like the Cardinal curve, calculates tangents based on neighboring points. The alpha parameter controls timing assumptions: alpha=0 treats control points as evenly-timed samples (like Cardinal splines), while alpha=1 assumes time between samples is proportional to their distance, smothing the curves between near points.
Monotone	`d3.curveMonotoneX` `d3.curveMonotoneY`		G1	Interpolating between data points without overshooting	Computes tangents using harmonic mean of adjacent slopes, then clamps them to prevent creating local extrema between points.
Linear	`d3.curveLinear` `d3.curveLinearClosed`		C0	Arclength parameterization, transforms, colors	Connects control points with straight lines.
Step	`d3.curveStep` `d3.curveStepAfter` `d3.curveStepBefore`		C0	Stepwise charts	Creates horizontal segments at each y-value with vertical transitions positioned before, after, or midway between control points.

33:[] 2f:{"id":"8fca95d76f562ff6","slug":null,"title":"All spline curve functions in D3","thumbnail":"966f803388971b5d2862023470d5fc19e78558bc038dd710de1b32f6b8f6d73d","access_level":"public","create_time":"$D2025-03-06T23:29:55.803Z","update_time":"$D2026-09-24T02:21:45.258Z","view_time":null,"first_public_time":"$D2025-03-07T03:43:17.739Z","has_unpublished_edits":null,"fork":false,"stars":18,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":910,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"},{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"All spline curve functions in D3","cells":[{"id":0,"value":"# All spline [curve functions](https://d3js.org/d3-shape/curve) in D3\n## Spline editor with tangent points","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":544,"value":"Drag points while watching tangent handles to get to know each spline's properties. Every smooth spline is made of Cubic Bezier curves, but differ by how their curves join together, and if the curve passes through their control points.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"SVG [cubic Bézier curves](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#b%C3%A9zier_curves) are defined using this path code syntax:\n\n**``` M x0 y0 C x1 y1, x2 y2, x3 y3 ```**\n\n- `M` = move to\n- `x0 y0` = starting point\n- `C` = cubic curve\n- `x1 y1` = out tangent handle\n- `x2 y2` = in tangent handle\n- `x3 y3` = knot point","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"