Circle-Polygon Intersection

100%

Circle-Polygon Intersection

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Dec 5, 2012

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.

AI-generated description

Drag the control points of the polygon to see whether the polygon intersects with the circle.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Point-in-polygon

This example demonstrates the point-in-polygon algorithm by letting users draw a polygon directly on an SVG canvas while 1000 randomly placed dots update in real time. Dots that fall inside the drawn shape turn red, while those outside remain steel blue. The implementation uses D3 v3’s `d3.behavior.drag` to capture mouse coordinates and a ray-casting algorithm to test each point against the polygon’s vertices. A clear link resets the visualization by removing the drawn path and deselecting all dots.

JJustinGOSSES

80% match

Loading thumbnail…

Intersections of two circles

Two draggable circles show the geometric intersection points between them. As either circle moves, the two intersection points, rendered as red dots, update in real time. When the circles do not overlap, the dots disappear. The example uses D3 v4 with SVG elements, applying the `d3.drag` behavior to handle mouse interaction and a custom JavaScript function to calculate the circle intersections, based on a Stack Overflow solution.

11Cr18Ni9

79% match

Loading thumbnail…

Circle Dragging IV

This example demonstrates an improved method for dragging SVG circles, where the circle nearest to the pointer is selected for interaction rather than the topmost one. A Voronoi overlay, computed with `d3.voronoi`, is used for hit-testing, with its cells rendered as light-gray paths. Each circle is clipped to its corresponding Voronoi cell using a `clipPath`. During a drag, the `dragged` function updates the circle’s position and recalculates the Voronoi polygons. The code uses `d3.drag` for the interaction and `d3.scaleOrdinal` with `d3.schemeCategory20` for automatic circle colors.

Mmbostock

74% match

Loading thumbnail…

Circle Dragging I

This example shows a set of colored circles scattered across an SVG canvas, which users can drag with the mouse. Each circle’s position is stored as x and y properties in its data object, and those values update live during the drag. The code uses d3.select and d3.drag from the d3-drag module to handle the interaction, attaching event handlers for start, drag, and end. At drag start, the circle is raised to the foreground with `.raise()` and gets a black stroke via the `.active` class; the stroke is removed on release. The circles are rendered as SVG `<circle>` elements, colored with a categorical scheme from `d3.scaleOrdinal` and `d3.schemeCategory20`, with random initial positions computed from the SVG’s dimensions.

Mmbostock

74% match

Loading thumbnail…

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.

11wheel

73% match

Loading thumbnail…

circle-arc-drag

This example demonstrates how a draggable arc can be reconstructed from three movable points, showing the relationship between a circle's geometry and its SVG path. The code uses D3 v3’s `d3.behavior.drag` to update point positions, then calculates the circumcircle and radius via trigonometric formulas, applying the large-arc and sweep flags to render the correct arc. The visualization starts with a pre-defined path parsed into three points using `getTotalLength` and `getPointAtLength`, and the SVG `path` element updates on each drag event. Circles and paths are styled with strokes and fills, with the background set to black.

11wheel

72% match

Loading thumbnail…

Circle-Circle Intersection

This example shows the two intersection points where a pair of overlapping circles meet, updating live as the circles move under a force simulation. The circles are positioned by `d3.forceSimulation`, and each frame the code extracts their current centers and radii to compute the chord endpoints via a custom `intersections()` function based on the standard geometric formula. The two crossing points are then drawn as small blue dots, while the circles themselves are rendered as SVG circles. The implementation uses D3’s simulation and selection APIs to bind data and update positions smoothly.

Mmbostock

72% match

Loading thumbnail…

Rounded Corner

This example demonstrates how to compute a rounded corner between a line and a circle, using geometric offsets and circle-line intersection formulas. The SVG rendering shows the original line, the outer circle, a dashed offset circle, and the resulting corner circle in red, along with its origin and tangency points. The code relies on D3.js v3 to append SVG elements and markers, while performing manual trigonometric calculations for the perpendicular and parallel offset lines, and solving the intersection to place the corner circle. The visualization clarifies the construction steps without any interaction or animation.

Mmbostock

71% match