Apollonius’ Problem II

100%

Apollonius’ Problem II

✓ Published0🌍 Public

Last edited Mar 18, 2018

Created on Mar 18, 2018

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.

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.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/7115f7a0393de96f2fdc'>Apollonius’ Problem II</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/e6c33353e2987e8e12a7c903b4b5e347'>Apollonius’ Problem II</a>

gpl-3.0 Licensed

Similar vizzes

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

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

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

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

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

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

73% match

Loading thumbnail…

Circle Dragging II

This example shows a canvas-based visualization where users can drag any of twenty randomly positioned circles. It uses the d3.drag module with a custom subject function for hit-testing, checking if the pointer falls within a circle’s radius. During a drag, the circle is reordered to the foreground, marked with a temporary stroke, and its position updates, triggering a redraw via render listeners. The implementation relies on D3 v4’s event handling, Canvas’s 2D context, and d3.scaleOrdinal with the schemeCategory20 palette for circle fill colors, producing smooth, interactive feedback.

Mmbostock

72% match