The Sun’s View of the Earth

100%

The Sun’s View of the Earth

✓ Published0🌍 Public

Last edited Mar 9, 2019

Created on Feb 5, 2013

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.

AI-generated description

An alternate view of the solar terminator.

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

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

80% match

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

78% match

Loading thumbnail…

This Is a Globe

A rotating orthographic globe displays Earth’s landmasses as a flat silhouette on a circular canvas. The map is rendered using D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path`, with TopoJSON land data from the world-110m file. A `d3.timer` advances the rotation each frame, clearing and redrawing the canvas context, while a stroked arc outlines the sphere’s edge.

Mmbostock

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

76% match

Loading thumbnail…

Orthographic Shading

An interactive orthographic projection shows Earth’s graticule as a shaded sphere rotating continuously. Latitude and longitude lines at 10° increments form the grid, which is clipped to the visible hemisphere. The animation uses `d3.geo.orthographic()` and `d3.geo.path()` to project the graticule, while a radial gradient fills a circle to simulate lighting. A `d3.timer` updates the projection rotation and the fill’s transform, altering the view over time. The SVG rendering includes subtle stroke opacity for depth.

Mmbostock

76% match

Loading thumbnail…

Earth animation

An orthographic Earth projection rotates continuously over a starfield background rendered on canvas. The animation uses D3 v3 with `d3.geo.orthographic`, `d3.geo.path`, and a `d3.transition` tween to interpolate the projection’s rotation, clearing and redrawing each frame. Landmasses and country borders come from TopoJSON world-110m data, and the background image is loaded via a queue and drawn with Canvas `drawImage`.

KKoGor

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

75% match