Skip to main content
SimilarExport ZIP
100%

The Blue Planet

✓ Published0🌍 Public
EElementargeist
Last edited Mar 30, 2020
Created on Mar 28, 2020

The Blue Planet presents an auto-rotating orthographic globe displaying world country boundaries. A starfield background and blue sphere create a space-themed perspective, with countries colored via a green ordinal scale. The visualization loads geographic data from a TopoJSON file and merges it with TSV metadata. D3’s `geoOrthographic` projection, `geoPath`, and `d3.timer` drive the continuous rotation, while zoom interactions and hover effects highlight individual nations.

AI-generated description

Data Files: <a href="https://unpkg.com/browse/world-atlas@1.1.4/world/" target="_blank">https://unpkg.com/browse/world-atlas@1.1.4/world/</a><br>

Background Picture: <a href="http://www.script-tutorials.com/demos/360/images/stars.png" target="_blank">http://www.script-tutorials.com/demos/360/images/stars.png</a><br>

D3-Geo: <a href="https://github.com/d3/d3-geo" target="_blank">https://github.com/d3/d3-geo</a><br>

World Atlas TopoJSON: <a href="https://www.npmjs.com/package/world-atlas" target="_blank">https://www.npmjs.com/package/world-atlas</a><br>

TopoJSON.js: <a href="https://unpkg.com/topojson@3.0.2/dist/topojson.js" target="_blank">https://unpkg.com/topojson@3.0.2/dist/topojson.js</a><br>

World Map SVG: <a href="https://observablehq.com/@d3/world-map-svg" target="_blank">https://observablehq.com/@d3/world-map-svg</a><br>

D3-Zoom: <a href="https://github.com/d3/d3-zoom" target="_blank">https://github.com/d3/d3-zoom</a><br>

D3-scale-chromatic: <a href="https://github.com/d3/d3-scale-chromatic/blob/master/README.md#interpolateTurbo" target="_blank">https://github.com/d3/d3-scale-chromatic/blob/master/README.md#interpolateTurbo</a><br>

<br><br> Tutorial:

MIT Licensed

Similar vizzes

Loading thumbnail…

Rotating Globe

A rotating orthographic globe displays country-level data values, with landmasses rendered in sky blue and hover states highlighted in dark blue. Using D3 v5 with `d3.geoOrthographic` and `d3.geoPath`, the projection rotates continuously via `d3.timer`, while a graticule overlays the sphere. The visualization loads world topology from TopoJSON and country names from a CSV file, with zoom support via `d3.zoom`.

Nnouralkhoury
85% match
Loading thumbnail…

Rotating Globe

A rotating orthographic globe displays country boundaries and graticules, with land masses that change color on hover. The visualization uses D3 v5’s `geoOrthographic`, `geoPath`, and `geoGraticule` with a timer to continuously adjust the projection rotation. World map data comes from the World Atlas TopoJSON, while country names are loaded from a TSV file. Zooming is enabled via D3’s `zoom` behavior, and all rendering uses SVG paths.

Zzahra929
82% match
Loading thumbnail…

Rotating Globe

A rotating orthographic globe displays Earth's landmasses in sky blue against a black background, with graticule lines and interactive country names on hover. The rotation is driven by a `d3.timer` that continuously updates the projection's rotation angles, while `d3.geoOrthographic` and `d3.geoPath` render the sphere and features. World map data comes from the `world-atlas` package, loaded via `d3.json` and `d3.tsv`, with country names built into a lookup table. The visualization uses SVG for rendering within a `d3` framework.

AAbhishekJha1994Outlook
81% match
Loading thumbnail…

Untitled

A globe projection of the world renders country polygons onto a Canvas element using `d3.geoPath` and `d3.geoOrthographic`. It displays land masses in dark blue, water in light gray, and a graticule overlay. The globe auto-rotates slowly, but dragging it with the mouse adjusts the projection angles, and hovering highlights a country in a different color while showing its name. The visualization loads world geography as TopoJSON from a remote source and country names from a TSV file, using `d3.geoGraticule10`, `d3.drag`, and the `versor` library for rotation calculations.

AAbhishek Singh
80% match
Loading thumbnail…

Rotating Globe

A rotating orthographic globe displays world landmasses and graticule meridians in SVG. The Earth spins continuously via a d3.timer that updates the d3.geoOrthographic projection’s rotation, with d3.geoPath rendering the geographic features from TopoJSON world-atlas data. A hover effect darkens countries, while a static color legend lists continents. Zoom and pan are supported through d3.zoom, with the globe group transformed on user input.

Nnouralkhoury
79% match
Loading thumbnail…

D3 Course 7: World Map - Rotating Globe

This interactive globe visualizes world countries using an orthographic projection that continuously rotates over time. The example renders landmasses in light green with hover highlighting, displays graticule meridians, and includes a blue ocean sphere. It loads geographic data from the world-atlas package, which provides both GeoJSON and TSV country name lookups. Using d3.geoOrthographic, d3.geoPath, and d3.geoGraticule functions, the globe animates via d3.timer, rotating the projection's horizontal axis while maintaining a fixed vertical tilt, with zoom support integrated through d3.zoom.

GGabrz
79% match
Loading thumbnail…

D3 Course 7: World Map - Rotating Globe

This example demonstrates an interactive orthographic globe that rotates continuously, with countries rendered in light green and highlighted red on hover. The visualization shows land masses, a graticule grid, and an ocean sphere against a black background, with zooming enabled. It uses D3 v5 and TopoJSON, applying d3.geoOrthographic and d3.geoPath to project world data from the world-atlas 50m dataset. A d3.timer drives the rotation by updating the projection’s rotation, while zoom behavior transforms the globe group. Country names are displayed via SVG title elements.

Zzahra929
79% match
Loading thumbnail…

D3 Course 7: World Map - Rotating Globe

This interactive visualization presents a rotating orthographic globe that continually spins on a tilted axis. The world’s landmasses, drawn in light green with dark borders, are accompanied by a graticule grid of meridians and parallels. The globe supports zooming via the d3.zoom behavior, while d3.timer drives the rotation by updating the d3.geoOrthographic projection’s rotation parameters. Country data comes from the world-atlas TopoJSON files, with names appended as SVG title tooltips; hovering highlights individual countries in red.

Zzahra929
79% match