100%

Data Visualization Studios World Tour WIP

✓ Published0🌍 Public

Last edited Jan 23, 2026

Created on Jan 23, 2026

An interactive globe visualizes the locations of data visualization studios worldwide, with color-coded regions and a legend for explore. A "world tour" automatically flies between studio locations using smooth zooming and rotation, pausing on user interaction. The visualization uses d3-geoOrthographic, d3.geoPath, and d3.interpolateZoom, with React state driving the animation loop and SVG rendering for the globe, labels, and points.

AI-generated description

World Tour (Van Wijk Smooth Zoom + Globe Rotation)

This project renders an orthographic globe (Canvas/SVG) with interactive labels and a programmatic "World Tour" camera.

The tour steps through data points with:

Smooth globe rotation (shortest-path interpolation)
Smooth zooming/panning (Van Wijk / Nuij technique via d3.interpolateZoom)
Pause/Resume on user interaction (drag to rotate, scroll to zoom)

Controls

Space: Play/Pause tour
Right Arrow: Next stop
Left Arrow: Previous stop
Esc: Stop tour (return to manual control)
Drag: Rotate globe (pauses tour)
Scroll/Pinch: Zoom globe (pauses tour)

Configuration

Edit config.js to tune tour physics:

tourDataSource: 'studios' or 'cities'
tourStepDurationMs: Flight time between stops
tourHoldDurationMs: Hover time at destination
tourZoomedFovRadiusPx: Controls how "close" the zoom gets (smaller = closer)

MIT Licensed

Similar vizzes

Loading thumbnail…

Data Visualization Studios Worldwide

An animated globe shows the worldwide locations of data visualization studios, with points color-coded by region. The visualization uses a spinning orthographic projection, rendered as an SVG, to display the Earth from space. The globe rotates using `requestAnimationFrame`, and the `d3.geoOrthographic` projection updates the positions of the data points in real time. A legend allows users to interactively highlight studios by region, using `d3.scaleOrdinal` for color mapping, with the studio data loaded from a CSV file.

CCurran Kelleher

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

81% match

Loading thumbnail…

Globe Zoom - Animate

Nnouralkhoury

81% match

Loading thumbnail…

Zoomable Globe with Cities on SVG

This visualization presents an interactive 3D globe of the world with city labels that appear based on population and zoom level. Users can drag to rotate the globe and scroll to zoom, with label visibility adjusting dynamically. Built with React and D3 v7, it uses `geoOrthographic` projection, `geoPath`, `geoGraticule`, and drag/zoom behaviors. City and world atlas data come from external JSON and CSV sources, with an SVG-based renderer featuring configurable colors and label styling.

CCurran Kelleher

80% match

Loading thumbnail…

Globe Zoom - Animate

This interactive visualization presents global data on a rotatable globe, supporting zoom and pan through d3.behavior.zoom. Users can switch between orthographic, Winkel3, and Mercator projections. The display animates between datasets, including geo-scatterplot transitions and population growth percentages. Country boundaries and graticules render via d3.geo.path, with a custom pattern marking missing data regions. Tooltips provide details on hover.

Nnouralkhoury

80% match

Loading thumbnail…

Globe Zoom - Animate

This interactive visualization presents a globe that users can spin and zoom into, transitioning between orthographic, Winkel, and Mercator projections. It overlays animated geo-scatterplot transitions of global meat consumption and population growth data. Built with React and D3.js v3, it uses `d3.geo.path()` for map rendering, `d3.behavior.zoom()` for interaction, and SVG marks for data points, with tooltips showing exact values.

TTimmyLu

79% match

Loading thumbnail…

World Tour

This visualization presents an animated orthographic globe that cycles through the world’s countries, highlighting each one in red while rotating to center it on screen. The display shows the country name above the globe as it transitions between nations. The code uses D3.js v3 for transitions and tweens, TopoJSON for world map data, and a Canvas 2D context for rendering. A queue loads GeoJSON topology and country name mappings, while d3.geo.path draws land, borders, and the globe sphere with dynamic rotation.

AAjar06

79% match

Loading thumbnail…

Globe Zoom - Animate

A world map rendered with SVG marks a projected globe, where graticules, landmasses, and country interiors are drawn via `d3.geoPath` and `d3.geoGraticule`. Nuclear test explosion sites, loaded from a CSV, are plotted as small circles whose positions are calculated using a Mercator projection (`d3.geoMercator`). The visualization demonstrates how multiple geographic datasets can be overlaid and interactively explored, with tooltips showing each site’s name and coordinates. The implementation uses React for state management and `d3` v3 APIs for map and projection handling.

AAbhishek Singh

79% match