Smallest Enclosing Circle

100%

Smallest Enclosing Circle

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Aug 5, 2015

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.

AI-generated description

The smallest circle that encloses a set of given circles can be computed using a variant of Welzl’s algorithm. Instead of testing whether a circle contains a point, test whether a circle contains another circle; likewise instead of computing the circle that intersects two or three points, compute the circle that has internal tangents to two or three circles. (The latter is Apollonius’ problem.)

Drag the circles to see the enclosing circle change.

gpl-3.0 Licensed

Similar vizzes

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

78% match

Loading thumbnail…

Fork of Circles with D3

This example showcases five static, semi-transparent circles scattered across an SVG canvas, each with a distinct size, position, and color. The code uses D3 v3’s `select` and data joins to bind an array of circle objects to SVG elements. Rendering is driven by setting attributes like `cx`, `cy`, `r`, and `fill` directly from the data, with a fixed opacity value of 0.5. The visualization is a minimal demonstration of D3’s declarative approach to creating simple geometric shapes from a hardcoded dataset.

DDonald Bagwell

77% match

Loading thumbnail…

Circling Circles

A static SVG scene shows a large green circle, centered on a white background, whose thick black outline is punctuated by four smaller blue circles positioned at the cardinal points. Each small circle has its own yellow stroke, and the arrangement suggests a minimalist orbital motif. Built with React, the markup is generated via JSX, while D3 v5 is imported for its `select` API, though the visualization itself relies purely on SVG circle elements and window dimensions for sizing.

KKamalabot

76% match

Loading thumbnail…

Compact circles

This example displays a dense cluster of small semi-transparent circles scattered within a larger bounding circle on an SVG canvas. The visualization uses a nested loop over a fixed array of values to generate candidate positions, then filters them with a distance check against the container radius. Built with React and ReactDOM, it renders each circle as an SVG `<circle>` element, using the `Math.random()` function to jitter the positions so the distribution appears organic.

NNita

76% match

Loading thumbnail…

Untitled

This example shows a nested set of concentric circles centered on a 550 by 550 SVG canvas, with the two largest circles filled in pale pink and thinner grey outlines marking the inner radii. The visualization uses only static SVG elements—specifically `circle` tags with explicit pixel coordinates—so no JavaScript libraries or data-binding frameworks are involved. The rendering approach relies on basic SVG attributes like `fill`, `stroke`, and `r` to create a simple radial hierarchy, suggesting a possible target for force-directed or layered layout experimentation, though no dynamic behavior is present.

AAdrSieber

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

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

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

75% match