Viewing a saved revision (read-only)
258a2f40e5f4453cbd2d512147e57047
Week 2 Gradients
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 descriptionA 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