Fork of Globe Zoom - Animate

100%

Fork of Globe Zoom - Animate

✓ Published0🌍 Public

Last edited May 24, 2021

Created on May 24, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

90% match

Loading thumbnail…

Globe Zoom - Animate

Nnouralkhoury

90% match

Loading thumbnail…

Fork of Globe Zoom - ICE_5

This interactive visualization, built with React and D3.js (v3), presents a zoomable globe and map interface for exploring geospatial datasets. It displays geographic features such as country landmasses, graticules, and sphere outlines, alongside scatterplot data points representing race-related metrics. Users can switch between orthographic globe, Winkel triple, and Mercator projections, with smooth animated transitions between them. The visualization uses `d3.geo.path` for map rendering and `d3.behavior.zoom` for interactive pan and zoom controls. Data is loaded from CSV files, with a striped pattern mask indicating missing data regions.

RRahulChaitu999

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

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

87% match