Gist 7db080b8909bfe2d732eeb33909de6ec

Aitoff Graticule

This visualization displays a global graticule—the network of latitude and longitude lines—projected using the Aitoff map projection. The black graticule lines are drawn as SVG paths, with a thicker outline marking the projection’s outer boundary. The code uses the D3.js v3 library, specifically `d3.geo.aitoff()`, `d3.geo.path()`, and `d3.geo.graticule()`, to generate the geographic coordinates and render them as vector graphics.

75% match

Globe Zoom - Animate

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.

AAbhishek Singh

Globe project

This globe visualization, rendered with D3 v4 and Three.js, presents an interactive Earth with countries, graticules, and labeled points of interest. Built from a fork of earthjs’s block, it combines SVG, canvas, and WebGL for smooth rotation and zoom, with hover tooltips for countries and dots. A subtle gradient ocean and interactive land paths highlight geographic features, while CSS transitions provide visual feedback on hover.

EEPBAH

Concentric Circles Emanating

An animated map shows concentric red circles emanating from a glowing dot over the Indian Ocean. A base layer renders graticule lines and world landmasses using `d3.geo.path` with a Mercator projection. The animation repeatedly appends a circle at the projected dot position, then uses `transition()` with linear easing to expand its radius while fading its stroke opacity over six seconds. The repeating action is driven by `setInterval`, while land data comes from a remote TopoJSON file.

Rotating Transverse Mercator

A rotating transverse Mercator projection continuously spins a world map around its central meridian, showing how the projection distorts shapes and areas away from the axis of rotation. The animation uses a dark canvas with white country borders and a semi-transparent graticule, all rendered via `d3.geoPath` and Canvas 2D drawing. Land polygons and country boundaries come from TopoJSON data in the world-atlas package, while a `d3.timer` updates the projection’s rotation each frame. The code specifies `d3.geoTransverseMercator`, `d3.geoGraticule10`, and `topojson.feature` and `topojson.mesh` for data processing.

Floating Landmasses

An orthographic projection of the world appears as a rotating globe, with continents rendered as two concentric spheres to create a floating-landmass effect. Using d3.geo.orthographic and d3.geo.path with canvas, the code layers a blurred, semi-transparent land silhouette behind a crisper foreground, while a graticule grid rotates overhead. The land data comes from a TopoJSON world-110m file, and the animation is driven by d3.timer with changing projection scale and clip angles.

August Projection

This example displays a world map using the August projection, a pseudocylindrical equal-area projection that curves parallels and meridians into distinctive intertwined shapes. The map renders land masses in dark gray with white country boundaries overlaid on a graticule, all enclosed within a spherical outline. Using D3 v3, the code employs `d3.geo.august` for the projection, `d3.geo.path` to draw geographic features, and `d3.geo.graticule` for the grid. TopoJSON data provides the world land and country boundaries, loaded from an external JSON file.

Gist 9bd5ca69fc039cff50383b3a3459858b

This example shows how to render a spatial distribution of data points on a map using D3.js. It uses `d3.geoPath` to draw geographic boundaries and `d3.forceSimulation` to position overlapping points, while Canvas `getImageData` is used to read pixel data for collision detection. The visualization reads from a PGP-encrypted text file, suggesting the underlying dataset is not directly accessible. The code relies on D3’s selection and transition APIs to animate point movements, and it appears to use a projection to convert latitude and longitude coordinates into screen positions. The result is an interactive scatterplot overlaid on a map, with points dynamically adjusting to avoid overlap.

CCliffordAnderson