Closest Line Segment

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.

78% match

Closest Point to Segment

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.

76% match

Gist 79ed32828a2db39ec232

This example demonstrates a divide-and-conquer binary search tree constructed over a set of disjoint line segments that span a horizontal strip, with endpoints on two parallel lines. It visualizes how the segments partition the strip into regions and how a query point can be located by traversing the tree. The code uses D3.js with SVG to draw the segments, circles, and tree edges, and employs custom helper functions like `dataAppend` and `translate` from d3-jetpack. The tree is built by recursively splitting the sorted list of bottom endpoints, and the visualization highlights the connection between the geometric arrangement and the hierarchical search structure.

71% match

Quadtree Search

This example shows a quadtree search for the nearest point to the mouse cursor among 2,500 randomly generated points. As the cursor moves, the closest point is highlighted in red. The visualization renders the quadtree’s subdivisions as gray rectangles and the points as black circles using SVG. It uses d3.quadtree with the find method, along with d3.mouse and quadtree.visit to display the search hierarchy.

68% match

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.

68% match

n-line intersection

This example visualizes the Bentley-Ottmann algorithm for finding intersections among multiple line segments, using an animated sweep line to show when segment adjacency changes. The left panel displays the segment ordering as a sequence of dots, with black lines connecting newly adjacent pairs that are checked for potential crossings. The right panel renders the segments themselves, highlighting intersection points in red. The code uses D3.js with custom helper libraries (d3-jetpack, d3-starterkit, geometry) for SVG rendering, along with Lodash for utility functions. The animation progressively updates the sweep line position, demonstrating how the algorithm maintains order and only tests nearby segments.

67% match

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.

64% match

two line intersection

A draggable line-intersection demo lets the user move four endpoints to see where two line segments cross. The intersection point is drawn as a small circle, which turns red only when the segments actually intersect; otherwise it stays gray. The visualization uses D3’s drag behavior and data joins to bind the points and path elements, while a custom `intersection` function in `geometry.js` computes the crossing and checks whether it lies on both segments. Rendering relies on SVG paths and circle elements, with coordinates updated on each drag event.