New Splines!

100%

✓ Published0🌍 Public

Last edited Nov 14, 2015

Created on Nov 9, 2015

Eleven points along a two-dimensional curve are rendered as small filled circles on a canvas. Four differently colored splines pass through the same set of points, comparing a cubic interpolation against several Catmull-Rom variants with tension values of 0.0, 0.5, and 1.0. The example uses d3-shape’s line generator with the canvas context, d3-scale’s category10 color scale, and draws axes and points directly through Canvas 2D API calls.

AI-generated description

Similar vizzes

Loading thumbnail…

Catmull–Rom Curves

Three interactive canvases compare Catmull–Rom curve interpolation under uniform, chordal, and centripetal parameterization, using the same seven control points rendered as white polylines. Each canvas overlays a static image of the curve, while a slider adjusts the alpha parameter via the `data-alpha` attribute. The code uses `d3.shape.line` with the `"catmull-rom"` interpolator and a Canvas 2D context to draw the paths. The example is based on Yuksel et al.’s research on parameterization effects, highlighting how each method handles overshoot and intersections differently.

Mmbostock

73% match

Loading thumbnail…

Spline Editor

This interactive spline editor lets users add, drag, and delete control points to shape a curve. The visualization redraws the line dynamically using `d3.svg.line` with a selectable interpolation mode from a dropdown menu. Data points are generated programmatically with random coordinates, and rendering uses SVG with elastic transitions for point appearance. The editor relies on D3’s event handling for mouse and keyboard interactions (including DELETE key removal), with point selection highlighted in orange. Animated updates occur through D3 transitions, while the chart area is a large transparent rectangle capturing mouse events.

Mmbostock

73% match

Loading thumbnail…

Line Tension

Ten interpolated curves pass through a shared set of nine data points read from a TSV file, each drawn with a different tension parameter from 2/3 to 1 and colored from brown to steelblue. The visualization demonstrates the effect of tension on the cardinal spline interpolation provided by `d3.svg.line` with its `tension` method. The axes are generated using `d3.svg.axis` with linear scales on a 960×500 SVG canvas; each data point’s position is also marked by a hollow white circle.

Mmbostock

72% match

Loading thumbnail…

Piano spline

This example visualizes a dataset of 88 (x, y) points—reminiscent of piano keys—by drawing a smooth Catmull-Rom spline through them in SVG. It uses a JavaScript implementation of the spline with adjustable parametrization (uniform, centripetal, or chordal) to compute Bézier control points. The chart displays red input-point paths, blue spline points with interactive hover highlighting, and a side panel listing values for each point, rendered via native DOM and SVG APIs.

SSoumyaranjan Pal

71% match

Loading thumbnail…

d3 curve

This example shows a green curve rendered through an SVG path, connecting four user-defined points using D3’s line generator with the natural cubic spline interpolation. The curve’s shape is computed from the point coordinates, which are explicitly set inside the JavaScript code. D3.v5 is used to build the path data, while the path is appended to an `<svg>` element with the ID `svg1`. The page also includes a separate canvas element, though it is not involved in this rendering. The code references `getPointAtLength` to inspect the path geometry.

SSoumyaranjan Pal

70% match

Loading thumbnail…

Fork of Svelte + D3: Random Lines

This visualization shows 100 randomly generated lines that smoothly transition to new shapes every second. Each line is a natural cubic spline through a random walk of 100 points, rendered as a stroked SVG path with semi-transparent coloring. The animation leverages the Svelte `tweened` motion primitive combined with the `d3-interpolate-path` library to morph between path states. Svelte's reactive bindings to window dimensions and D3's `scaleLinear` and `extent` functions keep the chart responsive and properly scaled as the viewport changes.

CCurran Kelleher

69% match

Loading thumbnail…

Holy Moly:Beautiful Viz

This visualization displays 50 natural cubic splines that form a dynamic, morphing line field. Every two seconds, the dataset is regenerated as random walks, and the paths smoothly transition to their new positions using Svelte's `tweened` motion with `interpolatePath`, `cubicOut` easing, and a one-second duration. Each SVG path is rendered with a semi-transparent random RGB stroke, layered over a responsive full-viewport canvas. The code leverages d3's `line`, `curveNatural`, `scaleLinear`, and `extent` functions to compute and scale the coordinate systems.

NNita

69% match

Loading thumbnail…

Point-Along-Path Interpolation

A steelblue circle travels indefinitely along a closed Catmull–Rom spline path, interpolating its position over ten seconds per loop. Seven fixed white-ringed points mark the path’s control vertices. The SVG animation uses D3’s `transition.attrTween` with the path’s `getTotalLength` and `getPointAtLength` methods to compute each frame’s coordinates, while `d3.svg.line().tension(0)` defines the curve geometry.

Mmbostock

69% match