Solar Terminator

100%

Solar Terminator

✓ Published0🌍 Public

Last edited Mar 9, 2019

Created on Jan 22, 2013

A live map displays the current solar terminator, the line separating day and night on Earth. A semi-transparent blue shape covers the night side of the globe, updating in real time. Built with d3.geo.equirectangular for the map projection and d3.geo.circle, the night region is drawn as a large circle whose center is the antipode of the sun’s computed position. The solar position is calculated using NOAA-derived equations for solar declination, the equation of time, and orbital corrections, updating every second via setInterval. The world map is rendered from TopoJSON land data.

AI-generated description

The current solar terminator is shown in blue.

Thanks to Ben Elsen and NOAA for help implementing the correct equations for the position of the sun, which turned out to be quite a bit more complicated than I expected.

gpl-3.0 Licensed

Similar vizzes

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

91% match

Loading thumbnail…

Solar Terminator (Waterman)

The visualized map shows the current terminator line dividing day and night across the globe, rendered with the Waterman butterfly projection. The animation updates every second, moving the night-shaded region based on a calculated solar position. The code uses the `d3.geo` library, specifically `d3.geo.polyhedron.waterman()`, `d3.geo.circle()`, and `d3.geo.path()`, to project and draw the sphere, graticule, and landmasses from world-50m.json data. The night path’s shape derives from an antipode of the sun’s computed declination and equation of time.

Mmbostock

88% match

Loading thumbnail…

Solar Terminator with layers clipping

This example displays a world map with a day/night terminator boundary that updates in real time, and uses that boundary to clip an overlaid tile layer so the dark side of the Earth appears grayscale while the lit side remains colored. A red star marks the user’s current location. The terminator path is generated by the Leaflet.Terminator plugin, which computes the sun’s position and latitude per longitude; a D3-selected SVG clipPath is updated every 500 milliseconds and applied via CSS `clip-path` to the overlay’s container. The overlay uses Stamen toner tiles, and a luminance-to-alpha SVG filter enables the masking effect.

KKoGor

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

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

78% match

Loading thumbnail…

The Sun’s View of the Earth

This example shows an orthographic projection of Earth from the Sun’s perspective, with the day-night terminator updated every second. The code uses d3.geo.orthographic, d3.geo.path, and d3.json to load TopoJSON world land data, rendering land as a single SVG path. A red dot marks the Sun’s position. Solar declination and equation of time calculations from NOAA drive the projection’s rotation, animating the view via setInterval and the rotate method.

Mmbostock

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

73% match

Loading thumbnail…

Now

A south polar azimuthal equidistant projection shows the world map oriented so noon is at the top, continuously rotating to reflect the current time of day. Built with D3 v3, it uses `d3.geo.azimuthalEquidistant` and `d3.geo.path` to render SVG land and boundary shapes from TopoJSON, with a graticule and sphere outline. A `d3.timer` updates the map’s rotation every frame based on the UTC time difference from midnight, creating a live, animated representation of Earth’s rotation.

Mmbostock

69% match