Aaron Wong

@aaronwng·4 public vizzes

Fork of Monoliths on a Globe

A fork of "Monoliths on a Globe" plots red, semi-transparent circles scaled by population for Utah, Romania, and California on a spinning orthographic globe. The D3 v4 and topojson code renders world country boundaries at varying resolutions, using SVG paths and projected point coordinates, while a black tooltip displays name and population on hover. Dragging rotates the globe via `d3.drag()`, toggling between lower- and higher-resolution boundary data.

May 29, 2024

Loading thumbnail…

Fork of Spinning Globe

This example shows a spinning orthographic globe with country boundaries and a graticule grid, rotating smoothly around its vertical axis with a fixed tilt. The animation updates the globe’s rotation state on each frame using `requestAnimationFrame`, and the map is rendered with `d3.geoOrthographic` and `d3.geoPath`. Country shapes come from TopoJSON data fetched from a world atlas, while a sphere outline and graticule are drawn using `d3.geoGraticule`. The code demonstrates incremental rotation updates and cleanup of animation frames.

May 28, 2024

Loading thumbnail…

Fork of Monoliths on a Globe

This example shows the locations of three reported monolith appearances in Utah, Romania, and California as stationary steel-blue circles on an interactive orthographic globe. The visualization uses d3.geoOrthographic for projection and d3.geoPath to render country boundaries from TopoJSON data, swapping between 110m and 50m resolution during drag and zoom interactions. Circles are positioned via the projection of city coordinates from a CSV file, with d3.drag and d3.zoom enabling rotation and scaling, while d3-tip provides hover labels. The globe rotates as users drag, and zoom adjusts scale via d3.event.transform.k. Hovering over a circle displays the location name through the d3-tip tooltip.

May 28, 2024

Loading thumbnail…

Fork of Submarine Cables Globe

A fork of the Submarine Cables Globe displays a draggable, zoomable orthographic projection of Earth, with submarine cable paths overlaid on country outlines. Users rotate the globe by dragging and zoom with the mouse wheel, adjusting the projection’s rotation and scale. It fetches world atlas data as TopoJSON and cable data as GeoJSON, rendering them via `d3.geoPath` and `geoOrthographic`. The code uses D3’s `drag`, `zoom`, and `geoGraticule` APIs, with data sourced from TeleGeography’s older GitHub repository.

May 28, 2024