Solar System

100%

✓ Published0🌍 Public

Last edited Oct 5, 2018

Created on Oct 5, 2018

A pseudo-3D solar system rendered in SVG with D3 v4, showing all eight planets arranged in a row, each rotating at relative velocities to Earth. Orthographic projections and radial gradients provide shading, while hover interactions reveal radius, tilt, and day length for each planet. The visualization includes a starfield background and planetary graticules, driven entirely by D3 selections and scales.

AI-generated description

A pseudo-3d solar system in d3 using orthographic projections and radial gradients for shading. Each planet rotates at its relative velocity to Earth. Hover over each planet to reveal info.

Future ideas: add a glowing Sun and orbiting moons.

forked from <a href='http://bl.ocks.org/tlfrd/'>tlfrd</a>'s block: <a href='http://bl.ocks.org/tlfrd/155feca25ebe85b6f31b56945e912b4e'>Solar System</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Solar System

This animated visualization depicts the planets of the Solar System with accurately scaled relative sizes, though distances are compressed for display. Entering circles and labels animate outward from a central sun using D3 transitions with staggered delays. The code employs d3.select, transition, and easeLinear to orchestrate the choreography, with each planet’s radius proportional to its real-world value. Data on planetary radii comes from Wikipedia’s list of gravitationally rounded objects. The visualization runs in a black-background SVG canvas, highlighting the scale differences between bodies like Jupiter and Pluto.

CCurran Kelleher

84% match

Loading thumbnail…

Solar System

A stylized, not-to-scale model of the solar system displays the sun and nine planets, including Pluto, on dark background with faint orbital rings. Planet sizes and orbital radii are fixed, but their revolution speeds vary by distance from the sun, with the closest planets moving fastest. The visualization is rendered as an SVG using React and D3 v6, where each planet is a circle with an SVG `<animateMotion>` element that follows a precomputed circular path. A static background image sourced from Khan Academy is included for context, while all orbital motion is driven purely through SVG animation rather than D3's simulation APIs.

AArjun Rao

84% match

Loading thumbnail…

Solar System

The animation displays the solar system with the Sun and planets to scale, mapping orbital distances and radii onto spatial positions for circles and labels. Built with D3.js, it uses selections and transitions with easeLinear to animate planet appearance and label opacity over staged delays. The code defines celestial body data (including Pluto) and renders it via SVG circles and text, with the Sun and each planet uniquely colored.

SSubhendu Karmakar

84% match

Loading thumbnail…

Solar System

This animated visualization depicts the planets of the solar system, with relative sizes to scale while orbital distances are not. Planets display radial gradients for a planet-like appearance, and the Sun features a glowing gradient effect. The animation uses D3.js transitions with `easeLinear` to rotate the planets continuously around the Sun. Data on planetary radii and distances comes from Wikipedia's list of gravitationally rounded objects. SVG gradients are defined in a `defs` element and applied via fill URLs.

Ccoreyfnolan@gmail.com

83% match

Loading thumbnail…

Fork of Solar System

This animated visualization presents the planets of the solar system as scaled circles, with relative sizes accurate but distances compressed for display convenience. Planet diameters, solar radii, and orbital data come from Wikipedia's list of gravitationally rounded objects. Each body uses a custom SVG radial gradient to simulate a shaded, three-dimensional appearance, including the Sun and Pluto. The d3 selection and transition APIs handle the animation, while a starfield background is generated procedurally with random placement that avoids overlapping the planets. Planet labels are positioned dynamically based on each body’s calculated radius.

Ppadmeshnaik22@gmail.com

82% match

Loading thumbnail…

Fork of Solar System - Vignesh

A fork of a solar-system visualization renders the Sun and nine planets as gradient-filled circles in black space, with relative sizes to scale but distances compressed. Planet names and distances in astronomical units appear beneath each body. The D3.js code uses `select`, `transition`, and `easeLinear` for animated radius growth, plus `radialGradient` for shading. Randomly placed star circles twinkle, and a zoom transform enables panning. Data comes from Wikipedia’s list of gravitationally rounded solar-system objects.

Vvigneshs1006@gmail.com

81% match

Loading thumbnail…

Fork of Solar System

This animated visualization displays the planets of the Solar System with their relative sizes drawn to scale, while distances between them are not accurate. Planets are rendered using SVG gradients, with Earth and Neptune using radial gradients, while Venus, Mars, Jupiter, and Saturn have custom linear gradients with multiple color stops to create a textured, planet-like appearance. The scene is set against a black background. The code uses the d3 library, specifically the `select`, `transition`, and `easeLinear` functions, and dynamically constructs SVG elements based on data sourced from Wikipedia’s list of gravitationally rounded objects.

Sssmadha@hotmail.com

81% match

Loading thumbnail…

Solar System

This example animates a stylized, not-to-scale model of the solar system, including the planets and Pluto, orbiting a central sun against a background image of space. Each planet moves along a circular path defined by SVG path elements, with its speed and orbital radius hardcoded. The visualization uses React for component structure and D3.js for generating the circular arc paths, while SVG’s `animateMotion` drives the continuous orbital animation.

CCurran Kelleher

81% match