Fibonacci sphere surface distortion

100%

Fibonacci sphere surface distortion

✓ Published0🌍 Public

Last edited Oct 31, 2017

Created on Oct 31, 2017

A Fibonacci sphere algorithm distributes 60 points across a globe, and d3.geoVoronoi computes their spherical Voronoi cells. Each polygon is filled with a color mapped by d3.scaleLinear from its area, transitioning from blue through white to red as cell size increases. The SVG is rendered using d3.geoPath with an equirectangular projection, showing the distortion of the quasi-random lattice across the sphere’s surface. The code relies on d3.v4 and the d3-geo-voronoi library.

AI-generated description

Uses geoVoronoi to compute triangles from a set of points on the sphere.

Antenna radomes make use of quasi-random lattices to help limiting <a href="http://www.radome.net/tl.html#pattern">signal degradation</a>.

The points on the are distributed by a <a href="https://web.archive.org/web/20160709100123/http://stackoverflow.com/questions/9600801/evenly-distributing-n-points-on-a-sphere">Fibonnaci sphere algorithm</a>. Once could probably use <a href="https://www.jasondavies.com/maps/random-points/">Poisson-disc sampling</a> instead.

Inspiration: <a href="https://theintercept.com/2016/09/06/nsa-menwith-hill-targeted-killing-surveillance/">Trevor Paglen’s pictures of radomes at the NSA’s Menwith Hill Station</a> in the UK.

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/955da86d6a935b26d3599ca5e344fb38'>Fibonacci sphere quasi-random radome</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Fibonacci sphere quasi-random radome

This example visualizes a quasi-random Fibonacci sphere lattice of 150 points as a rotating orthographic projection, styled as an antenna radome with shaded triangular facets. The scene rotates continuously, with each triangle’s fill and stroke brightness adjusted based on its 3D orientation. Built with d3.v5, it uses `d3.geoVoronoi` to compute Voronoi triangles, `d3.geoOrthographic` for projection, and `d3.geoPath` to render the paths. Point distribution follows the Fibonacci sphere algorithm, with the color scheme and shading inspired by Trevor Paglen’s radome photographs.

PPhilippe Rivière

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

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

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

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

78% match

Loading thumbnail…

geoVoronoi Delaunay links and Urquhart graph

One hundred random points on a sphere generate a geospatial Voronoi diagram, with Delaunay links drawn as white lines and the Urquhart graph subset emphasized in bold. The d3-geo-voronoi library computes the tessellation, while d3.geoPath and an orthographic projection render the polygons and links to SVG. Sites appear as open circles. The legend notes the graph distinction.

PPhilippe Rivière

75% match

Loading thumbnail…

Rotating Voronoi in colors

Dozens of colored points orbit along concentric circular paths, while the Voronoi cells surrounding them are resampled and smoothed into curved, lens-like shapes that continuously rotate and morph. The animation is rendered as an SVG, with each cell’s fill and stroke sampled from a two-color linear scale. The code uses d3.geom.voronoi to compute cells, a basis-closed line interpolator for curvature, and d3.timer to drive the point motion and redraw the paths.

PPhilippe Rivière

75% match

Loading thumbnail…

Rotating Voronoi in d3v4

A rotating Voronoi diagram animates dozens of moving points whose cells constantly morph, producing intricate curved patterns against a black background. The animation derives from points arranged on circular paths that rotate at varying speeds and radii, while the Voronoi tessellation updates each frame. The code uses d3.voronoi to compute the polygons and d3.line with the curveBasisClosed interpolator to render them. A custom resample function subdivides each polygon edge into three segments before drawing, creating the smooth, curved cell boundaries. The animation runs continuously via d3.timer, with points’ positions updated directly in response to elapsed time.

PPhilippe Rivière

74% match