mid-point-curves

100%

mid-point-curves

✓ Published0🌍 Public

Last edited Aug 22, 2016

Created on Feb 26, 2015

Three draggable points define a set of straight, diagonal, and quadratic Bézier curves between them. As the user drags a point, the visualization recomputes and redraws each connection, showing the midpoint, a projected point, and the curve that passes through them. The SVG rendering uses dashed paths and colored circles to reveal the geometric construction behind the quadratic curves.

AI-generated description

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

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

71% match

Loading thumbnail…

bezier-dollars

This example uses cubic Bézier curves to connect 20 circles on the left to two sets of rectangles on the right, with the connections splitting into two groups based on random selection. Each path animates its stroke-dashoffset to draw the curve from left to right, while hovering over a circle triggers a dollar sign to travel along the associated path via a tween that samples points with getPointAtLength. The visualization relies on D3 v3 for scales, transitions, and DOM manipulation, and on Lo-Dash for helper functions like range and contains. The animation reveals the mapping between the circle indices and the filtered rectangle points, creating an economic-looking flow diagram.

11wheel

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

Loading thumbnail…

rounded-corner-curve

An interactive line chart demonstrates a technique for drawing smooth paths with rounded corners through data points, contrasting it with a standard linear interpolation. The example generates random data and displays two paths: a default black line and a magenta path with rounded corners. Moving the mouse horizontally adjusts the rounding intensity in real time, revealing how the SVG path `C` (cubic Bézier) commands create the effect. The code uses d3.js for data generation and SVG path construction, with custom logic for path string manipulation.

11wheel

69% match

Loading thumbnail…

Untitled

A black cubic Bézier path is drawn on an SVG canvas using D3 v4, with its total length queried via `getTotalLength()`. The example marks two points sampled along the path at 50% and 78% of its length, using `getPointAtLength()` to position small red and blue circles. A green line is then constructed between the two points and extended backwards to the canvas edge, demonstrating how to compute a secant line from arbitrary positions along a vector path. The visualization uses inline SVG elements created through D3's selection API, with styling applied via a linked CSS file.

RRSSBDAE

69% match

Loading thumbnail…

line-intersection

This example demonstrates an interactive line-intersection visualization, where users can add points by clicking on a canvas and drag them to see the resulting line segments and their intersections update in real time. The visualization highlights the geometric intersection points between line segments connecting all pairs of points, with a vertical divider separating the interactive area from a static queue preview. The rendering uses SVG with points, lines, and pair paths, and includes a side panel that shows a scaled representation of the point coordinates. The underlying code provides utility functions for point, distance, angle, and intersection calculations, and uses a sorted array with a custom bisector to manage points.

11wheel

68% match

Loading thumbnail…

linecross labels

This example shows how to connect labeled points to a series of evenly spaced endpoints using angled and straight line segments. Colored circles on the left link to larger target circles on the right through two distinct line types, with the bend point shifting between a shared midpoint and a point based on the source x-coordinate depending on the item’s index. The visualization renders three SVG charts side-by-side at different widths, using d3.scaleLinear for vertical positioning and d3-selection-multi’s attrs method to set line and circle properties. The dataset is a hardcoded array of seven objects with x, y, and color values.

PPatrick Wojda

68% match