Convex Hull

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Dec 8, 2015

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.

AI-generated description

Andrew’s monotone chain algorithm computes the convex hull of a set of two-dimensional points.

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

89% match

Loading thumbnail…

Convex Hull

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.

FFrissAnalytics

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

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

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

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

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

67% match

Loading thumbnail…

Alpha-Shape Bounded Voronoi Tessellation

An interactive Voronoi tessellation divides a plane into cells around 100 randomly placed sites, with the site distribution forming two distinct clusters near the left and right edges. The visualization highlights the two clusters’ boundaries using a computed alpha shape, whose convex hull is expanded and then filled with additional artificial sites to constrain the tessellation. Built with d3.v4, it uses `d3.voronoi`, `d3.polygonHull`, and `d3.curveCatmullRomClosed` to calculate and render the polygons and hull path in SVG.

PPhilippe Rivière

67% match