Fork of Solar System

100%

Fork of Solar System

✓ Published0🌍 Public

Last edited Jun 8, 2021

Created on Jun 8, 2021

This animated solar system model displays the orbital paths of the planets, including Pluto, orbiting a central sun against a background image of the solar system. Each planet moves along its own circular orbit at varying speeds, with the 5th ring representing the asteroid belt. The visualization uses React components with SVG elements, and D3.js version 6 for motion animation via `animateMotion` paths, creating a simplified, not-to-scale representation of planetary movement.

AI-generated description

This is a sample model of the solar system Not to scale. Image taken from here

The 5th ring represents the asteroid belt. There are This image depicts the solar system(including Pluto).

MIT Licensed

Similar vizzes

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

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

86% match

Loading thumbnail…

Fork of Solar System

A solar system visualization animates the planets orbiting outward from a fixed Sun, with each planet's distance and radius scaled from astronomical units. Circles and text labels fade in sequentially from the Sun outward, then snap to new positions on any update, while exits shrink and disappear. The D3 code uses data joins with `transition()` and `easeLinear`, mapping planetary data to SVG `circle` and `text` elements with hardcoded color fills and label offsets.

Hhunsingeruk@gmail.com

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

84% match

Loading thumbnail…

Fork of Solar System

This animated visualization displays the planets of the Solar System, with relative sizes scaled proportionally (though distances are not). The Sun and planets appear as solid circles with labels, using data from Wikipedia’s list of gravitationally rounded objects. The code leverages D3’s `select`, `transition`, and `easeLinear` to animate the circles growing and fading in sequence. Each planet’s radius and position derive from the imported data array, with SVG circles and text elements styled in black space with white labels.

22005ckv@gmail.com

84% match

Loading thumbnail…

Fork of Solar System

This animated visualization displays the planets of the solar system with relative sizes to scale, while distances are compressed for visual clarity. Each planet is rendered as a circle with SVG gradient fills—including linear and radial gradients—to give them a more dimensional, planet-like appearance against a black background. The data comes from Wikipedia’s list of gravitationally rounded objects. The code uses D3’s `select`, `transition`, and `easeLinear` to animate the planetary motion, with the Sun and its orbiting bodies depicted as static or moving graphical elements.

JJingxuan Yang

83% match

Loading thumbnail…

Fork of Solar System

This animation shows the planets of the solar system arranged horizontally against a starfield, with relative sizes scaled according to each body’s radius while distances are compressed for visibility. Each planet is drawn using D3 selections and transitions, with SVG radial gradients providing varied surface colors, and Saturn includes an elliptical ring. The data originates from Wikipedia’s list of gravitationally rounded solar system objects, and the code uses D3’s `select`, `transition`, and `easeLinear` to animate planet growth and label appearance.

SSree Likhith

83% match

Loading thumbnail…

Fork of Solar System

This animated visualization presents the solar system with planets scaled by relative size, while orbital distances are not to scale. Each celestial body appears as a colored circle, with a label beneath it, revealing its name. The animation sequentially grows the Sun and planets into view. The code uses D3’s `select` and `transition` APIs for rendering and animation, with data sourced from Wikipedia’s list of gravitationally rounded objects. The view is built using SVG circles and text elements, styled over a black background.

MMing Li

83% match