Solar System Visualization

Fork of Fork of HTML Starter

The visualization displays the Sun and all eight planets of our solar system in orbital order, with each celestial body shown as a colored circle labeled with its name and position. A radial gradient and glow effect distinguish the Sun, while Saturn includes a ring element. The code uses plain HTML, CSS, and JavaScript, with `querySelectorAll` and `addEventListener` to apply a white box-shadow highlight on mouse hover. Planet sizes and colors are hardcoded in CSS to approximate relative proportions rather than accurate scale.

95% match

Fork of Fork of Fork of HTML Starter

This visualization displays the solar system as an ancient astronomical map, presenting the Sun and eight planets with their Roman names, classical astronomical symbols, and traditional numerals on a papyrus-textured background. Each celestial body appears as a circular symbol with hover effects that trigger glowing highlights and scale transformations. The page loads with a scroll unroll animation that transitions the papyrus container from transparent and scaled down to full opacity using CSS transitions, while JavaScript event listeners manage the interactive hover states and the Cinzel Decorative font provides antique styling.

85% match

Fork of Fork of Fork of Fork of HTML Starter

An ancient solar system map renders the Sun and eight planets as classical astronomical symbols on a papyrus-textured background, styled with the Cinzel Decorative font and Roman names like Helios and Terra. The layout uses flexbox for responsive planet placement and CSS gradients for the aged paper effect, while JavaScript adds a scroll-unroll entrance animation and hover glows that shift planet circle backgrounds and box shadows.

83% match

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

82% match

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

Oownerofthesoul0000@gmail.com

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.

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

Fork of Fork of HTML Starter

This visualization reimagines the solar system as an ancient astronomical map, displaying each planet with its classical symbol (☉, ☿, ♀, ⊕), Roman name, and numeral order on a papyrus-textured background. The page uses CSS gradients and SVG filters to create the aged paper effect, while JavaScript adds a scroll-unroll entrance animation and hover effects that trigger symbolic glows. Google Fonts supplies the Cinzel Decorative typeface to reinforce the antique aesthetic.