Globe Zoom - Animate

100%

Globe Zoom - Animate

✓ Published6🌍 Public

Last edited Feb 12, 2022

Created on Feb 12, 2022

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.

AI-generated description

Popular / AboutChristopher Pietsch’s Block http://bl.ocks.org/cpietsch/9b8254b1608e2fc6de58dc561d77e81f/dead294663def98f00f8cc4d3df024a0f26a9257 Geo Scatterplot Transitions

Open This is a design experiment for project project tomorrow. I used it as an proof of concept to grasp the usability for intermodal projections of global data.

The sweet spots of the code are from Jason Davis Dorling World and Mike Bostocks Shape Tweening. Open the block in a sperate window for all of its functionality.

MIT Licensed

Similar vizzes

Loading thumbnail…

Globe Zoom - Animate

A world map in a Mercator projection displays nuclear explosion sites as small circles, with each point showing the location's name, latitude, and longitude in a tooltip. The visualization uses D3 v3 with geo projections, SVG paths for land and graticules, and React to render the map and data loading. The underlying data comes from a CSV of nuclear explosions and a world-atlas TopoJSON file.

Aaishwarya8615

93% match

Loading thumbnail…

Globe Zoom - Animate

This visualization presents global nuclear explosion data as a scatterplot over a Mercator-projected world map using SVG. The map shows land masses in brown and country borders, while each nuclear event appears as a circle with a tooltip displaying its name and coordinates. Built with D3 v3 and React, it uses `d3.geoMercator` and `d3.geoPath` for rendering, loading map topology from world-atlas and CSV data from a GitHub gist. The visualization supports interactive zoom and rotation through additional geo-projection scripts, with color palettes and legends enhancing the display.

Mmkt-ds

91% match

Loading thumbnail…

Globe Zoom - Animate

This visualization combines a world map with a scatterplot of nuclear explosion locations, rendered using D3.js v3 with SVG. The map displays land masses, graticules, and country interiors, while points mark each nuclear event's latitude and longitude. The visualization uses a Mercator projection via `d3.geoMercator()` and `d3.geoPath`, with data loaded from TopoJSON for the map and CSV for nuclear explosion records. The React-based frontend manages data fetching through custom hooks, supporting interactive exploration of global nuclear testing patterns.

Nnouralkhoury

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

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

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

89% match

Loading thumbnail…

Fork of Globe Zoom - Animate

This visualization displays a globe with nuclear explosion locations plotted as points on a land-mass map. The D3.js geoMercator projection renders geographic features, while graticules and interiors show grid lines and country boundaries. Data from a CSV file of nuclear explosions is mapped through longitude and latitude coordinates, with tooltips revealing location names. The visualization uses d3.geoPath, d3.geoMercator, and d3.geoGraticule for map rendering, with topojson providing world atlas geometry. Interactive elements include hover effects on land masses and color-coded points, demonstrating animated transitions between different global datasets.

RRichard Wong

89% match