winding problem

Winding Order

Two polygon rings, one clockwise and one counterclockwise, demonstrate how winding order affects map projections in d3. Each ring is rendered twice: once with an orthographic projection using d3.geoPath and d3.geoOrthographic, and once with an identity projection, showing arrow markers along the ring path indicating direction. The text labels list the ring coordinates and computed area via d3.geoArea for the orthographic view, and the identity projection's path.area for the second.

Mmbostock

71% match

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.

GeoJSON Contours Test

This example tests the rendering of contour lines stored as GeoJSON MultiPolygon features, with each feature carrying a numeric value property. The visualization displays these contours as filled regions across a geographic area, creating a layered map that resembles a topographic or density surface. The code uses D3’s `geoPath` to project and draw the GeoJSON geometry onto an SVG canvas, with the contour values determining the visual appearance of each region. The data comes from a gist by curran, showcasing how pre-generated contour polygons can be directly translated into a map visualization.

CCurran Kelleher

Polylabel with D3

This visualization compares two methods for labeling countries on a world map: centroids and polylabels. Small orange dots mark each country’s spherical centroid, while white dots show the polylabel (the point farthest from any polygon edge) of its largest projected polygon, with green lines connecting the two. The map uses a Robinson projection and renders country shapes from TopoJSON data via d3.geoPath, while the polylabel algorithm from Mapbox computes the label positions on the projected coordinates.

Let's make a map with D3.js!

This visualization presents a map of geographic regions, with each area rendered as a solid green path outlined in black. The map is drawn using SVG paths generated from GeoJSON data, which is loaded from an external URL. The code employs D3.js version 5 functions such as `d3.json` to fetch the data and `d3.geoPath` to construct the path geometries, while the TopoJSON library's `feature` function is used to process the geographic features. The resulting paths are appended to the SVG canvas with a fixed width and height, and CSS styles define the fill and stroke colors.

Cchaimmaeee

Let's make a map with D3.js!

This example demonstrates how to build a map visualization using D3.js, displaying geographic features as green polygons with black outlines on a blue background. It loads GeoJSON data from a remote URL and renders it as SVG paths using the `geoPath` generator with the `geoAiryRaw` projection from d3-geo-projection. The code relies on `d3.json` for data loading and topojson’s `feature` conversion, with all styling defined in external CSS.

Cchaimmaeee

67% match

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.

67% match

geoVoronoi triangles()

This example visualizes a spherical Voronoi triangulation of 100 random points, with each triangle filled by a random hue and the original sites marked as white dots. The orthographic projection rotates continuously to reveal the globe’s surface. Built with d3-geo-voronoi and d3-delaunay, it uses d3.geoPath and d3.geoOrthographic to render SVG paths, while d3.interval drives the animation by updating the projection’s rotation every 50 milliseconds. The points are generated as a GeoJSON FeatureCollection with coordinates spanning longitude 0–360 and latitude from -90 to 90.