Fork of Globe Zoom - ICE_5

100%

Fork of Globe Zoom - ICE_5

✓ Published0🌍 Public

Last edited Jun 21, 2022

Created on Jun 21, 2022

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.

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

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

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

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

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

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

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

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

85% match