Skip to main content
SimilarExport ZIP
100%

Apollonius’ Problem II

✓ Published0🌍 Public
Mmbostock
Last edited May 19, 2017
Created on Aug 3, 2015

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.

AI-generated description

Apollonius’ problem is to compute the circle that is tangent to three given circles. There are up to eight such circles.

Drag the circles to see the tangent circles 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
92% match
Loading thumbnail…

Apollonius’ Problem

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.

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
75% match
Loading thumbnail…

Circles with D3

Seven circles of varying sizes and colors float on a muted pink background. The visualization demonstrates static circle generation using D3 v7, with each circle’s position, radius, and fill color defined in a hardcoded array. The code uses `select`, `join`, and attribute setters like `.attr('cx')` and `.attr('r')` to render the shapes. A fixed opacity of 0.63 is applied uniformly, and the SVG resizes to its container dimensions.

Iissam.benabid@gmail.com
72% match
Loading thumbnail…

Olympic Circles with D3

This example renders the Olympic rings as five semi-transparent circles arranged in the classic overlapping pattern against a light green background. The code uses D3’s `select` and `join` pattern to bind an array of coordinate and color data to SVG `circle` elements, setting each circle’s `cx`, `cy`, `r`, and `fill` attributes directly. The rings are drawn statically with an opacity of 0.7, emphasizing the layered interlocking effect rather than animation.

Bbenclark.3rd@gmail.com
72% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
72% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
72% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
72% match