Spline Editor

100%

✓ Published0🌍 Public

Last edited Feb 26, 2019

Created on Dec 20, 2012

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.

AI-generated description

Click to add new points. Hit the DELETE key to remove the selected point. Use the dropdown menu to change the interpolation mode.

Similar vizzes

Loading thumbnail…

D3 Curve Explorer

This interactive example shows how different D3 curve types interpolate the same set of draggable points, with buttons to toggle curve families and variants like `curveLinear`, `curveBasis`, `curveBundle`, and `curveCardinal` at various parameters. A sidebar displays a description of the active curve. Users can drag points, add new points via the plus icon, and remove them with the minus icon, all rendered as SVG elements. The code uses D3 v4’s shape API to generate the path data and event handlers for mouse interaction.

Vvivianaaai@qq.com

76% match

Loading thumbnail…

SDCurve.js Demo

This demo shows an interactive SDCurve.js curve editor where users can manipulate a spline defined by four control points. The SVG rendering displays a white curve over a dark background, with the curve dynamically subdivided and smoothed using the dyn-levin algorithm. The code loads biographical data from a TSV file containing 19th-century women writers, though the data-loading routine appears incomplete. Built with React and D3 v3, the visualization supports mouse interaction, including dragging control points and adjusting curve resolution and degree parameters.

Pparniantaghipour

75% match

Loading thumbnail…

Spline Transition

A path of normally distributed random data, rendered as a smooth basis-interpolated line, continuously scrolls leftward as new points append and old ones shift off. The animation loops by chaining transitions with `d3.active` and `transition.on`, updating the `d` attribute via `d3.line` before translating the SVG path. A `clipPath` rect hides the sliding tangent change at the edges. The example uses d3.v4, random samples from `d3.randomNormal`, and SVG axes with `d3.axisBottom` and `d3.axisLeft`.

Mmbostock

75% match

Loading thumbnail…

Spline Transition

A smooth line continuously shifts leftward as new random data points, generated by `d3.randomNormal`, are appended and old ones removed. The `d3.line` path with `d3.curveBasis` interpolation animates via a `transition` that slides the SVG element using a transform, while a `clipPath` rect masks the line so the changing tangent at the boundary remains hidden. The axes use `d3.axisBottom` and `d3.axisLeft` on linear scales.

深深度碎片

74% match

Loading thumbnail…

New Splines!

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.

Mmbostock

73% 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

72% 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

70% match

Loading thumbnail…

curve again.js Demo

This example shows an interactive SVG visualization of a smooth curve generated from a set of control points, with a dataset of historical figures plotted as points along the curve based on their birth dates. The visualization uses the D3.js v3 library with a custom SDCurve object implementing dynamic Levin-type subdivision for curve refinement. Users can drag control points to reshape the curve in real time, and the data points reposition accordingly, illustrating how the curve acts as a timeline mapping individuals’ birth dates to positions in two-dimensional space. The rendering is done via SVG circles and paths, with data loaded from a TSV file.

Pparniantaghipour

70% match