Now

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.

83% match

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.

80% match

Flat Earth Map

This example visualizes the world as a spinning globe using the "Flat Earth" Azimuthal Equidistant projection, a map style associated with flat-Earth beliefs. The code loads geographic data from `world-110m` via TopoJSON and renders it with an SVG path. A `d3.timer` continuously updates the projection’s rotation, tilting the globe vertically while spinning it horizontally. The implementation uses `d3.geoAzimuthalEquidistant`, `d3.geoPath`, and `topojson.feature` to convert the TopoJSON land masses into a dynamic, animated display.

CCurran Kelleher

Rotating Transverse Mercator

A rotating transverse Mercator projection continuously spins a world map around its central meridian, showing how the projection distorts shapes and areas away from the axis of rotation. The animation uses a dark canvas with white country borders and a semi-transparent graticule, all rendered via `d3.geoPath` and Canvas 2D drawing. Land polygons and country boundaries come from TopoJSON data in the world-atlas package, while a `d3.timer` updates the projection’s rotation each frame. The code specifies `d3.geoTransverseMercator`, `d3.geoGraticule10`, and `topojson.feature` and `topojson.mesh` for data processing.

World Map

This example presents an interactive orthographic world map that automatically rotates over time. The visualization uses D3’s `geoOrthographic` projection and `geoPath` to render continents and graticules as SVG, with country data from the world-atlas TopoJSON and TSV files. Users can zoom and pan the globe via `d3.zoom`, while hovering over landmasses highlights them in yellow. The rotation is driven by a `d3.timer` that continuously updates the projection’s rotation.

Ssaijahnaviappineni

Azimuthal Equidistant

This example demonstrates the azimuthal equidistant projection, a map projection that preserves accurate distances from a central point. The map is centered on San Francisco, with the world rendered using outlines and filled landmasses. The visualization uses D3’s `d3.geoAzimuthalEquidistant` projection and `d3.geoPath` to draw the sphere, graticule, and geographic features. Land and boundary data come from a world-atlas TopoJSON file, processed using the `topojson-client` library. The SVG output includes a graticule, a stroked sphere outline, and a white-filled sphere background.

Let's make a map with D3.js!

This example renders an orthographic globe using D3.js and TopoJSON, drawing country boundaries as green SVG paths with white strokes over a sphere background. It loads world geography from the world-atlas dataset, converts TopoJSON features via `topojson.feature`, and projects them with `d3.geoOrthographic` and `d3.geoPath`. The map is static, with no rotation or interaction, and displays all countries at a 110m resolution.

Aaidanoconnor1

Let's make a map with D3.js!

This example displays a world map using an orthographic projection, rendering countries as light-green SVG paths with dark strokes. It loads geographic data from a TopoJSON world-atlas file via `d3.json`, then converts it to GeoJSON using `topojson.feature`. The map is drawn with `d3.geoPath` and `d3.geoOrthographic`, projecting the spherical landmasses onto a flat plane. The dark blue background and minimal styling emphasize the Earth’s curved shape, creating a simple globe-like visualization.

NNita