D3 Curve Explorer

100%

D3 Curve Explorer

✓ Published1🌍 Public

Last edited Nov 7, 2023

Created on Nov 7, 2023

Forked from Ease

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

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

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

80% match

Loading thumbnail…

D3 Line - Curve

Two SVG panels compare a standard D3 line path with a curved variant using D3 version 7. The code draws a linear path through six explicit coordinate points (x, y), then applies `d3.curveCardinal` to the same data via `d3.line().curve()` to produce a smoother interpolation. Each panel renders the resulting path as an SVG `<path>` element using the `lineGenerator` and `curveGenerator` functions, overlaid with reference circles marking the original data points. The example demonstrates how the curve generator modifies the path data without changing the underlying dataset.

SSubhendu Karmakar

77% match

Loading thumbnail…

D3Path

D3Path demonstrates two fundamental D3.js geometry primitives rendered as SVG paths. The left side plots a polyline through four explicit data points using `d3.line()`, with commented-out curve options (`d3.curveCardinal`, `d3.curveBasis`, etc.) illustrating alternative interpolation strategies. The right side draws three concentric arc segments using `d3.arc()` with varying radii (`innerRadius`, `outerRadius`), angles, and padding (`padAngle`) to produce multi-colored pie-like wedges. The example uses hardcoded JavaScript arrays for data and D3 v6 directly from the unpkg CDN, with an SVG canvas sized 1600x800, showcasing basic path construction without external styling.

Vvivianaaai@qq.com

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

76% match

Loading thumbnail…

hello path

This example demonstrates two fundamental D3.js path generators: `d3.line` and `d3.arc`. A black polyline connects four data points, with commented-out curve options like `d3.curveCardinal` and `d3.curveBasis` showing alternative interpolation methods. Beside it, three arc segments rendered via `d3.arc` form a partial donut chart with varying inner radii, fill colors, and a pad angle, all drawn as SVG paths on a 1600x800 canvas.

Vvivianaaai@qq.com

75% match

Loading thumbnail…

working Demo

This demo shows a red interactive curve overlaid on a scatterplot of historical female writers’ birth and death dates from a TSV dataset. Users can drag points on the curve’s control polygon to reshape the smooth spline in real time, with the underlying data points repositioned along the curve. The visualization is built with React and D3 v3, rendering SVG paths via `d3.svg.line` and a custom `SDCurve` class that implements Dyn-Levin subdivision.

Pparniantaghipour

75% match