Eclipses paths

100%

Eclipses paths

✓ Published0🌍 Public

Last edited Jan 1, 2020

Created on Nov 6, 2017

This visualization maps the paths of total solar eclipses from 1961 to 2045 as animated ribbons across a world map. Each eclipse path is drawn as a curved band, colored by date, and labeled with its year. Built with D3 v5 and SVG, it uses a custom topoJSON pipeline to simplify eclipse geometry while preserving accurate winding across the antimeridian. Hovering over a path triggers an animation showing the eclipse’s progression over time, with labels placed along the arcs for readability. The responsive design and d3-inertia enhance interactivity.

AI-generated description

Published as https://visionscarto.net/empreintes-d-eclipses.

Forked from rcrocker13's eclipse2017.

Added d3-inertia, made responsive, fixed winding order of paths that cross the antimeridian.

Added labels on paths (thank you Nadieh!)

Transformed Luke Stanke's geojson with the following recipe:<br> geo2topo --quantization 1e5 eclipses=eclipse.geojson.json | toposimplify --spherical-area 1e-4 > eclipses.json

mit Licensed

Similar vizzes

Loading thumbnail…

Lunar Eclipse

This scatter plot visualizes lunar penumbral eclipses from 1970 to 2050, plotting gamma against penumbral eclipse duration in minutes. Each blue dot represents an individual eclipse event, with axes labeled accordingly. The visualization uses D3 v5 to load CSV data from a local file, applying `scaleLinear` and `extent` to compute scales, and rendering circles via SVG. Axis ticks include grid lines, with a title and rotated y-axis label for clarity.

SStellaSong1

71% match

Loading thumbnail…

Solar Analemmas

This visualization shows hourly solar analemmas, the figure-eight paths traced by the Sun’s position at each fixed time of day, as seen from San Francisco during 2014. The background is a stereographic projection of the celestial sphere, rendered with d3.geoCircle, d3.geoGraticule, and d3.geoPath, with compass labels and altitude ticks. Twenty-four red paths, one per hour, are computed by the solar-calculator package and projected via a custom flippedStereographic function. The SVG output uses D3 v4 selections and data joins over hourly timestamps.

Mmbostock

69% match

Loading thumbnail…

Solar Path

This chart displays the Sun’s path across the sky for the current day, based on the viewer’s geolocation, using a stereographic projection that places the horizon as an outer circle and radiating azimuth lines. A red dot marks the Sun’s present azimuth and elevation, with hourly ticks along its trajectory. The visualization uses D3 v3’s `d3.geo.projection` and `d3.geo.path` for rendering, while a custom solar calculator computes positions from NOAA equations. It updates every second and includes a geolocation prompt to determine the user’s coordinates.

Mmbostock

68% match

Loading thumbnail…

Now + Solar Terminator

This visualization displays a world map using an azimuthal equidistant projection, rotated so solar noon is at the top. A semi-transparent blue region overlays the night side of the Earth, defined by the current solar terminator. The map and night boundary update continuously as time passes, recalculating the sun’s position based on a NOAA-derived algorithm. Built with D3 v3, the code uses `d3.geo.circle`, `d3.geo.path`, `d3.geo.azimuthalEquidistant`, and `d3.timer`, rendering SVG paths from TopoJSON world data.

Mmbostock

68% match

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

67% match

Loading thumbnail…

Solar Oscillator

This animation visualizes the changing solar terminator, the boundary between day and night, at roughly 5.2 million times real speed. Each frame advances the simulated date by twenty-four hours, making the seasonal shifts in daylight visible as a blue region for night and white for day. Built with d3.v3, it uses `d3.geo.circle` to calculate the terminator, a Kavrayskiy VII projection, and a `d3.timer` to drive the animation. It overlays the night path on top of land and graticule layers from a 50m world TopoJSON file.

Mmbostock

66% match

Loading thumbnail…

Data Folowing a Path

A collection of pink circles animates along a fixed black path, each circle traveling from the path’s start to its end in sequence. The visualization shows how data points can follow a predefined geometric route, with each circle representing a discrete step. The code uses D3 v5’s `scaleLinear` to map indices to path lengths, and `transition.attrTween` with `getPointAtLength` to move each circle along the SVG path. The animation uses `d3.easeCircleInOut` for smooth acceleration and deceleration, with the path defined by a complex Bézier string.

HHalian Vilela

65% match

Loading thumbnail…

Hilbert paths

A colorful, animated SVG visualization of Hilbert curves traces a path through a 512×512 grid, with the curve segmented into randomly sized, color-coded strokes. A white outline shows the full curve while seven white circles jump along it, updating their positions and a coordinate readout via `d3.interval`. The code uses `d3.scaleOrdinal` for color, `d3.range` for path generation, and custom `d2xy` and `xy2d` functions to map between Hilbert curve indices and 2D coordinates. Built with d3.v4 and SVG.

PPhilippe Rivière

65% match