Week 2 Gradients

100%

Week 2 Gradients

✓ Published0🌍 Public

Last edited Jan 24, 2024

Created on Jan 24, 2024

This animated visualization displays the solar system’s planets with sizes to scale but not distances, using D3 v7 transitions to sequentially reveal each body. Data from Wikipedia’s list of gravitationally rounded objects drives circle radii, positions, and labels, while `d3.select`, `transition`, and `easeLinear` handle the staggered entrance and updates. Three planets (Jupiter, Saturn, Uranus) use SVG linear gradients defined via `linearGradient` elements, with horizontal or vertical stops that simulate banding or atmospheric tints. The Sun and smaller planets use flat fill colors, and the black background highlights each object’s appearance.

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.

This demo allows you to create planet gradients from data, allowing horizontal and vertical linear gradients.

MIT Licensed

Similar vizzes

Loading thumbnail…

Solar System Gradient

This animated visualization displays the planets of the solar system in a horizontal line, with relative sizes to scale but distances not to scale, starting from the Sun on the left. Each celestial body is rendered as a circle filled with a radial SVG gradient defined in `<defs>`, using colors that approximate each planet’s appearance. Data on planetary radii and orbital distances comes from Wikipedia’s list of gravitationally rounded objects. The code uses D3’s `transition`, `easeLinear`, and join methods to animate the circles’ radii and positions sequentially.

JJoe Rozman

86% match

Loading thumbnail…

Solar System

This animated visualization depicts the planets of the solar system, with relative sizes to scale while orbital distances are not. Planets display radial gradients for a planet-like appearance, and the Sun features a glowing gradient effect. The animation uses D3.js transitions with `easeLinear` to rotate the planets continuously around the Sun. Data on planetary radii and distances comes from Wikipedia's list of gravitationally rounded objects. SVG gradients are defined in a `defs` element and applied via fill URLs.

Ccoreyfnolan@gmail.com

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

82% match

Loading thumbnail…

Fork of Solar System

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.

Sssmadha@hotmail.com

81% match

Loading thumbnail…

Dataviz 2 Solar System

An animated solar system visualization displays the Sun and planets with radial-gradient shading to create a more dimensional, planet-like appearance. Planetary positions are driven by astronomical distance ratios, with each body and its label animating into place through staggered transitions. The implementation uses D3 v7, employing `select`, `transition`, and `easeLinear` to coordinate circle radii, coordinates, and label opacity changes, while SVG `radialGradient` definitions supply the visual depth.

YYiyi Wu

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

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

81% match

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

80% match