World Map

100%

✓ Published0🌍 Public

Last edited Jul 10, 2022

Created on Jul 9, 2022

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map w/ Rotation

This example presents an interactive world map as a rotating orthographic globe. The visualization loads geographic boundary data from a JSON file and renders it as SVG paths, continuously adjusting the map’s rotation with a timer. The animation rotates the projection along its horizontal axis using `projection.rotate()`, while a tilting offset adjusts the vertical perspective. The map uses `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoProjection` to create the spherical effect, and the countries are filled with a solid green color.

Ssalimjivani

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

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

88% match

Loading thumbnail…

World Map

This interactive world map displays global countries with a three-dimensional orthographic projection, allowing users to drag the globe to rotate it and click individual countries to switch between projections. The visualization uses D3.js with `d3.geoPath` and `d3.geoProjection` for rendering, TopoJSON for country boundaries, and world-atlas data. A graticule overlay shows latitude and longitude lines, while a `d3.drag` handler enables rotation and `d3.zoom` supports scaling. Country names are linked via TSV data, and hover effects highlight selected regions.

GGlebenator

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

88% match

Loading thumbnail…

World Map

This example displays an interactive world map showing country boundaries with zooming and hover effects. It uses D3 v5 and TopoJSON to load geographic data from the world-atlas dataset, projecting it with d3.geoEquirectangular and rendering via d3.geoPath. The map initially shows a blue sphere with light green countries and indigo borders, which turn maroon on hover. A d3.zoom handler enables pan and zoom interactions on the SVG.

BBhavyaMammai

87% match

Loading thumbnail…

World Map Rotation

This example presents an orthographic world map that users can rotate by dragging with the mouse. The map renders country boundaries from TopoJSON data using D3’s `geoOrthographic` projection and `geoPath`, with a graticule overlay and interactive hover highlighting on countries. Rotation is implemented through React state updates triggered by D3 drag events, using the `versor` library to compute quaternion-based rotations for smooth, intuitive globe manipulation. The visualization demonstrates a React component integrating D3’s drag behavior, projection system, and geographic data loading via hooks.

MMarco Costa

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

87% match