Geodesic Grid

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jul 6, 2012

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.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

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

82% match

Loading thumbnail…

Orthographic Grid

An orthographic grid of graticule lines at 10-degree intervals rotates slowly over time, demonstrating an azimuthal projection that resembles a globe viewed from space. The visualization uses D3 v3’s `d3.geo.orthographic`, `d3.geo.path`, and `d3.geo.graticule` to render SVG paths, while a `d3.timer` continuously updates the projection’s rotation based on a fixed velocity vector. A static circle outlines the globe’s edge, and the animation shows how latitude and longitude lines curve as the view shifts.

Mmbostock

79% match

Loading thumbnail…

Geodesic Rainbow

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.

Mmbostock

78% match

Loading thumbnail…

Icosahedron

This example depicts a rotating icosahedron projected from a sphere using an orthographic projection. The solid’s faces, edges, and vertices are drawn as SVG paths, with faces filled in light gray, edges semi-transparent black, and points as black dots with white strokes. The geometric data is generated procedurally in JavaScript, calculating vertex positions from spherical coordinates. A d3.timer continuously updates the projection’s rotation along two axes, and the path generator re-renders each SVG element on every tick, creating a smooth animated spin using D3 v3’s geo and SVG utilities.

Mmbostock

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

74% match

Loading thumbnail…

Rotating Orthographic

This rotating orthographic projection displays a graticule and the equator as animated SVG paths on a sphere. It uses the d3.geo.orthographic projection with a rotating view, updating the projection’s rotation based on a timed loop. The sphere, graticule, and equator are drawn as SVG paths via d3.geo.path, with the animation driven by d3.timer incrementally adjusting the rotation angles.

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

73% match

Loading thumbnail…

Isometric III

An animated field of white, wireframe cubes rotates and rises in an isometric grid. Each cube spins on its vertical axis, with the rotation amount and vertical position varying by its distance from the center, creating a wave-like motion across the diamond-shaped pattern. Built with D3’s `d3-timer` and `d3-ease` modules, it uses a custom `isometric` library to project 3D coordinates onto a 2D Canvas context, drawing paths with `moveTo` and `lineTo`. The animation is driven by the timer’s elapsed time, and cube placement uses both Manhattan and Cartesian distance calculations.

Mmbostock

73% match