Intersections of two circles

100%

Intersections of two circles

✓ Published0🌍 Public

Last edited Sep 25, 2019

Created on Sep 25, 2019

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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

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

79% match

Loading thumbnail…

Drag circles

Five colored circles are positioned in a row on an 800×480 SVG canvas, each with a radius of 60 pixels. The example demonstrates a basic drag-and-drop interaction using D3.js v4, where users can move any circle freely by clicking and dragging it. The circles change cursor to a move icon on hover and gain a black outline while being dragged. The code uses `d3.drag()` with `dragstarted`, `dragged`, and `dragended` handlers, along with `d3.scaleOrdinal` and `d3.schemeCategory20` for coloring, and `d3.select(this).raise()` to bring the active circle to the front.

EEfratVil

76% match

Loading thumbnail…

overlapping circles

Four orange circles and one steel-blue circle overlap at the center of an SVG canvas. The visualization demonstrates grouping and repositioning: the four identical orange circles are detected as an overlapping cluster and spread horizontally above the original join point, connected by black lines. The lone steel-blue circle remains in place. Built with D3 v4, the code uses SVG circle elements and manual selection via `d3.selectAll`, with grouping logic based on matching `cx` and `cy` attributes.

PPatrick Wojda

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

75% match

Loading thumbnail…

Draggable Circles with D3-Drag

This example demonstrates draggable circles on a light green background. Users can click and drag any of the six colored circles, and their positions update in real time. The visualization uses D3’s `drag` behavior to listen for drag events, updating the `x` and `y` properties of the corresponding data object. Circle positions are rendered with SVG `<circle>` elements, bound to the data via a data join and refreshed through state management. The code imports `select` and `drag` from the D3 library, with initial circle coordinates and radii defined in a hardcoded array.

CCurran Kelleher

74% match

Loading thumbnail…

d3js workshop - circles 2

This example demonstrates three circles that animate and respond to user interaction. The circles initially appear at set positions, then transition to a new radius and vertical offset before returning to their original state on mouseover. A click event is also set up to shrink a circle out of existence. The visualization uses D3.js v3, selecting SVG elements and binding data to create the circles, with transitions controlling the animated changes and event listeners handling mouseover and click actions.

AAlbertFranco

74% match