Solar Terminator with layers clipping

100%

Solar Terminator with layers clipping

✓ Published0🌍 Public

Last edited Aug 12, 2014

Created on Aug 7, 2014

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.

AI-generated description

Solar Terminator with layers clipping. Path generated by Leaflet.Terminator plugin used for clipping layers, night effect on tiles created with help of SVG filter. Your location marked with red star. All works great on firefox. Leaflet + Leaflet.Terminator.

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

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

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

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

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

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

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

64% match

Loading thumbnail…

Cross Country Trip

This layered map visualizes global population density using NASA's "Earth at Night" imagery, overlaid with world country and US state borders and Stamen Toner label tiles. The visualization supports panning and zooming, and an animation automatically moves the view westward. Implemented with D3 v4, it uses `d3.tile`, `d3.geoMercator`, `d3.geoPath`, `d3.zoom`, and `d3.timer` to manage tiled raster layers, vector paths, and continuous motion, with a click toggling the animation.

CCurran Kelleher

64% match