Skip to main content
SimilarExport ZIP
100%

curve again.js Demo

✓ Published0🌍 Public
Pparniantaghipour
Last edited Nov 24, 2022
Created on Nov 21, 2022
Forked from SDCurve.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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
88% 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
87% match
Loading thumbnail…

curve again repair

This example plots the birth dates of historical women writers along a smooth, interactive Bézier curve. The curve is created using a custom SDCurve library, which subdivides a control polygon using a dynamic Levenberg algorithm, and is rendered as an SVG with D3.js. Each birth date is mapped to a point on the curve, with orange circles marking the positions, while the underlying data is loaded from a tab-separated values file (data.tsv) containing names and dates.

Pparniantaghipour
87% match
Loading thumbnail…

continues1.js

This example visualizes a dataset of authors with their birth and death dates by mapping each person to a position along a continuous, interactive Bézier-like curve. The rendering shows orange circles placed along a red skeleton curve, demonstrating a custom curve-subdivision algorithm. The code implements the visualization using D3 v3 for SVG rendering and data loading from a TSV file, while a custom `SDCurve` class defines the curve geometry with adjustable resolution and degree. Users can interact with the curve through mouse events, including dragging and double-clicking.

Pparniantaghipour
86% match
Loading thumbnail…

kidingme.js Demo

This demo uses a B-spline curve generated with the SDCurve library to map the birth dates of notable historical women from a TSV dataset. Each person is represented as a small orange circle positioned along the curve, with the data sorted chronologically by birth date. The visualization supports interactive dragging of the curve’s control points in SVG, allowing users to reshape the curve and see how the circle placement updates in real time. The demo is built with React, D3 v3 for SVG manipulation and event handling, and includes dynamic curve subdivision for smooth rendering.

Pparniantaghipour
85% match
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
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
80% match
Loading thumbnail…

firstDemo

A scatterplot of historical figures is drawn along a smooth red curve, with each point representing a person from a tab-separated dataset. The visualization uses d3.svg.line to connect points and d3.tsv to load the data, sorting individuals by birth date. The SVG rendering places orange circles along the curve, which is constructed using a custom SDCurve class with adjustable parameters. The user can interact with the curve, though the primary display focuses on the chronological distribution of birth years across the dataset.

Pparniantaghipour
80% match