100%

Fork of Solar System

✓ Published0🌍 Public

Last edited Jan 20, 2024

Created on Jan 20, 2024

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.

AI-generated description

A visualization of the solar system. Relative sizes to scale, distances not to scale.

Data from Wikipedia: List of gravitationally rounded objects of the Solar System.

Challenge

Option A: Use this template to visualize the relative size of various numbers.
Option B: Add SVG Gradients to make the planets look more planet-like

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Fork of Solar System

This animation displays the planets of the solar system in a horizontal line, with relative sizes to scale but distances not to scale. Each planet grows into view sequentially with a label, using D3 transitions. The code applies radial SVG gradients to several planets, such as Jupiter and Neptune, to give them a more dimensional appearance. The starfield background is randomly generated. Data on planet sizes and distances comes from Wikipedia’s list of gravitationally rounded objects.

Sshindeayush76@gmail.com

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

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

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

92% match

Loading thumbnail…

Fork of Solar System

This animated visualization displays the planets of the solar system with correct relative sizes, though distances are not to scale. Each planet appears as a colored circle that grows in place and is labeled with its name, starting from the Sun. The code uses D3’s `transition` API for the sequential animation and defines each planet’s color, size, and orbital distance in a data array. Data is sourced from Wikipedia’s list of gravitationally rounded objects of the Solar System.

Ss.s.vidhyasaraswathy4@gmail.com

91% match

Loading thumbnail…

Fork of Solar System

This animation displays the planets of the Solar System in a horizontal line, with their relative sizes shown to scale but distances compressed. Each celestial body appears sequentially, growing into place with its label beneath it. The visualization uses D3.js version 7.8.5, specifically the `select`, `transition`, and `easeLinear` APIs to animate circle radii and text opacity. Planet data, including names and sizes, comes from Wikipedia’s list of gravitationally rounded objects, though distance values are simplified for visual clarity.

Ssadhanasri125@gmail.com

91% match

Loading thumbnail…

Fork of Solar System

This animated visualization displays the relative sizes of the Sun and planets, with distances not to scale. Each celestial body is represented by a circle that expands into view sequentially, followed by its name label. The code uses D3.js version 7.8.5, leveraging `select`, `transition`, and `easeLinear` from the library to orchestrate the animations. The data originates from Wikipedia's list of gravitationally rounded objects of the Solar System. The rendering features a black background with distinct fill colors for each planet, offering a clear, animated comparison of planetary dimensions.

Aakang47@gatech.edu

91% match