Skip to main content
SimilarExport ZIP
100%

Orbiting Bodies

✓ Published0🌍 Public
CCurran Kelleher
Last edited Apr 22, 2025
Created on Apr 6, 2025

A stylized solar system animation built with D3.js renders a glowing central star surrounded by three orbital rings containing planets of varying sizes and colors. Each planet carries multiple moons that orbit independently, while the background features twinkling stars. The animation uses requestAnimationFrame to update positions over time, with planet coordinates calculated using trigonometric functions based on configurable speed and offset parameters.

AI-generated description

Solar System Visualization

This is an interactive solar system visualization built with D3.js. The animation shows a central star with multiple planets orbiting at different speeds, and each planet has one or more moons.

Features

  • Central star with radiating glow effect
  • Multiple orbital paths with varying numbers of planets
  • Configurable planet speeds, sizes, and colors
  • Each planet has its own moons
  • Twinkling background stars
  • Smooth animation using requestAnimationFrame

Configuration

You can modify the solar system's appearance and behavior by adjusting the parameters in the config.js file:

  • Adjust the center star's size and color
  • Configure different orbital levels with their radii, number of planets, and speeds
  • Control the planets' minimum and maximum sizes
  • Set the color palette for planets
  • Configure background stars (count, size, colors)

The speed parameter in the configuration determines how fast each orbit's planets rotate around the central star.

MIT Licensed

Similar vizzes

Loading thumbnail…

Solar System

The animation displays the solar system with the Sun and planets to scale, mapping orbital distances and radii onto spatial positions for circles and labels. Built with D3.js, it uses selections and transitions with easeLinear to animate planet appearance and label opacity over staged delays. The code defines celestial body data (including Pluto) and renders it via SVG circles and text, with the Sun and each planet uniquely colored.

SSubhendu Karmakar
79% match
Loading thumbnail…

Solar System

This animated visualization depicts the solar system’s planets orbiting the sun, with each celestial body shown as a circle scaled by its relative radius and positioned by its distance in astronomical units. Planet names appear as labels below their circles. The animation uses D3 transitions to sequentially grow each circle and fade in its label, then smoothly updates positions and sizes. The code leverages D3 v7’s `select`, `transition`, and `easeLinear` APIs, with a custom data array containing each planet’s distance, radius, and color.

Pperez.h89@gmail.com
77% match
Loading thumbnail…

ForceMagnetic based Hierarchical Orbits

Three orbiting bodies—a sun, planet, and moon—trace fading trails as they revolve in a hierarchical system, with the moon completing many more loops around the planet than the planet does around the sun. The animation uses `d3.forceSimulation` with the `d3.forceMagnetic` plugin to model gravity via electrostatic attraction, assigning each link its own gravitational constant to exaggerate relative orbital speeds. The SVG canvas is dynamically sized to the window, with orbit trails rendered as circles that fade and remove over five seconds.

MMbrownshoes
77% match
Loading thumbnail…

Fork of Solar System

A solar system visualization animates the planets orbiting outward from a fixed Sun, with each planet's distance and radius scaled from astronomical units. Circles and text labels fade in sequentially from the Sun outward, then snap to new positions on any update, while exits shrink and disappear. The D3 code uses data joins with `transition()` and `easeLinear`, mapping planetary data to SVG `circle` and `text` elements with hardcoded color fills and label offsets.

Hhunsingeruk@gmail.com
76% 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
76% match
Loading thumbnail…

Solar System

This example animates a stylized, not-to-scale model of the solar system, including the planets and Pluto, orbiting a central sun against a background image of space. Each planet moves along a circular path defined by SVG path elements, with its speed and orbital radius hardcoded. The visualization uses React for component structure and D3.js for generating the circular arc paths, while SVG’s `animateMotion` drives the continuous orbital animation.

CCurran Kelleher
76% match
Loading thumbnail…

Fork of Solar System

This example visualizes the orbital hierarchy of the solar system using animated circles positioned along a horizontal axis, ordered by planetary distance from the Sun. Each planet and the Sun appear as scaled circles with distinct colors, while text labels fade in sequentially beneath each body. The implementation uses D3.js v7 selections with `transition` and `easeLinear` to grow entering circles from radius zero, shift existing positions with fast transitions, and fade out exiting elements. Data is hardcoded in the script, with coordinates derived from astronomical distances and radii scaled to the container dimensions.

Hhunsingeruk@gmail.com
76% match
Loading thumbnail…

Fork of Solar System

This example visualizes the orbital hierarchy of the solar system using animated circles positioned along a horizontal axis, ordered by planetary distance from the Sun. Each planet and the Sun appear as scaled circles with distinct colors, while text labels fade in sequentially beneath each body. The implementation uses D3.js v7 selections with `transition` and `easeLinear` to grow entering circles from radius zero, shift existing positions with fast transitions, and fade out exiting elements. Data is hardcoded in the script, with coordinates derived from astronomical distances and radii scaled to the container dimensions.

Hhunsingeruk@gmail.com
76% match