Convex Hull

100%

✓ Published0🌍 Public

Last edited Oct 11, 2018

Created on Oct 11, 2018

A set of 100 randomly positioned points forms a convex hull, depicted as a rounded, padded blue polygon that encloses the outermost points. Users can move the first point by moving the mouse and add new points by clicking, which recomputes the hull in real time. The example uses d3.geom.hull to calculate the polygon boundary and d3’s selection and data-join methods to update the SVG circles and path. Drawing occurs in SVG with d3.v3, and the hull’s thick stroke visually pads the geometric outline.

AI-generated description

This example uses d3.geom.hull to compute the 2D convex hull of a set of points. An outer stroke is used to pad the hull. Click to add a new point.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4341699'>Convex Hull</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Convex Hull

This example visualizes the convex hull of a set of normally distributed points, updating live as the user moves the mouse to reposition the first point or clicks to add new points. The hull is rendered as a padded, rounded stroke path, using `d3.geom.hull` to compute the polygon from the current vertex array. The points themselves are drawn as white circles with black strokes, and their positions are updated via `attr("transform", ...)` translations. All rendering is done with SVG elements, and the example relies on `d3.select`, `d3.mouse`, and `d3.range` for interaction and data generation.

Mmbostock

91% match

Loading thumbnail…

Convex Hull

A set of one hundred normally distributed points is enclosed by their convex hull, a steel-blue polygon computed with Andrew’s monotone chain algorithm via the `d3-polygon` `hull` function. As the mouse moves, the first point is repositioned and the hull is recomputed in real time. The visualization is drawn on a Canvas using the standard `canvas` API, with the underlying point set generated by `d3-random.normal` from the `d3-random` library.

Mmbostock

89% match

Loading thumbnail…

Image Hulling

Image Hulling turns a photograph into a stylized mosaic by sampling pixel colors and using d3’s Delaunay triangulation to connect them into a concave hull. The visualization displays a color-based image outline, with the concavity of the hull controlled by a distance metric calculated from the Delaunay triangles, and the original image is shown alongside for reference. A custom d3.geom.concaveHull plugin is used to generate the outline, with optional padding, and the final result is rendered with both SVG and canvas to show the image regions.

DDinoJay

75% match

Loading thumbnail…

Circular Bounded Voronoi Tessellation

This example displays a Voronoi tessellation of one hundred randomly placed circular sites, with a colored convex hull that fully encloses the diagram and a single site that follows the mouse. The hull shape is derived from `d3.polygonHull` and then expanded outward along each vertex’s centroid radial angle using a distance calculated from the median of the Delaunay links, computed with `d3.median`. The code uses `d3.voronoi` with an extent, and renders the result as SVG paths, lines, and circles. The convex hull itself is drawn as a closed Catmull‑Rom curve via `d3.line().curve(d3.curveCatmullRomClosed)`, with additional artificial points added along the expanded hull boundary to ensure the tessellation stays within it.

PPhilippe Rivière

75% match

Loading thumbnail…

Force-Directed Layout with Convex Hull

A force-directed layout arranges 100 nodes into four groups, each distinguished by color and encircled by a semi-transparent convex hull that updates live as the nodes move under simulated forces. The D3.js code nests nodes by group using `d3.nest()`, then draws the hulls by recomputing their paths with `d3.geom.hull` during the `force.on("tick")` callback. The SVG animation also supports dragging and re-randomizing positions to demonstrate the clustering.

FFrissAnalytics

72% match

Loading thumbnail…

Bounded Voronoi Tessellation

This interactive visualization demonstrates a bounded Voronoi tessellation, where 100 randomly placed sites partition the SVG canvas into colored polygonal cells. The mouse controls the first site, dynamically updating the diagram as it moves. The code uses d3.voronoi to compute the tessellation and d3.polygonHull to create a convex hull around the sites, which is then expanded outward to bound the diagram. Artificial points are added along this expanded hull to ensure the Voronoi cells are fully enclosed, with the generator sites rendered as circles and the convex hull traced as a pink line.

PPhilippe Rivière

71% match

Loading thumbnail…

D3.js

This D3.js example demonstrates the marching squares and convex hull algorithms from the d3.geom module, rendering SVG polygons with animation. The visualization computes contour polygons for a given grid function and convex hulls for sets of points, displaying them as animated vector graphics. Using d3.v2, the code samples highlight algorithmic geometry operations (contour tracing and Graham scan) implemented in D3's geometry namespace, with the SVG rendering showing how these computed polygons adapt dynamically as the underlying data changes.

GGerHobbelt

70% match

Loading thumbnail…

Force-Directed Layout with Convex Hull

A force-directed layout positions 100 randomly generated nodes into 30 groups using a simulation from the d3.forceSimulation API, with forces for charge, collision, and x/y anchoring. The nodes are grouped by index modulo 30, and a Voronoi partition, created via d3.voronoi, draws convex hull-like polygons around each node’s cell in red on mouseover. The SVG output animates over 120 simulation ticks, filling each polygon white and outlining it in black, with node colors assigned from d3.schemeCategory20. The data is procedurally generated, not from an external source, and rendered entirely in the browser.

CCtuauden

69% match