Skip to main content
SimilarExport ZIP
100%

Globe Zoom - Animate

✓ Published0🌍 Public
TTimmyLu
Last edited Nov 21, 2020
Created on Nov 21, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

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
94% 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
93% 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
93% 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
91% 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
90% 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
89% match
Loading thumbnail…

Globe Zoom - Animate

An interactive orthographic globe visualizes country-level data, allowing users to zoom and rotate the projection. A choropleth map colors each country according to a numeric value, with a search feature that highlights a selected country and a rate filter for subsetting. Built with React and D3 v3, the visualization uses `d3.geo.orthographic` for the globe, `d3.geo.path` for rendering, and TopoJSON for world geography. The data is loaded from a local CSV file.

Nnouralkhoury
89% 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
89% match