Fork of ZoomableGlobe

100%

Fork of ZoomableGlobe

✓ Published0🌍 Public

Last edited Jul 22, 2023

Created on Jul 7, 2023

A fork of the ZoomableGlobe example displays an interactive world map with country boundaries and graticules, sourced from World Atlas TopoJSON. The map uses an equirectangular projection and renders landmasses as SVG paths via d3.geoPath, with React managing component state. Users can pan and zoom the map through a d3.zoom behavior, which updates the SVG group transform and adjusts stroke widths inversely to the zoom scale. The visualization also tracks mouse position and passes it to the projection’s invert method, allowing coordinate lookup on interaction.

AI-generated description

A world map showing country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

Loading thumbnail…

ZoomableGlobe

This interactive visualization presents a zoomable orthographic globe, displaying country boundaries and graticules sourced from the World Atlas TopoJSON. The globe is rendered as SVG paths using `d3.geoOrthographic` and `d3.geoPath`, with interactions managed by `d3.zoom`. It uses React to update the projection’s transform state during pan and zoom operations, adjusting stroke widths inversely to the zoom scale. The sphere and land features are styled with distinct fills, while interiors are outlined for clarity.

YYeeleng Scott Vang

88% match

Loading thumbnail…

Fork of Globe Zoom - Animate

This interactive visualization combines a geographic globe with animated scatterplot transitions. Users can switch between orthographic, Winkel, and Mercator projections while zooming and rotating the globe through mouse interactions. The visualization uses d3.geo.path with d3.geo.orthographic, d3.geo.winkel3, and d3.geo.mercator projections, along with d3.behavior.zoom for navigation. It displays land masses from TopoJSON world-atlas data with graticules and country boundaries, overlaid with circular marks representing dataset values. The interface includes buttons for projection and dataset selection, with tooltips and a color legend provided by d3.tip and d3-legend.

PPiotr Paszek

87% match

Loading thumbnail…

Fork of Globe Zoom - Animate

This interactive globe visualization allows users to explore geographic data through an animated, zoomable Earth. It presents a globe that automatically rotates, with countries rendered as filled polygons and graticules shown as lines. The visualization uses a custom fork of the D3 v3 library, integrating `d3.geo.orthographic` projection, `d3.geo.path` for rendering, and `d3.geo.zoom` for interactive panning and scaling. Data is loaded from external CSV files and displayed as colored points on the globe, with tooltips providing details on hover. The interface includes menu buttons for switching between different map projections and datasets, all styled with a dark theme and CSS animations.

MMinh Nguyen

87% match

Loading thumbnail…

Fork of Globe Zoom - Animate

This interactive world map visualization, built with React and D3.js v3, presents two global datasets—meat consumption in kilograms and population growth percentages—as colored regions on a three-dimensional globe. Users can rotate the globe using a geo-zoom interaction and switch between orthographic, Winkel, and Mercator projections. The visualization uses `d3.geo.path` for rendering geographic features from TopoJSON data, while the React component architecture separates data loading via the custom `useDataMap` hook from the SVG-based rendering of land masses, graticules, and country boundaries.

TTacue

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

85% match

Loading thumbnail…

Fork of Globe with Panning & Zooming

This interactive visualization presents a draggable, zoomable world map on a globe projection, allowing users to pan across the globe and zoom in and out with smooth, responsive controls. It displays country boundaries, a graticule grid, and a sphere outline over a plain background. The implementation uses D3’s `geoOrthographic` and `geoEquirectangular` projections, `geoPath` for rendering, and `drag` and `zoom` behaviors to manage rotation and scale changes. Country data is loaded from a TopoJSON world atlas via `topojson-client`, with interaction states tracked in a central state object.

Llingjizhu@gmail.com

85% match

Loading thumbnail…

Fork of Globe Zoom - Animate

This example animates a globe that transitions between an orthographic and a Mercator projection, overlaid with a geo-scatterplot of nuclear explosion data. The visualization uses D3 v3’s `d3.geo.orthographic()` and `d3.geo.mercator()` projections with `d3.geo.path` and `d3.geo.zoom` to enable zooming and rotation. It also demonstrates shape tweening between projections, with the map rendered via TopoJSON and the nuclear data plotted as points from a CSV file. The globe supports interactive pan and zoom, with a legend and tooltips via `d3.tip`.

Mmoslem-tg

84% match

Loading thumbnail…

Fork of Globe with Panning & Zooming

This example shows an interactive orthographic globe that can be panned by dragging and zoomed with the mouse wheel. A graticule and country outlines are rendered over a sphere outline, with the map data loaded from a TopoJSON world atlas. The code uses `d3.geoOrthographic` for the projection and `d3.geoPath` for drawing, while `d3.drag` and `d3.zoom` handle the user interactions, updating the rotation and scale state accordingly.

Aacharlton21@proton.me

84% match