Skip to main content
100%

viewDidResize

✓ Published0🌍 Public
Aalessioalex
Last edited Jul 23, 2012
Created on Aug 15, 2012

An interactive D3 visualization featuring an orthographic globe and a map that respond to live data updates via Faye subscriptions. The globe uses d3.geo.azimuthal projection with orthographic mode, rendered as SVG paths for world countries, with mouse drag to rotate the globe and hover effects to highlight countries. A separate map view displays real-time markers from incoming messages, with the visualization adapting to window resizing. The globe supports mode switching between different projections (orthographic, stereographic, gnomonic, equidistant, equalarea) and animated rotation.

AI-generated description

Similar vizzes

Loading thumbnail…

GLOBE

This interactive visualization presents a rotatable 3D orthographic globe of the world using D3.js and React. Users can drag the globe to explore different regions, with rotation applied via the versorDrag helper and d3.drag. The map displays country boundaries from TopoJSON world-atlas data (110m and 50m resolutions), rendered as SVG paths with hover highlighting. A graticule overlays the sphere to show latitude and longitude lines, while the projection updates dynamically through React state and d3.geoOrthographic.

AAnujbhatt26
77% 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
77% 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
76% 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
76% match
Loading thumbnail…

Map & Globe

Two interactive views of geographic data are linked: a Leaflet map on the left and a D3 orthographic globe on the right, both rendered with Canvas and animated. Panning and zooming the map updates the globe's rotation and zoom, and vice versa. The globe uses a black-and-white TopoJSON world map, while the map shows a monochrome tile layer. A visible circular outline on the globe indicates the map's current viewport. The linking is implemented using Chiasm plugins: `layout` for box layout, `links` for data binding between the two components, `leaflet` for the map, and `globe` for the D3 Canvas globe renderer.

CCurran Kelleher
76% match
Loading thumbnail…

Globe with panning & zooming

This example presents an interactive globe that users can pan and zoom, rendered using a D3 orthographic projection. Landmasses and internal country borders are drawn from the visionscarto-world-atlas TopoJSON dataset via `d3.geoOrthographic` and `geoPath`. The globe responds to drag interactions for rotation and mouse-wheel zoom events, adjusting the projection’s rotation and scale through `d3.drag` and `d3.zoom` handlers. A fitted initial view establishes the default scale, while the sphere, land, and country-mesh features are styled via CSS classes.

SShad Frigui
76% match
Loading thumbnail…

globe zoom

This interactive data visualization displays global demographic and agricultural data on a zoomable three-dimensional globe. Users can rotate the globe and zoom into specific regions, with country boundaries rendered as geographic paths. The visualization uses D3 v3 with geo projection libraries, featuring both orthographic globe and map projections. Data points are loaded from CSV files and displayed as colored scatterplot markers, with tooltips providing country-specific values. The interface includes controls for switching between different datasets and projection types, all rendered with SVG animation.

JjordyBernard406
76% 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
76% match