New York Centroid Fixed

Azimuthal Equidistant

This example uses D3 version 3 to create an azimuthal equidistant projection centered on New York City. It draws graticule rings at constant distances from that origin using `d3.geo.circle` and projects them with `d3.geo.azimuthalEquidistant`. The map renders world landmasses and country boundaries from a TopoJSON source, presenting the Earth’s surface as a set of concentric distance rings with a white boundary overlay.

Mmbostock

71% match

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.

71% match

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

70% match

Gist a4cce0757b78ab1918ce592718da6a33

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.

69% match

Fixed projection for US States

This example displays a fixed projection of US states using d3.geoAlbersUsa and d3.geoPath, with red circles marking the geographic centroid of each state. It loads avocado sales data from a CSV and merges it with TopoJSON state boundaries using topojson.feature. The visualization renders state shapes as SVG paths, with color-coded regional groupings (Northeast, Midwest, South, West) defined via d3.set filters, though the primary rendering shows all states in green with red centroid markers. The code uses d3.csv, d3.json, and d3.geoCentroid to process and position the data.

Jjons288

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.

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

US Map with County Centroids using D3.js

A US map displays state boundaries in light green with small red circles marking county centroids, computed via `d3.geoPath` and `d3.geoCentroid` from TopoJSON data. The visualization uses D3 v5 and the `geoAlbersUsa` projection, rendering SVG shapes. County population and COVID-19 case data from a CSV file determines circle sizing, though the visible circles have a fixed radius. Zooming is enabled through `d3.zoom`, and the map is drawn from the us-atlas counties-10m.json dataset.

Aacrasto-tibco