format Arctic sea ice Polygon data

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.

61% match

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

Gist 1a7ae0708d7a8ee9e113f13654d39a4e

This example visualizes a single geographic polygon representing an outline near Denver, Colorado, derived from a GeoJSON FeatureCollection. It shows the shape’s boundary as a closed loop, with coordinates defining a series of vertices that trace an irregular, elongated region. The rendering relies on a mapping library that processes GeoJSON data, likely using `d3.geoPath` to project the polygon onto a canvas or SVG, while the precise coordinate pairs (longitude and latitude) suggest the use of a geographic projection. The source gist provides the raw GeoJSON, and the visualization emphasizes the polygon’s spatial extent without additional layers or interaction.

WWill Carter

Simplifying and cleaning Shapefiles.

This example demonstrates how to simplify and clean geographic data by rounding coordinates within a TopoJSON file. It uses D3’s `d3.round` function to reduce each point’s precision to two decimal places, then outputs the cleaned result as a JSON string. The code maps over the nested structure of polygons, line strings, and points, applying the rounding operation at each coordinate level. The visualization gallery shows the transformed data as plain text, highlighting the coordinate simplification process. The source is a GeoJSON-derived TopoJSON file, processed entirely in the browser with D3 v3.

Mmbostock

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.

winding problem

This visualization highlights the winding problem in GeoJSON polygons by coloring affected areas yellow, while correctly oriented polygons appear light blue. It uses d3.json to load Istanbul district boundaries and d3.geoPath with a Mercator projection to render them as SVG paths. The code checks each feature with d3.geoArea, reversing coordinate arrays for polygons exceeding 2π area, marking those features with an error property. The map shows these inverse-wound regions clearly, demonstrating how D3’s geo algorithms handle polygon orientation.

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.

Clean Up for Natural Earth GeoJSON

This example presents a command-line Node.js script for cleaning Natural Earth GeoJSON data. It reads a GeoJSON collection from standard input and outputs a simplified version, retaining only the `name` property and an `id` derived from either the `ISO_A3` or `FIPS` code. The script uses `JSON.parse` and `JSON.stringify` for data processing, and it rounds all coordinate values to six decimal places via a custom `round` function applied to `Polygon`, `MultiPolygon`, and `LineString` geometries. The process logs warnings for invalid country codes.

Mmbostock