Skip to main content
100%

Planetary Rings

✓ Published0🌍 Public
Aandrew-reid
Last edited Nov 27, 2017
Created on Nov 27, 2017

This visualization simulates planetary rings around a rotating Earth using D3 v4. Ten concentric ring paths, each representing the same equatorial feature, are drawn with increasingly zoomed orthographic projections and slightly enlarged clip angles to create a layered, three-dimensional ring effect. The sphere and graticule are rendered via `d3.geoPath` and `d3.geoOrthographic`, while a `d3.timer` animates the rotation by updating projection rotations. Rings use dashed strokes and varied colors, with the code deriving from a rotating orthographic block upgraded to v4.

AI-generated description

An attempt to use d3 to simulate planetary rings.

The same equitorial feature is drawn 10 times with projections that are increaslingly zoomed in and with a slightly enlarged clip radius.

This uses a looped append, which should normally not be used.

Based off of this rotating orthographic, upgraded to v4.

Similar vizzes

Loading thumbnail…

Another Earth(s)

Three orbiting Earths circle a central point against a black background, each with a distinct color and orbital radius. The visualization renders world landmasses from a World Atlas GeoJSON file, updated per frame via an orthographic projection. Using d3.geoPath and d3.geoOrthographic, the code rotates each planet’s projection and applies a timed transform to animate both the land path and a colored sphere along its circular orbit. This SVG-based animation runs continuously, with white orbit rings marking each path.

FFrissAnalytics
76% match
Loading thumbnail…

geoCircle in d3.v4 (geoOrthographic)

This example visualizes concentric circles radiating from two geographic points—the North Pole and Washington, DC—using a d3.geoOrthographic projection. The circles, generated with d3.geoCircle, are drawn as SVG paths via d3.geoPath, with radii incrementing from 5 to 85 degrees. The map includes land masses rendered from TopoJSON world data, styled with fills and strokes. The code loads d3.v4 and topojson.v1 from CDNs, and the interaction between the circle generator and projection demonstrates how to create geodesic rings on a globe-like view.

PPhilippe Rivière
74% match
Loading thumbnail…

Winding Order

Two polygon rings, one clockwise and one counterclockwise, demonstrate how winding order affects map projections in d3. Each ring is rendered twice: once with an orthographic projection using d3.geoPath and d3.geoOrthographic, and once with an identity projection, showing arrow markers along the ring path indicating direction. The text labels list the ring coordinates and computed area via d3.geoArea for the orthographic view, and the identity projection's path.area for the second.

Mmbostock
74% match
Loading thumbnail…

Circular Layout (Recursive)

A circular layout visualizes ten concentric rings, each divided into 90 wedge-shaped segments. The example derives these shapes recursively, with each ring’s path geometry generated from radial distances scaled from 180 to 240 pixels and angular slices of π/90 radians. Colors interpolate from brown to steelblue across the rings. The implementation uses D3 v3’s linear scales for radius and fill, and builds SVG paths via `d3.svg.arc` within nested `selectAll` and `enter` calls. The data is procedural, created with `d3.range(10)` for rings and angle increments.

Mmbostock
74% match
Loading thumbnail…

Five Ring with D3.js!

Five interlocking Olympic-style rings are drawn as partially filled circular arcs, each rendered in a distinct color, and arranged in two staggered rows against a plain white background. The D3.js v5 code constructs each ring using the `d3.arc` generator, specifying inner and outer radii and a full 360-degree angle sweep, then applies SVG `path` elements with black strokes and colored fills. The rings are positioned via nested `g` groups and `translate` transforms, with the author manually laying out the five circles. The visualization is built with the D3.js library, rendering to SVG, and the source is authored by lexchenzhang.

LLex
74% match
Loading thumbnail…

Fork of Fork of Circles with D3

A collection of colorful, semi-transparent circles of varying sizes are arranged across a pale green canvas, with a large black circle at the center. A green planet orbits this central circle along a dashed gray path, while star-shaped paths are rendered using a custom function that calculates polygon coordinates. The visualization uses D3.js version 7 with its `select` and `join` methods to declaratively build the SVG elements, and employs `requestAnimationFrame` to animate the orbiting planet.

BBismark Kofi Owusu Sarfo
74% match
Loading thumbnail…

geoCircle in d3.v4

This example visualizes concentric geo-circles radiating from two fixed points on a world map: the North Pole and Washington, D.C. It uses `d3.geoCircle()` to generate spherical circles at increasing radii, with `d3.geoPath()` and an equirectangular projection to render them as SVG paths. The code draws the circles in red and blue before overlaying landmasses from TopoJSON. It demonstrates how d3.v4’s geographic circle generator computes geodesic rings, with radii ranging from 5 to 85 degrees. The map is rendered at 960×500 pixels using D3’s `d3.geoEquirectangular` projection.

PPhilippe Rivière
73% match
Loading thumbnail…

Orbiting Bodies

A stylized solar system animation built with D3.js renders a glowing central star surrounded by three orbital rings containing planets of varying sizes and colors. Each planet carries multiple moons that orbit independently, while the background features twinkling stars. The animation uses requestAnimationFrame to update positions over time, with planet coordinates calculated using trigonometric functions based on configurable speed and offset parameters.

CCurran Kelleher
72% match