geoVoronoi.hull()

100%

geoVoronoi.hull()

✓ Published0🌍 Public

Last edited Aug 31, 2021

Created on Sep 8, 2016

This example visualizes the convex hull of country bounding boxes grouped by World Bank subregion on a rotatable, zoomable orthographic globe. It cycles through subregions, highlighting the spherical convex hull computed from the corners of each country's bounding box. Built with d3-geo-voronoi's `geoVoronoi().hull()` and `d3.geoPath()`, it renders SVG paths for countries, hull polygons, and sites. The code loads country GeoJSON data, applies special handling for Antarctica and French Guiana, and supports drag-to-rotate and zoom interactions.

AI-generated description

Use geoVoronoi.hull to compute the convex hull of a set of points in spherical coordinates.

Countries are grouped by their (World Bank) subregion, and we extract the bounding box for each of them. Then we highlight the convex hull of the set of all corners of the bounding boxes.

(With a special treatment for Antarctica and French Guyane.)

Watch, drag, and zoom.

mit Licensed

Similar vizzes

Loading thumbnail…

geoVoronoi mesh()

This example shows a dynamic Voronoi diagram on a globe, with a mesh of cell boundaries overlaid on a rotating orthographic projection. It generates 100 random geographic points, computes their spherical Voronoi tessellation using the `d3.geoVoronoi` plugin, and renders the resulting polygons and sites as SVG paths via `d3.geoPath`. The animation uses `d3.interval` to rotate the projection over time, continuously redrawing all paths. The code relies on D3 v4, the d3-delaunay library, and custom geo-Voronoi logic, with a light beige sphere and dark gray mesh for contrast.

PPhilippe Rivière

76% match

Loading thumbnail…

geoVoronoi triangles()

This example visualizes a spherical Voronoi triangulation of 100 random points, with each triangle filled by a random hue and the original sites marked as white dots. The orthographic projection rotates continuously to reveal the globe’s surface. Built with d3-geo-voronoi and d3-delaunay, it uses d3.geoPath and d3.geoOrthographic to render SVG paths, while d3.interval drives the animation by updating the projection’s rotation every 50 milliseconds. The points are generated as a GeoJSON FeatureCollection with coordinates spanning longitude 0–360 and latitude from -90 to 90.

PPhilippe Rivière

76% match

Loading thumbnail…

geoVoronoi circumcircles

This example visualizes the Voronoi tessellation of a sphere using 100 random points, rendered as colored triangles with white links and site markers. Hovering over a triangle reveals its circumcircle, drawn as a semi-transparent circle with dashed rays connecting the circumcenter to each vertex. Built with D3 v5 and the d3-geo-voronoi plugin, it uses d3.geoPath with an Equal Earth projection to draw the geometry in SVG, and d3.geoCircle to construct the interactive circumcircles.

PPhilippe Rivière

75% match

Loading thumbnail…

Spherical alpha shapes with d3-geo-voronoi

This interactive orthographic globe displays the connected boundary around a subset of world capitals, computed as spherical alpha shapes. The visualization merges Delaunay triangles from `d3.geoVoronoi` whose edges fall under a distance threshold, then traces the outer boundary of the merged triangles. The resulting polygon is rendered via `d3.geoPath` using an orthographic projection, overlaid on a graticule and city points. The globe slowly rotates by updating the projection’s rotation within a `d3.interval` loop.

PPhilippe Rivière

75% match

Loading thumbnail…

geoVoronoi x() and y() accessors

A rotating globe displays a Voronoi diagram of world capital cities, with each polygon filled by a categorical color from the `d3.schemeCategory10` palette. The map is rendered using `d3.geoVoronoi` and `d3.geoOrthographic`, with `d3.geoPath` projecting the spherical polygons onto an SVG canvas. Capital city coordinates are loaded from a CSV file, and the `x()` and `y()` accessors are used to map longitude and latitude while adding a small random epsilon.

PPhilippe Rivière

74% match

Loading thumbnail…

geoVoronoi polygons()

One hundred random points on a sphere are partitioned into Voronoi polygons using `d3.geoVoronoi`. The orthographic projection, rendered via `d3.geoPath`, displays the colored cells with dark borders and white site markers. A gentle animation rotates the projection continuously by updating the projection’s rotation, redrawing all paths every 50 milliseconds. The example uses `d3.geoOrthographic`, `d3.range`, and `d3.schemeCategory10` for colors, with SVG output.

PPhilippe Rivière

74% match

Loading thumbnail…

Country map + voronoi.find

This visualization uses a Voronoi diagram to divide a world map into regions, each centered on a country's centroid, with the polygons dynamically re-calculated to highlight the spatial relationships between countries. The map is rendered as an SVG using D3 v4, and the Voronoi overlay is generated from the centroids of the countries. The original country shapes are filled in white with black strokes, while the Voronoi cells are drawn as semi-transparent overlays, and the graticule adds a subtle geographic grid. The animation likely involves transitioning between the original country boundaries and the Voronoi cells, or animating the centroids themselves.

PPhilippe Rivière

73% match

Loading thumbnail…

Let's make a map with D3.js!

This example visualizes the world’s countries as filled polygons on a natural Earth projection, with oceans rendered in blue and landmasses in light green. It uses D3.js v5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths, while TopoJSON’s `feature` function extracts country boundaries from a 110m world-atlas GeoJSON dataset. The code draws a sphere background and then overlays each country’s path, applying thin black strokes for borders.

AAdrian Herzog

72% match