Geodesic Rainbow

100%

Geodesic Rainbow

✓ Published0🌍 Public

Last edited Aug 27, 2018

Created on Jul 6, 2012

A glowing, rainbow-hued geodesic sphere rotates in space, its surface composed of triangular faces whose colors and edges shift continuously. An interactive slider adjusts the degree of subdivision, morphing the shape from a coarse icosahedron into a finely tessellated ball. Built with d3.geodesic and d3.geo.orthographic, the drawing renders to a Canvas context, with each face dynamically recolored via d3.hsl and rotated over time using d3.timer.

AI-generated description

Use the range slider to change the degree of subdivision in this geodesic sphere. The base shape, visible when subdivision is disabled, is the icosahedron. Built with the d3.geodesic plugin.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Geodesic Grid

A rotating geodesic polyhedron wireframe displays a shimmering, three-dimensional grid atop a fixed circular frame. The visualization uses d3.geodesic to generate a subdivided icosahedron’s edges, rendered as an animated SVG path via d3.geo.path with an orthographic projection. The d3.timer continuously updates the projection’s rotate parameters, creating smooth, continuous motion.

Mmbostock

78% match

Loading thumbnail…

Rainbow Pack

A colorful swarm of circles arranges itself into a dense, rainbow-hued cluster. Each circle originates from a point along the outer edge of the canvas, then animates inward to its final position, with the color of each circle determined by its angle from the center. This creates a vibrant, radially organized pattern where hues progress around the circle. Built with d3.v4, the example uses `d3.packSiblings` for circle packing and `d3.scaleRainbow` for coloring, animating positions via a transition with `d3.easeCubicOut` and staggered delays based on distance.

Mmbostock

76% match

Loading thumbnail…

Icosahedron

An animated icosahedron rotates beneath a fixed circular clipping boundary, revealing its wireframe edges in a spherical orthographic projection. The shape is generated from a custom D3 geodesic module that subdivides the twenty triangular faces of an icosahedron and projects their vertices onto a sphere. D3’s `d3.geo.orthographic` projection and `d3.geo.path` render the multipolygon geometry as SVG paths, with a `d3.timer` updating the projection’s rotation over time.

Mmbostock

74% match

Loading thumbnail…

Rotating Icosahedron

An orange icosahedron rotates continuously in 3D space, rendered as a set of triangular faces projected with an orthographic camera. The animation uses `d3.geo.orthographic` to map each face’s spherical coordinates onto the screen, and a `d3.timer` updates the rotation over time. Each face’s polygon is checked with `d3.geom.polygon.area()` to hide back-facing triangles, while the paths are drawn as SVG `path` elements. The icosahedron’s vertex geometry is generated procedurally with the `icosahedronFaces` function, which computes latitude and longitude bands based on the golden ratio angle.

Mmbostock

74% match

Loading thumbnail…

Rainbow Circle

A rainbow ring is constructed from 500 individual SVG path segments, each an arc slice that together form a circular band. The color of each slice encodes its angular position via the HSL color space, creating a smooth spectral gradient around the circle. The example uses D3 v3’s `d3.svg.arc` to generate the path geometries and `d3.hsl` to compute fill colors, with segment angles derived from a range over 2π radians. The rendering is entirely SVG, placed within a 960 by 960 pixel viewport.

Mmbostock

73% match

Loading thumbnail…

Rainbow spinner #2

This example displays a continuously rotating rainbow ring on a canvas, with a white gap that stretches and shrinks as the animation cycles. The code uses d3.arc with a canvas 2D context to draw 181 colored segments, each filled and stroked with d3.interpolateRainbow. A d3.timer drives the rotation by updating an angle offset, while d3.select transition with a custom tween on "angle" alternately stretches the start or end edge of the gap, creating a rhythmic pulsing effect.

FFrissAnalytics

73% match

Loading thumbnail…

Gist 00170d49e926de0c3a9a

A grid of small circles and hexagon-like arrangements of rounded orange rectangles animates in a staggered transition. The visualization generates a field of triangular tile motifs, where each tile contains three small circles and three rounded rectangles positioned at their edges. Initially, the rectangles and circles sit at the tile centers; after a delay, they rotate outward to the triangle’s midpoints. Using D3.js with SVG transitions, the code applies `translate` and `rotate` transforms to reposition elements, driven by trigonometric calculations for hexagon geometry. The rendering uses D3 selections and transitions, with data-bound groups and nested arrays to handle multiple coordinates.

11wheel

73% match

Loading thumbnail…

This Is a Globe

A rotating orthographic globe displays Earth’s landmasses as a flat silhouette on a circular canvas. The map is rendered using D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path`, with TopoJSON land data from the world-110m file. A `d3.timer` advances the rotation each frame, clearing and redrawing the canvas context, while a stroked arc outlines the sphere’s edge.

Mmbostock

72% match