Untitled

100%

✓ Published0🌍 Public

Last edited Oct 2, 2020

Created on Oct 2, 2020

This example shows an interactive orthographic globe built with D3.js and TopoJSON, rendered as an SVG with animated transitions. Users click a country to rotate the globe and zoom toward that region, using `d3.geo.orthographic`, `d3.geo.path`, and `d3.geo.centroid` for positioning. A water sphere and land paths are drawn from `world.json`, with click handling triggering `transition.attrTween` to interpolate rotation and scale. The `active` class highlights selected countries in orange, and clicking the background resets the view to its original scale.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Untitled

This example demonstrates an interactive 3D globe visualization built with React and D3. It renders a rotating Earth using `d3.geoOrthographic` and `d3.geoPath` to project country boundaries onto a canvas, with atmospheric shading applied through layered gradients. The code uses `d3.forceSimulation` to position label nodes around the planet, enabling smooth hover interactions that display country names and associated data. The visualization loads geographic coordinates from a bundled TopoJSON dataset and updates the globe’s rotation via a requestAnimationFrame loop, providing a dynamic and responsive exploration of world geography.

Ssambird1

90% match

Loading thumbnail…

Untitled

An orthographic globe projects world landmasses and graticule onto a Canvas, with countries highlighted in red on hover and named in a header. The globe auto-rotates using a d3.timer, and users can drag to spin it via versor-based quaternion rotation, pausing rotation after interaction. Data comes from the world-atlas TopoJSON and a world-country-names TSV, rendered using d3.geoPath and d3.geoOrthographic within the d3-geo library.

DDolbyref113

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

86% match

Loading thumbnail…

Untitled

This interactive orthographic globe displays world landmasses, graticules, and city labels with mouse-controlled rotation. It uses D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path` to render SVG, with TopoJSON world-110m data for land. A `places.json` dataset adds point markers and text labels for cities like San Francisco and Kiev. Radial gradients simulate ocean shading, a drop shadow, and globe highlight, while mouse drag rotates the projection and reposition labels.

KKikkolatsch

86% match

Loading thumbnail…

Let's make a map!

This example renders an interactive orthographic globe using D3’s `geoOrthographic` and `geoPath` projections. It loads world country boundaries from TopoJSON and country names from a TSV file, then displays each country as a light-green SVG path that turns red on hover, with tooltips showing the country name. The globe itself is drawn as a dark-blue sphere, and all interactions rely on D3’s data join and selection methods.

DDannie2020

86% match

Loading thumbnail…

Earth globe

An interactive orthographic globe renders world countries as SVG paths using D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path`, with land polygons from a TopoJSON `world-110m.json` file. Users can drag to rotate the globe via `d3.behavior.drag`, which adjusts the projection’s rotation, while hovering over a country displays its name in a tooltip. A dropdown menu, populated from a TSV file of country names, lets users select a country; the globe then smoothly animates to center on that country’s centroid using a `d3.transition` with an interpolated rotation, and the selected country is highlighted in green.

KKoGor

86% match

Loading thumbnail…

Rotating Globe

This example shows a continuously rotating orthographic globe, with country outlines and a graticule drawn over a dark ocean. The globe is interactive, allowing users to pan and zoom via a d3.zoom handler that applies a transform to the SVG group. The rotation is driven by a d3.timer that updates the d3.geoOrthographic projection’s rotation, while d3.geoPath renders the sphere, graticule, and land masses from World Atlas TopoJSON and TSV data. The visualization uses SVG with hover highlights on countries.

Ddarinadii11

85% match

Loading thumbnail…

Untitled

This example displays a world map rendered as SVG paths, colored grey with thin white stroke lines separating countries. The map uses the Mercator projection, centered on the prime meridian and rotated to show the eastern hemisphere. Users can pan and zoom interactively via a d3.zoom handler, which applies a transform to the grouped country paths during the zoom event. The geographic data comes from a TopoJSON file loaded with d3.json, and the features are extracted using topojson.feature before being drawn with d3.geoPath. The projection is configured with d3.geoMercator, and the zoom scale is restricted to a range of 1 to 8.

NNatalija Jansone

85% match