100%

Fork of Solar System

✓ Published0🌍 Public

Last edited Sep 8, 2024

Created on Sep 8, 2024

This animated visualization displays the relative sizes of countries based on an index score, with larger circles representing higher values. It uses D3.js transitions with `transition().duration()` and `easeLinear` to animate circle radii and positions, creating a dynamic comparison across seven nations. The data comes from a hardcoded array in the source code, which is adapted from Wikipedia data on gravitationally rounded Solar System objects, repurposed to showcase country rankings. The visualization renders using SVG circles and text elements within a black-themed container.

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…

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 animated visualization displays the relative sizes of the Sun and planets, with distances not to scale. Each celestial body is represented by a circle that expands into view sequentially, followed by its name label. The code uses D3.js version 7.8.5, leveraging `select`, `transition`, and `easeLinear` from the library to orchestrate the animations. The data originates from Wikipedia's list of gravitationally rounded objects of the Solar System. The rendering features a black background with distinct fill colors for each planet, offering a clear, animated comparison of planetary dimensions.

Aakang47@gatech.edu

84% match

Loading thumbnail…

Fork of Solar System

The visualization displays a solar system with planets' relative sizes to scale, arranging them along a horizontal line with labels. Each celestial body renders as an SVG circle with a radial gradient, transitioning from a small point to its final size on load. The code uses d3’s `select`, `transition`, and `easeLinear` from the D3 library to animate circles and text smoothly. Data includes the Sun and planets, with distances derived from Wikipedia’s list of gravitationally rounded objects. The grayscale background and white text labels highlight the size comparison without distance accuracy.

IIan Wright

83% match

Loading thumbnail…

Fork of Solar System

This animated visualization presents the solar system with planets scaled by relative size, while orbital distances are not to scale. Each celestial body appears as a colored circle, with a label beneath it, revealing its name. The animation sequentially grows the Sun and planets into view. The code uses D3’s `select` and `transition` APIs for rendering and animation, with data sourced from Wikipedia’s list of gravitationally rounded objects. The view is built using SVG circles and text elements, styled over a black background.

MMing Li

83% match

Loading thumbnail…

Fork of Solar System

This animated visualization displays the planets of the Solar System, with relative sizes scaled proportionally (though distances are not). The Sun and planets appear as solid circles with labels, using data from Wikipedia’s list of gravitationally rounded objects. The code leverages D3’s `select`, `transition`, and `easeLinear` to animate the circles growing and fading in sequence. Each planet’s radius and position derive from the imported data array, with SVG circles and text elements styled in black space with white labels.

22005ckv@gmail.com

82% match

Loading thumbnail…

Fork of Solar Systemdrb

This animated visualization displays the planets of the Solar System in a horizontal sequence, with relative sizes scaled proportionally but orbital distances compressed. Each planet appears as a colored circle with a label, animating its radius from zero to its final size when the scene loads. The code uses D3’s `transition` and `easeLinear` methods to control the growth and update animations, while binding data from Wikipedia’s list of gravitationally rounded objects. The SVG elements are styled with solid fills, and the visualization runs as a self-contained animation within a black background.

DDonald Bagwell

82% match

Loading thumbnail…

Fork of Solar System - Galaxy

This animation visualizes the solar system with planet sizes drawn to scale, while orbital distances are compressed for visibility. Each planet appears sequentially as a colored circle with a white label, positioned along a horizontal line against a starry background. The visualization uses D3.js with `transition` and `easeLinear` to animate the circles’ radii and opacity, binding data through `selectAll` and `join`. Data on planet radii and distances comes from Wikipedia’s list of gravitationally rounded objects, with the Sun and planets rendered as simple SVG circles.

Bbenclark.3rd@gmail.com

82% match

Loading thumbnail…

Fork of Solar System

This animated visualization displays the relative sizes of the planets in the solar system, with distances not to scale. Planet radius is proportional to the data, and each planet uses an SVG radial gradient to give it a shaded, more three-dimensional appearance against a starfield. The code uses D3.js selections and transitions (transition.attr, transition.delay) to animate the growing radii and label opacity sequentially. Data comes from Wikipedia’s list of gravitationally rounded objects of the Solar System. A static starfield background is also generated programmatically.

Wwkj0713@gmail.com

81% match