Circle-Circle Intersection

100%

Circle-Circle Intersection

✓ Published0🌍 Public

Last edited Jul 12, 2012

Created on Jul 12, 2012

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.

AI-generated description

Similar vizzes

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

81% match

Loading thumbnail…

Collision Detection

A thousand circles of random radii are arranged into a tidy cluster, with d3.forceCollide preventing any overlap between them while d3.forceX and d3.forceY gently pull the whole group toward the center. The simulation runs on a fixed 960×960 canvas, where each tick clears the drawing and renders all circles as filled and stroked arcs. The code uses d3.forceSimulation with a velocity decay of 0.2, and draws the result directly via the Canvas 2D API.

Mmbostock

75% match

Loading thumbnail…

no overlap circles one axis

Seven dark circles all start at the vertical center of a small SVG canvas. A custom force function pins each circle’s x-coordinate to the middle of the frame while clamping its y-coordinate within the bounds. The d3.forceSimulation API applies a repulsive `forceManyBody` force, causing the dots to spread vertically into a column. After 100 ticks, a second set of red circles is drawn over the final positions, showing the result with faint overlaps.

PPatrick Wojda

74% match

Loading thumbnail…

Collision Detection

Interactive collision detection shows 200 colored circles moving inside a rectangular SVG viewport. Moving the mouse repels the circles, pushing them apart and causing them to collide and bounce off one another. The visualization uses D3 v3’s force layout and quadtree-based collision handling via `d3.layout.force` and `d3.geom.quadtree`, with mouse movement updating a fixed root node to drive repulsion. Rendering is done with SVG circle elements, and the force simulation updates their positions on each tick.

Mmbostock

73% match

Loading thumbnail…

Circles bouncing inside a rectangle

This example shows twenty colored circles bouncing and colliding within a rectangular boundary, with each circle moving at a constant speed and bouncing off the walls. The visualization adapts D3.js’s force layout to animate the circles, using custom gravity and collision functions to handle wall reflections and circle-to-circle collisions. The code relies on `d3.layout.force` for the simulation loop, `d3.geom.quadtree` for efficient collision detection, and SVG elements for rendering. Circle positions and velocities are manually updated in the tick function, while a static rectangle outlines the containment area, and the data consists of randomly generated circles with varied radii and colors.

663anp3ca

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

72% match

Loading thumbnail…

Collision Detection

This example demonstrates a collision-detection simulation using D3.js v4, displaying 1000 circles of varying sizes that repel each other while being pulled toward the center of a 960×960 canvas. The visualization uses `d3.forceSimulation` combined with `d3.forceCollide`, `d3.forceX`, and `d3.forceY` to compute particle positions, while rendering occurs via Canvas 2D API calls like `clearRect` and `context.arc`. The force-collision algorithm prevents overlaps by iterating collision checks twice per tick, and randomized radii from 4 to 18 pixels create the visual variety. All drawing is handled directly on the Canvas element rather than through SVG, producing a smooth real-time animation.

FFrissAnalytics

72% match