Skip to main content
SimilarExport ZIP
100%

Fork of Drawing a box

✓ Published0🌍 Public
Ttoby-fox
Last edited Jan 11, 2022
Created on Jan 5, 2022
Forked from Drawing a box

This interactive visualization displays an orthographic globe with graticule lines, country boundaries from the world-atlas TopoJSON dataset, and a colored rectangular region defined by geodetic bounds. Users can rotate the globe by dragging and zoom using d3.zoom. The code constructs projections with d3.geoOrthographic, generates paths through d3.geoPath, and renders graticules via d3.geoGraticule. A unique random fill color is applied to the rectangle each time the globe is dragged.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Drawing a box

This interactive visualization displays a graticule, country boundaries, and a red rectangular region on an orthographic projection of the Earth. Users can drag to rotate the globe, using the d3.drag module to adjust the projection’s rotation, revealing the selected bounds. Built with d3-geo-projection.v3, it renders via SVG using d3.geoPath and d3.geoGraticule, with country data sourced from the world-atlas TopoJSON. The d3.zoom module enables panning and scaling of the entire graphic.

GGlebenator
90% match
Loading thumbnail…

Fork of Fork of ice8

This interactive globe uses D3’s geo projections (d3.geoOrthographic, d3.geoMercator, d3.geoAlbersUsa) and d3.geoPath to render world country boundaries from TopoJSON. Users can drag to rotate the orthographic view, click a country to switch between projections, and zoom with d3.zoom. Country names come from a TSV dataset, and graticules are drawn via d3.geoGraticule. The visualization animates projection changes with SVG transitions.

MMgk1255
83% match
Loading thumbnail…

Fork of Fork of Fork of Fork of ice8-vignesh

This interactive globe displays country boundaries from the World Atlas TopoJSON dataset, rendered as SVG paths via `d3.geoPath` with an orthographic projection. Users can drag to rotate the globe, which adjusts the projection’s rotation, and scroll to zoom via `d3.zoom`. Clicking a country switches between the orthographic, Mercator, and Albers USA projections, with a transition applied through `transition().duration()`. A graticule layer is also drawn, and country names are loaded from a TSV file to trigger projection changes.

GGogineni44
83% match
Loading thumbnail…

Fork of d3map

This interactive globe visualizes country-level data from a TopoJSON world atlas. Users can drag the globe horizontally to rotate it, and hovering over a country updates an information panel showing its name. Built with d3-geo projections and d3-drag, the visualization uses an orthographic projection rendered as SVG paths, with d3.geoPath generating the country outlines. The rotation logic is computed directly from mouse coordinates rather than using versor-based dragging.

Nnstafford
83% match
Loading thumbnail…

Fork of Globe with Panning & Zooming

This example shows an interactive orthographic globe of the world, where users can click and drag to rotate the sphere and scroll to zoom in and out. The visualization displays country boundaries, a graticule, and an outline sphere, all rendered using the D3.js library. It leverages `d3.drag` for panning rotation and `d3.zoom` for scaling, with the globe’s projection updated via `d3.geoOrthographic` and `d3.geoPath`. Country data comes from the TopoJSON world atlas fetched from a CDN, with paths generated using `topojson.feature`.

Llingjizhu@gmail.com
82% match
Loading thumbnail…

Fork of D3 map drag demo

An interactive orthographic globe displays country boundaries from the World Atlas TopoJSON dataset, rendered as SVG paths via `d3.geoPath` with a `d3.geoOrthographic` projection. Users drag to rotate the globe, which updates the projection’s rotation based on the drag event’s delta and the current scale. A graticule overlay and zoom via `d3.zoom` complement the interaction, while hovering reveals country names from a TSV lookup table. Clicking a country logs its name to the console.

KKikkolatsch
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…

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