Gist a4cce0757b78ab1918ce592718da6a33

100%

Gist a4cce0757b78ab1918ce592718da6a33

✓ Published0🌍 Public

Last edited Feb 25, 2017

Created on Feb 25, 2017

This example visualizes the centroid of Antarctica, showing how it is calculated and where it falls on a map. It uses D3’s `d3.geoCircle` and `d3.geoCentroid` to compute the centroid of a circular polygon centered on the South Pole, then loads an Antarctic GeoJSON file to find the continent’s actual centroid. The map is rendered as SVG using `d3.geoPath` with an azimuthal equal-area projection, including a graticule, to display the result.

AI-generated description

Similar vizzes

Loading thumbnail…

Antarctica’s centroid

This example computes the geographic centroid of Antarctica using the `d3.geoCentroid` method on a GeoJSON MultiPolygon loaded from a local file. It then renders the continent with an azimuthal equal-area projection via `d3.geoAzimuthalEqualArea`, drawing the polygon and a graticule using `d3.geoPath`. The SVG output displays the resulting center of mass and the map, demonstrating how D3 handles projected spherical geometry. The notebook uses a Node.js environment with the `d3` module.

PPhilippe Rivière

90% match

Loading thumbnail…

Antarctica’s Centroid explained

The visualization uses the D3.js library (v4) with an orthographic projection to display a map of Antarctica. It contrasts the correct spherical centroid, computed via `d3.geoCentroid`, shown as an orange dot, with the naïve planar centroid from the `d3.geoPath` centroid method, shown as a black dot. Both are projected onto the SVG using the `d3.geoOrthographic` projection, highlighting the inaccuracy of planar calculations for polar regions. The underlying GeoJSON data defines Antarctica’s multipolygon, and the graticule is added using `d3.geoGraticule`.

PPhilippe Rivière

89% match

Loading thumbnail…

Tetrahedral Gnomonic projection Antarctic

This example visualizes the world map using the Tetrahedral Gnomonic projection, an Antarctic-centered aspect of Potter’s 1925 map projection. The globe is split across four triangular faces, each rendered with a gnomonic projection via `d3.geoPolyhedral` and `d3.geoGnomonic`. Landmasses are drawn on a Canvas with `d3.geoPath`, overlaid with graticules, and the map is interactive, allowing rotation through drag gestures using the `versor` library. Map data comes from TopoJSON world-atlas countries.

PPhilippe Rivière

75% match

Loading thumbnail…

geoCircle in d3.v4

This example visualizes concentric geo-circles radiating from two fixed points on a world map: the North Pole and Washington, D.C. It uses `d3.geoCircle()` to generate spherical circles at increasing radii, with `d3.geoPath()` and an equirectangular projection to render them as SVG paths. The code draws the circles in red and blue before overlaying landmasses from TopoJSON. It demonstrates how d3.v4’s geographic circle generator computes geodesic rings, with radii ranging from 5 to 85 degrees. The map is rendered at 960×500 pixels using D3’s `d3.geoEquirectangular` projection.

PPhilippe Rivière

74% match

Loading thumbnail…

geoCircle in d3.v4 (geoOrthographic)

This example visualizes concentric circles radiating from two geographic points—the North Pole and Washington, DC—using a d3.geoOrthographic projection. The circles, generated with d3.geoCircle, are drawn as SVG paths via d3.geoPath, with radii incrementing from 5 to 85 degrees. The map includes land masses rendered from TopoJSON world data, styled with fills and strokes. The code loads d3.v4 and topojson.v1 from CDNs, and the interaction between the circle generator and projection demonstrates how to create geodesic rings on a globe-like view.

PPhilippe Rivière

72% match

Loading thumbnail…

Country Centroids on a Map

This example plots the centroids of countries on an equirectangular world map using D3 v3, rendering each centroid as a translucent pink circle. The map displays graticules, land masses, and country boundaries, with centroids computed via `d3.geo.path().centroid()` on TopoJSON features from a world-50m dataset. Users can pan and zoom the entire visualization through `d3.behavior.zoom`. The code also includes an unused CSV file of invitation chains, though the map itself only visualizes geographic centroids.

CCurran Kelleher

70% match

Loading thumbnail…

Polar Azimuthal Equal-area

This example visualizes the Earth using the polar azimuthal equal-area projection, with landmasses in black and country boundaries in white against a graticule. The map is centered on the North Pole and rendered as an SVG, with a sphere outline and fill. The code uses `d3.geo.azimuthalEqualArea()` for the projection and `d3.geo.path()` to draw features from a TopoJSON world dataset loaded via `d3.json`.

Mmbostock

70% match

Loading thumbnail…

melting-antarctica

A world map rendered in a Mollweide projection is drawn on an HTML canvas using D3's `d3.geoMollweide` and `d3.geoPath`. The map's pixel data is extracted via Canvas `getImageData`, and each pixel's color is iteratively shifted inward toward the center based on its radial distance, creating a melting effect where landmasses appear to collapse into the pole. The animation runs with `d3.interval`, processing pixels sorted by radius to simulate a gradual dissolution.

11wheel

70% match