Skip to main content
SimilarExport ZIP
100%

Fork of Solar System

✓ Published0🌍 Public
SShreenithi T R
Last edited Aug 12, 2024
Created on Aug 12, 2024
Forked from Solar System

This animation visualizes the relative sizes of the Sun and planets in the Solar System, with distances not to scale. Each celestial body appears as a colored circle with a label, using data from Wikipedia’s list of gravitationally rounded objects. Built with D3.js, it uses data joins, transitions, and easing (easeLinear) to animate the circles and labels sequentially. The Sun’s radius is exaggerated, while planet colors are assigned via static fills, and no SVG gradients are applied.

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 animation visualizes the relative sizes of the Sun and planets in the solar system, using circles scaled proportionally to each body’s radius. Data from Wikipedia drives the layout, with distances not to scale and labels positioned below each circle. The code uses D3’s `select`, `transition`, and `easeLinear` APIs to animate the circles growing from zero and fading in labels sequentially. A simple black background and solid color fills keep the illustration clear, while the fork invites adding SVG gradients for more realistic planetary textures.

Ssanthiyasasikumar0205@gmail.com
94% match
Loading thumbnail…

Fork of Solar System

This animated visualization displays the relative sizes of the Sun and planets in the solar system, using circles positioned along a horizontal line, with distances not to scale. Each celestial body appears sequentially, expanding from a radius of zero to its proportional size, with labels fading in beneath. The code uses D3.js transitions with `transition.attr` to animate the circle radii and text opacity, driven by data from Wikipedia’s list of gravitationally rounded objects. SVG circles and text elements are bound to the dataset, with a black background and distinct fills for each planet.

Oownerofthesoul0000@gmail.com
94% 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
94% 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
94% 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
93% 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
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
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
92% match