Skip to main content
SimilarExport ZIP
100%

TEST

✓ Published0🌍 Public
FFlash
Last edited Jan 13, 2022
Created on Jan 12, 2022
Forked from Drawing a box

An interactive orthographic globe displays graticule lines, a red rectangular arc region, and a sphere outline, with a hidden world map loaded for future rendering. Users drag to rotate the projection via `d3.drag`, adjusting the rotation with `projection.rotate`, and zoom using `d3.zoom` to transform the SVG group. The visualization uses `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoGraticule`, fetching TopoJSON from the world-atlas package, while styling SVG paths with CSS classes for the sphere, graticule, and rectangle.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

D3 map drag demo

This example presents an interactive orthographic globe rendered with SVG. Users can click and drag to rotate the projection, which dynamically updates the graticule and country boundaries. The visualization uses d3.geoOrthographic, d3.geoPath, d3.zoom, and d3.drag to handle the interaction. Country polygons come from the world-atlas TopoJSON dataset, with names from the accompanying TSV file displayed as tooltips.

JJacob Philpott
85% match
Loading thumbnail…

D3 map drag demo

This demo displays an interactive orthographic globe where users can click and drag to rotate the Earth, with country boundaries rendered as SVG paths and tooltips revealing country names on hover. The sphere, graticule, and countries are drawn using d3.geoPath with a d3.geoOrthographic projection, while rotation is handled manually through d3.drag events that adjust the projection’s rotate values. Country geometries come from the world-atlas TopoJSON dataset (50m resolution) paired with a TSV file for name lookups, and the visualization also supports d3.zoom for additional transformations.

GGlebenator
83% 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
83% 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
82% match
Loading thumbnail…

Fork of D3 map drag demo

This example shows an interactive orthographic globe rendered with SVG, where users can drag to rotate the Earth and see country boundaries and graticule lines. The code uses `d3.geoOrthographic` for projection and `d3.geoPath` to draw geographic features from TopoJSON data sourced from the world-atlas package. Drag events update the projection’s rotation, while zoom is handled via `d3.zoom`. Country names are loaded from a TSV file and displayed as tooltips using SVG `<title>` elements.

RrayaneB0t
82% 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…

experiments

This example shows a world map with a graticule and a rectangular polygon overlay, rendered as SVG paths. Users can drag to rotate the projection and zoom to rescale the view. It uses `d3.geoEquirectangular` with `d3.geoClipPolygon` to clip the sphere, `d3.geoGraticule` for the grid, and `d3.geoPath` for rendering. Country boundaries come from TopoJSON data in the world-atlas package, with drag handling via `d3.drag` and zoom via `d3.zoom`. The polygon overlay is outlined via `arc.outline()`.

GGlebenator
82% 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
82% match