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