Kepler’s Tally

100%

Kepler’s Tally

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Apr 18, 2013

Kepler's Tally displays exoplanet systems from NASA's Kepler mission as tiny star systems, each with planets orbiting on circular tracks. Using D3 v3 and SVG, the visualization derives a scale for semimajor axis, planet radius, and orbital period from the CSV data, then renders static orbit rings and CSS3-animated planets. The animation relies on keyframe rotations with vendor-prefixed transforms, and the planet circles use a radial gradient. Systems are sorted by overall radius to create a compact, grid-like overview.

AI-generated description

A minimalist variation of Jonathan Corum’s interactive graphic on exoplanets discovered by NASA’s Kepler mission. This version lacks stars, labels, and more, but demonstrates the use of CSS3 for simple declarative animation of orbits.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

One System, Every Kepler Planet

Every Kepler planet from the dataset orbits a common center in one synchronized system. The visualization plots each planet’s semimajor axis as distance from the center and scales its radius logarithmically, while CSS animation duration is set from its orbital period. The SVG graphic uses D3’s `d3.scale.linear` for axis, radius, and time mapping, and each planet is a separate SVG with a rotating CSS animation. Data is loaded asynchronously via `d3.csv` from `planets.csv`.

Mmbostock

83% match

Loading thumbnail…

Exoplanets

A circle-packing visualization displays the relative sizes of planets in our solar system alongside hundreds of confirmed exoplanets, with each circle’s area proportional to its radius. A quantized color scale encodes planet radius, while a tooltip reveals the exoplanet’s name, radius, and distance from its star. The data comes from the Planetary Habitability Laboratory, and the layout is computed using d3.pack with padding, rendered as SVG circles. The code filters the CSV data to separate solar-system planets from exoplanets and uses d3.scaleQuantize for color mapping.

Mmbostock

75% 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

72% match

Loading thumbnail…

Fork of Solar System

This animated visualization presents the planets of the solar system as scaled circles, with relative sizes accurate but distances compressed for display convenience. Planet diameters, solar radii, and orbital data come from Wikipedia's list of gravitationally rounded objects. Each body uses a custom SVG radial gradient to simulate a shaded, three-dimensional appearance, including the Sun and Pluto. The d3 selection and transition APIs handle the animation, while a starfield background is generated procedurally with random placement that avoids overlapping the planets. Planet labels are positioned dynamically based on each body’s calculated radius.

Ppadmeshnaik22@gmail.com

70% 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

70% match

Loading thumbnail…

Solar System

A stylized, not-to-scale model of the solar system displays the sun and nine planets, including Pluto, on dark background with faint orbital rings. Planet sizes and orbital radii are fixed, but their revolution speeds vary by distance from the sun, with the closest planets moving fastest. The visualization is rendered as an SVG using React and D3 v6, where each planet is a circle with an SVG `<animateMotion>` element that follows a precomputed circular path. A static background image sourced from Khan Academy is included for context, while all orbital motion is driven purely through SVG animation rather than D3's simulation APIs.

AArjun Rao

69% match

Loading thumbnail…

Untitled

This example shows the diameters of planets in kilometers, with each planet represented as a dot on an SVG scatterplot rather than a bar chart. The x-axis maps planet names using `d3.scaleBand`, while the y-axis uses `d3.scaleLinear` for diameter values. Data is loaded from a CSV via `d3.csv`, and circles are appended to a group container with an explicit transform offset. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and the visualization is built entirely with D3 v7 and SVG, drawing from a dataset of planet measurements.

Hhollyjpotter

69% 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

68% match