Skip to main content
SimilarExport ZIP
100%

Solar Terminator (Waterman)

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Jan 14, 2014

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.

AI-generated description

A fork of the earlier Solar Terminator example, using the Waterman butterfly projection.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Solar Terminator

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.

Mmbostock
88% 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
84% 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
81% 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
81% 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
71% 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
70% 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
68% match
Loading thumbnail…

Waterman Butterfly

This example displays a world map using the Waterman butterfly projection, a polyhedral map projection that unfolds the globe into a butterfly-like shape. The visualization is rendered as an SVG using the D3.js v3 library and the `d3.geo.polyhedron.waterman` plugin, which defines the custom projection. The map includes a graticule, land masses, and country boundaries, with data loaded from a GeoJSON file via `d3.json`. The projection is rotated, scaled, and translated to center the map, and clipped to the sphere's outline.

Mmbostock
67% match