flashy voronoi projection badge for #unconf2017

100%

flashy voronoi projection badge for #unconf2017

✓ Published0🌍 Public

Last edited Sep 25, 2017

Created on Sep 25, 2017

This example projects the world onto a set of polygonal facets derived from a spherical Voronoi diagram of country centroids, creating a decorative badge for #unconf2017. Each country’s territory is mapped to a face of the polyhedral projection, with the link structure between adjacent countries computed via the minimum spanning tree (using Kruskal’s algorithm) and drawn as colored lines. The visualization uses d3.geoVoronoi to generate the polygons, d3.geoPolyhedral with a gnomonic projection per face to render the map, and d3.geoPath for SVG output. Countries with an area above a threshold are selected, and their centroids serve as Voronoi sites.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/7a920e1de8c506bfbf6943693382867f'>myriahedral projection ? (work in progress)</a>

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/4b611a4ac57a1542d0e5670ef6949096'>myriahedral projection ? (work in progress)</a>

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/bb6c558c9988b906b0c88c7f73504ef4'>myriahedral tabs ? (work in progress)</a>

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/f511f9e493994fd29c70cf4e24178eaf'>flashy voronoi projection badge for the unconf 2017</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Dodecahedral projection

This example displays a dodecahedral projection of the world map, unfolding the globe onto the faces of a dodecahedron using a myriahedral projection. The map, sourced from the VisionsCarto world atlas, is rendered as SVG with country boundaries and a graticule. The code computes the Voronoi faces on the sphere using `d3.geoVoronoi`, builds a spanning tree of the faces with Kruskal’s algorithm, and projects each face using a gnomonic projection via `d3.geoGnomonic`. The polyhedral arrangement and clipping are handled by `d3.geoPolyhedral` and `d3.geoPath`.

PPhilippe Rivière

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

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

72% match

Loading thumbnail…

World Airports Voronoi recreated

A world map rendered as an orthographic projection shows Voronoi cells computed from airport locations, with each cell colored distinctly and linked by dashed lines between neighboring airports. The visualization recreates Jason Davies’s classic demo using d3.geoVoronoi to generate the polygons and links from a CSV of airport coordinates, while d3.geoPath projects the spherical geometry. Country outlines from a TopoJSON file appear beneath the cells, and the sphere is shaded with a radial gradient for a three-dimensional effect.

PPhilippe Rivière

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

71% match

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

71% match

Loading thumbnail…

Furuti 3

This example demonstrates a polyhedral projection of the Earth onto a cube, using the Furuti 3 projection. It depicts the world's countries as semi-transparent gray polygons, alongside a graticule and shaded faces representing the cube's sides, all rendered as SVG paths. The implementation relies on `d3.geoPolyhedral` to build the projection, `d3.geoPath` to draw the features, and the `versor` library to enable interactive rotation via drag gestures, with country data from a local GeoJSON file.

PPhilippe Rivière

70% match

Loading thumbnail…

Polylabel with D3

This visualization compares two methods for labeling countries on a world map: centroids and polylabels. Small orange dots mark each country’s spherical centroid, while white dots show the polylabel (the point farthest from any polygon edge) of its largest projected polygon, with green lines connecting the two. The map uses a Robinson projection and renders country shapes from TopoJSON data via d3.geoPath, while the polylabel algorithm from Mapbox computes the label positions on the projected coordinates.

PPhilippe Rivière

70% match