100%

Fork of Solar System

✓ Published0🌍 Public

Last edited Jan 24, 2024

Created on Jan 24, 2024

This fork of the “Solar System” template uses data from Wikipedia’s list of gravitationally rounded objects to animate circles representing planets and a subset of skyscrapers, with relative sizes shown but distances not to scale. It uses d3’s `select`, `transition`, and `easeLinear` to stagger the growth of each circle and label via delays. The rendering is a black-background SVG, and the code includes an option to add SVG gradients for more planet-like shading.

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

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

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

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

89% match

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

89% match

Loading thumbnail…

Fork of Solar System - Galaxy

This animation visualizes the solar system with planet sizes drawn to scale, while orbital distances are compressed for visibility. Each planet appears sequentially as a colored circle with a white label, positioned along a horizontal line against a starry background. The visualization uses D3.js with `transition` and `easeLinear` to animate the circles’ radii and opacity, binding data through `selectAll` and `join`. Data on planet radii and distances comes from Wikipedia’s list of gravitationally rounded objects, with the Sun and planets rendered as simple SVG circles.

Bbenclark.3rd@gmail.com

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

88% match

Loading thumbnail…

Fork of Solar System

The visualization displays a solar system with planets' relative sizes to scale, arranging them along a horizontal line with labels. Each celestial body renders as an SVG circle with a radial gradient, transitioning from a small point to its final size on load. The code uses d3’s `select`, `transition`, and `easeLinear` from the D3 library to animate circles and text smoothly. Data includes the Sun and planets, with distances derived from Wikipedia’s list of gravitationally rounded objects. The grayscale background and white text labels highlight the size comparison without distance accuracy.

IIan Wright

88% match