Apollonius’ Problem

100%

Apollonius’ Problem

✓ Published0🌍 Public

Last edited May 20, 2017

Created on Aug 3, 2015

Three translucent circles, each labeled with a central handle, sit on a blank SVG canvas, and a fourth circle—rendered as a thin outer ring with a faint inner stroke—is tangent to all three. Dragging any of the three circles with the mouse updates the tangent circle’s position and radius in real time. The code computes the tangent circle’s center and radius using an algebraic solution to Apollonius’ problem, implemented in the `apolloniusCircle` function, and applies it via D3 v3’s `d3.behavior.drag`, `d3.select`, and SVG circle elements.

AI-generated description

Apollonius’ problem is to compute the circle that is tangent to three given circles. There are up to eight such circles. Above, only one is shown: the circle that is internally tangent to the three given circles, if it exists.

Drag the circles to see the tangent circle change.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Apollonius’ Problem II

Three circles in semi-transparent blue, orange, and green are drawn on an SVG canvas and can be dragged with d3.behavior.drag. As they move, eight thin concentric ring pairs appear, each representing one solution to Apollonius’ problem: a circle tangent to all three given circles, computed via the apolloniusCircle function and rendered with d3.v3 selections. The rings update live during dragging, using the current positions and radii stored in the bound data objects.

MMartyBonacci

90% match

Loading thumbnail…

Apollonius’ Problem II

Apollonius’ Problem II visualizes the up to eight circles tangent to three given circles, computed via the apolloniusCircle function. Three semi-transparent gray circles are draggable using d3.behavior.drag, and eight colored rings update in real-time to show all tangent solutions. The SVG rendering uses D3 v3, with each ring computed from sign combinations of the input radii and stroke colors assigned via d3.scale.category10.

Mmbostock

89% match

Loading thumbnail…

Smallest Enclosing Circle

Five semi-transparent circles are scattered across an SVG canvas, each draggable with the mouse. As the user drags them, a thin, dark ring continuously updates to show the smallest circle that contains all of them. The visualization uses D3 v3’s `d3.behavior.drag` for interaction and computes the enclosing circle with a recursive implementation of Welzl’s algorithm, including an Apollonius-based solution for the circle tangent to three given circles. The result is rendered as SVG shapes, with the outer ring and an inner offset ring styled via CSS classes.

Mmbostock

78% 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…

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…

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

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…

d3js workshop - circles 2

Three circles of different data values appear in an SVG canvas, then animate by shifting downward and turning red before returning to their original positions on mouseover. The example demonstrates basic D3.v3 selection, data binding, and transition APIs, including `transition().delay().duration()`. Interactive event handling is implemented through `.on("mouseover")`, which changes circle styling and radius. The code initializes an SVG element with `d3.select('body').append('svg')` and uses a data array `[10, 20, 30]` to map circle positions.

LLelandCurtis

72% match