Skip to main content
SimilarExport ZIP
100%

investigating animation

✓ Published0🌍 Public
Tt0miwa22
Last edited Jan 17, 2023
Created on Jan 17, 2023

An interactive solar system visualization allows users to click on a planet to reveal its atmospheric composition and temperature data. A central SVG diagram animates planets orbiting the sun using SVG `<animateMotion>` with `<mpath>` elements. Selecting a planet toggles the visibility of its corresponding D3.js pie chart and line chart, built with `d3.pie` and `d3.line`, displaying atmospheric gas shares and temperature against distance. The data is static and embedded in the script files.

AI-generated description

A small html css website with planets of the solar system. With Tables and planet data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Solar System Orbits (Fork of Fork of HTML Starter)

This interactive HTML visualization presents the solar system with animated planet orbits around a central sun. Users click a planet to reveal two additional data views: a line chart showing distance from the sun versus average temperature, and a pie chart displaying atmospheric composition percentages for that planet. The orbit diagram uses SVG paths with animated motion along circular trajectories, while the charts are generated programmatically. The line charts employ D3's scaleLinear for axes and a monotone curve line, while the pie charts use the d3.pie layout algorithm with d3.arc for rendering sectors.

JJonas
79% match
Loading thumbnail…

RSSB | Initial [Backup]

This example presents an interactive solar system visualization where clicking a planet reveals its atmospheric composition as a pie chart and a line chart plotting average temperature against distance from the Sun. The main SVG scene uses animated circles along predefined orbital paths to represent planetary motion, with the `showDiagram` function toggling the visibility of the corresponding D3-generated charts and updating the page title. Pie charts are built using `d3.pie` and `d3.arc`, while line charts employ `d3.line` and `d3.scaleLinear` with axis labels, all rendered as SVGs with d3.v6.

RRSSBDAE
79% match
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
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
75% match
Loading thumbnail…

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.

CCurran Kelleher
74% match
Loading thumbnail…

Solar System

A pseudo-3D solar system rendered in SVG with D3 v4, showing all eight planets arranged in a row, each rotating at relative velocities to Earth. Orthographic projections and radial gradients provide shading, while hover interactions reveal radius, tilt, and day length for each planet. The visualization includes a starfield background and planetary graticules, driven entirely by D3 selections and scales.

FFrissAnalytics
74% match
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
74% match
Loading thumbnail…

Solar System

This animated visualization depicts the planets of the solar system, with relative sizes to scale while orbital distances are not. Planets display radial gradients for a planet-like appearance, and the Sun features a glowing gradient effect. The animation uses D3.js transitions with `easeLinear` to rotate the planets continuously around the Sun. Data on planetary radii and distances comes from Wikipedia's list of gravitationally rounded objects. SVG gradients are defined in a `defs` element and applied via fill URLs.

Ccoreyfnolan@gmail.com
73% match