Fork of Globe Zoom - Animate

100%

Fork of Globe Zoom - Animate

✓ Published0🌍 Public

Last edited Apr 12, 2023

Created on Apr 12, 2023

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`.

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…

Fork of Globe Zoom - Animate

This visualization presents global nuclear explosion sites as points on a zoomable, animatable globe, transitioning between map projections. The view alternates between an orthographic globe and a Mercator projection using clickable menu buttons. Built with D3 v3 and React, it leverages `d3.geo.orthographic`, `d3.geo.mercator`, and `d3.geo.path` for rendering, while TopoJSON supplies world landmasses and borders. Nuclear test data from a CSV file is plotted as selectable, tooltip-enabled circles.

PPiotr Paszek

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

Fork of Globe Zoom - Animate

This example visualizes global nuclear explosion locations on a geo-scatterplot with interactive globe projections. The visualization uses an animated globe that users can rotate and zoom between map projections, with points representing nuclear data positioned via d3.geoMercator projection. Built with D3 v3 and React, the code employs d3.geo.orthographic for globe rendering, d3.geo.zoom for transitions, and reads nuclear explosion data from a CSV file. The visualization also features graticules, land polygons from TopoJSON world atlas data, and tooltips via d3.tip.

DDonggov

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

91% match

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 example visualizes nuclear explosion locations on a world map using a Mercator projection, with each explosion represented as a small circle and country boundaries drawn as lines. It uses React to manage component state and rendering, while D3 v3 APIs such as `d3.geoPath`, `d3.geoMercator`, and `d3.geoGraticule` generate the map geometry from TopoJSON world-atlas data. The nuclear explosion coordinates and names are loaded from a CSV file, and the visualization appears as static SVG elements without any animation.

SSnapika

89% match

Loading thumbnail…

Fork of Globe Zoom - Animate

This visualization displays global nuclear explosion locations as points on a Mercator-projected world map, with landmasses, graticules, and country borders rendered as SVG paths. The code uses `d3.geoMercator`, `d3.geoPath`, and `d3.geoGraticule` to project and draw geographic features, while circles mark each nuclear event with coordinates and names loaded from a CSV file. Built with React and D3 v3, it incorporates a zoom-and-pan interaction for exploring the interactive globe.

LLauren

89% match

Loading thumbnail…

Fork of Globe Zoom - Animate

A reactor site map with land and country borders projects nuclear explosion locations on a global Mercator map using d3.geoMercator and d3.geoPath. Circles mark each explosion’s latitude and longitude, with tooltips showing the site name and coordinates. Land polygons come from TopoJSON world-atlas data, while explosion records load from a CSV; the map dynamically updates as projection parameters change, with graticules and an interactive hover effect on countries.

CCH SAMPATH

89% match