Joel Jäggli (@Joelito27), VizHub

Spinning Globe

A spinning globe uses an orthographic projection to display world country boundaries from a TopoJSON file. The globe rotates continuously around its vertical axis as the projection’s rotation state updates on each animation frame via `requestAnimationFrame`. The code applies `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoGraticule` to draw country paths, a graticule, and a sphere outline, with state managed through setState and cleanup.

Dec 22, 2024

Loading thumbnail…

Fork of Simple World Map

This example renders an interactive world map using a Natural Earth projection. It displays country boundaries with graticule lines and an outline, all drawn as SVG paths. The visualization loads geographic data from a remote TopoJSON file and converts it to GeoJSON using `topojson.feature`. The map is rendered with D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule`, with a React state management pattern handling asynchronous data fetching.

Dec 22, 2024

Loading thumbnail…

Fork of Simple World Map

This example renders an interactive world map using a Natural Earth projection. It displays country boundaries with graticule lines and an outline, all drawn as SVG paths. The visualization loads geographic data from a remote TopoJSON file and converts it to GeoJSON using `topojson.feature`. The map is rendered with D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule`, with a React state management pattern handling asynchronous data fetching.

Dec 22, 2024