Closest Point to Segment

100%

Closest Point to Segment

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Dec 14, 2012

A red circle tracks the closest point on a black segment to the cursor, with a dashed line connecting the cursor to that point and a label showing the segment's parameter value. The circle turns green when the closest point lies within the segment’s interior. Using D3 v3, the code computes the projection via the `pointLineSegmentParameter` function and updates SVG elements on `mousemove`. It also draws interpolated ticks and darkened endpoint markers to clarify segment geometry.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Closest Point on Path

A black cardinal-interpolated path connects ten fixed points. As the mouse moves over the SVG canvas, a red line and circle dynamically trace the nearest location on that path to the cursor. The example demonstrates an approximate algorithm built on D3 v3’s SVG path API, using `getTotalLength` and `getPointAtLength` for a coarse linear scan followed by a binary search to refine the result to roughly one pixel accuracy.

Mmbostock

78% match

Loading thumbnail…

Closest Line Segment

A brushless interaction demonstrates nearest-neighbor search over line segments. As the mouse moves, a red highlight identifies the closest segment to the cursor, with the active segment brought to the front. The example builds a binary tree of segment bounding boxes to accelerate the search, using a custom min-heap to prune distant branches. The segment geometry derives from a sine wave, rendered as SVG paths via `d3.geo.path`. The search logic is implemented in a standalone `tree.js` module, while `d3.mouse` handles coordinate tracking.

Mmbostock

76% match

Loading thumbnail…

Line Segment Intersection

An interactive line segment intersection test visualizes a red segment controlled by the mouse crossing a black horizontal sine wave. A spatial index tree organizes the wave's segments, and as the mouse moves, the d3.geo.path projection is used to redraw the test line, highlighting any intersecting segments in red. The example uses D3.js and a custom tree.js data structure to efficiently query for collisions based on bounding-box extents.

Mmbostock

71% match

Loading thumbnail…

Closest Point on Path II

This example demonstrates an approximate method for finding the closest point on an SVG path by sampling points along the path and computing their Voronoi tessellation. A range slider controls the sampling distance, where denser samples yield more accurate results but are computationally more expensive. The visualization uses d3.geom.voronoi to create the tessellation, d3.svg.line for path interpolation, and SVG path APIs like getPointAtLength and getTotalLength for sampling. Hovering over any Voronoi cell highlights the corresponding cell and its sampled point, visualizing how the approximation changes with sample density.

Mmbostock

70% match

Loading thumbnail…

Segmented Lines

Four time series are drawn as thick segmented lines, each segment colored green, gray, or red based on its slope via a linear color scale from 0 to π. Circles mark every data point, while the y-axis is scaled to the maximum of all series, loaded from a local JSON file. The code uses d3.svg.line with segment arrays generated by a helper function, and applies stroke styling through d3.scale.linear and Math.atan2 on segment endpoints.

Mmbostock

68% match

Loading thumbnail…

Circle-Polygon Intersection

A red circle and a black polygon are displayed on an SVG canvas, and the circle changes from red to green when the polygon intersects it. The polygon’s vertices are draggable control points; dragging them updates the polygon’s path and recomputes the intersection state. It uses D3 v3’s `d3.behavior.drag`, along with custom geometric functions (`pointInPolygon`, `pointLineSegmentDistance`) to test whether the circle’s center or any edge of the circle is inside the polygon or within its radius.

Mmbostock

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

67% match

Loading thumbnail…

point

A single yellow circle follows the mouse cursor within an SVG canvas, serving as a simple interactive point visualization. The React application tracks mouse movement via an onMouseMove handler, updating the circle's cx and cy coordinates through React's useState hook. Using a production build of React 16.9.0, the code renders a 600x300 SVG element and directly manages state updates on every cursor position change, with no additional D3 functions beyond the imported arc utility.

Rredeath96

67% match