Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Week 2 Gradients

Public visualization

Viewing a saved revision (read-only)

6203f3d96f9f4bf6a4b4773d6ed4945f

Week 2 Gradients

0 stars0🌍 Public
IIan Coolidge
Last edited Jan 24, 2024
Created on Jan 24, 2024
Forked from Solar System

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.

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