100%

solar family

✓ Published0🌍 Public

Last edited Aug 12, 2024

Created on Aug 12, 2024

This animated visualization shows the relative sizes of the Sun, planets, and Pluto as scaled circles, with distances between them deliberately not to scale. Each body appears sequentially via a staggered fade-in transition, labeled below its circle, and colored by characteristic hues. Built with D3.js, it uses `select`, `transition`, and `easeLinear` to animate circle radii and label opacity over two-second and half-second durations. Planet radii and colors derive from Wikipedia data on gravitationally rounded objects, while labels position dynamically based on each circle’s scaled radius.

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…

Solar System

This animated visualization displays the planets of the solar system with their relative sizes to scale, though distances are not proportional. Circles and labels for each celestial body appear sequentially and transition smoothly across the black canvas. The code uses D3’s `select`, `transition`, and `easeLinear` APIs to animate circle radii, positions, and label opacity. Planet data, including names, distances, and radii, comes from Wikipedia’s list of gravitationally rounded objects. The Sun is depicted largest in yellow, followed by the eight planets and Pluto, each with a distinct fill color.

Mmelissastrong89@gmail.com

89% match

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

87% match

Loading thumbnail…

Solar System

This animated visualization depicts the solar system’s planets orbiting the sun, with each celestial body shown as a circle scaled by its relative radius and positioned by its distance in astronomical units. Planet names appear as labels below their circles. The animation uses D3 transitions to sequentially grow each circle and fade in its label, then smoothly updates positions and sizes. The code leverages D3 v7’s `select`, `transition`, and `easeLinear` APIs, with a custom data array containing each planet’s distance, radius, and color.

Pperez.h89@gmail.com

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

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

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

85% match

Loading thumbnail…

Fork of 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.

SShreenithi T R

84% match

Loading thumbnail…

Solar System

This animated visualization displays the planets of the solar system with relative sizes to scale, positioned along dashed orbit paths with a glowing gradient background. The data comes from Wikipedia’s list of gravitationally rounded objects, and the animation uses D3’s `transition` and `easeLinear` to sequentially grow each circle and fade in its label. The code also applies SVG filters, such as `feGaussianBlur` for the glow effect, and custom styling for text shadows.

Nnishanththouta16@gmail.com

84% match