Skip to main content
SimilarExport ZIP
100%

GLOBE

✓ Published0🌍 Public
AAnujbhatt26
Last edited Feb 29, 2024
Created on Feb 28, 2024
Forked from World Map Rotation

This interactive visualization presents a rotatable 3D orthographic globe of the world using D3.js and React. Users can drag the globe to explore different regions, with rotation applied via the versorDrag helper and d3.drag. The map displays country boundaries from TopoJSON world-atlas data (110m and 50m resolutions), rendered as SVG paths with hover highlighting. A graticule overlays the sphere to show latitude and longitude lines, while the projection updates dynamically through React state and d3.geoOrthographic.

AI-generated description

Drag rotate a D3 world map with React

MIT Licensed

Similar vizzes

Loading thumbnail…

Globe Rotation

This example uses a D3 orthographic projection to render a rotating globe, showing country boundaries and a semi-transparent graticule over a blue sphere. A user can drag to rotate the globe, with the rotation state updated via a custom `versorDrag` handler that leverages the `versor` library for quaternion-based rotation. Geographic data comes from the world-atlas TopoJSON files (110m and 50m resolution) loaded through `d3.json` and converted to features with `topojson.feature`. The visualization is built as a React component using SVG, with the drag interaction managed through D3’s `drag` and `geoPath` methods.

MMarco Costa
89% match
Loading thumbnail…

Fork of Globe Rotation

This example shows an interactive orthographic world map that users can drag to rotate, with the globe responding fluidly to pointer movement. The visualization renders country boundaries and graticules using React and D3’s `geoOrthographic` projection, while `geoPath` draws the sphere and grid lines. Drag interactions are handled with D3’s `drag` event system and the `versor` library, which computes quaternion rotations to update the projection’s rotation state via `setRotation`. The map’s data comes from the `world-atlas` TopoJSON files (110m and 50m resolutions), loaded asynchronously with D3’s `json` and converted to GeoJSON features using `topojson.feature`.

AAnujbhatt26
89% match
Loading thumbnail…

rotatable globe

A rotatable globe displays Earth’s continents and oceans, with animated color-coded pings appearing at random latitude and longitude coordinates. The globe auto-rotates around its vertical axis using a custom `autorotate` plugin that updates the projection’s rotation each frame. Built with React, the visualization uses D3 v5’s projection and path APIs, TopoJSON for world-110m-withlakes data, and the Canvas API for rendering. Users can drag to pause rotation and zoom via the Planetary.js-compatible drag and zoom plugins, with support for high-density displays.

CChase Hall
88% match
Loading thumbnail…

Globe Zoom - Animate

This interactive globe visualization animates between orthographic and map projections to display geographic data points, with country boundaries rendered as SVG paths. Users can zoom and rotate the globe, search for locations, and toggle between datasets showing meat consumption and population growth percentages. The visualization is built with D3.js version 3, React, and TopoJSON, using d3.geo.orthographic and d3.geo.winkel3 projections with d3.geo.zoom for interaction. Data is loaded from external CSV and TopoJSON sources, with tooltips and a legend providing additional context.

Nnouralkhoury
87% match
Loading thumbnail…

Globe Zoom - Animate

This interactive globe visualization animates between orthographic and map projections to display geographic data points, with country boundaries rendered as SVG paths. Users can zoom and rotate the globe, search for locations, and toggle between datasets showing meat consumption and population growth percentages. The visualization is built with D3.js version 3, React, and TopoJSON, using d3.geo.orthographic and d3.geo.winkel3 projections with d3.geo.zoom for interaction. Data is loaded from external CSV and TopoJSON sources, with tooltips and a legend providing additional context.

Nnouralkhoury
87% match
Loading thumbnail…

Globe Zoom - Animate

An interactive orthographic globe visualizes country-level data, allowing users to zoom and rotate the projection. A choropleth map colors each country according to a numeric value, with a search feature that highlights a selected country and a rate filter for subsetting. Built with React and D3 v3, the visualization uses `d3.geo.orthographic` for the globe, `d3.geo.path` for rendering, and TopoJSON for world geography. The data is loaded from a local CSV file.

Nnouralkhoury
87% match
Loading thumbnail…

Globe with Cities - React & D3

An orthographic globe projection displays world landmasses and city markers scaled by population, with graticules and a sphere contour providing geographic context. Built with React for state management and D3’s `geoOrthographic`, `geoPath`, and `geoGraticule` for projection and rendering, the visualization includes interactive rotation via mouse position tracking. City coordinates come from a CSV dataset, and land features are derived from TopoJSON using `topojson.feature` and `topojson.mesh`.

Ddvinubius
86% match
Loading thumbnail…

globe

This example displays a map of the world on a dark grey spherical globe with white borders. The globe is rendered using React and SVG, with the d3.geoOrthographic projection and d3.geoPath converting geographic data into SVG paths. Country boundaries are drawn from a TopoJSON file loaded using the d3.json function. A large grey circle provides the globe’s background, while the map features are layered on top with thin white strokes.

CChase Hall
86% match