Geo (projection fitExtent)

Fit Extent

A dark map of the contiguous United States fits its projected outline precisely within the SVG canvas. The example demonstrates d3-geo 1.2’s `fitSize` feature, which automatically scales and centers the map’s projection to match the given pixel dimensions. The code loads a US GeoJSON file via `d3.json`, filters out Alaska, Hawaii, and outlying areas, then projects the remaining states using `d3.geoConicConformal` with custom parallels, rotation, and center. A single path element is rendered using `d3.geoPath` for the resulting Conic Conformal projection.

75% match

geo_1

This visualization displays a world map with clearly defined country boundaries, using a natural Earth projection to present the full globe with graticules. The map is rendered as SVG through React, with d3.geoNaturalEarth1 and d3.geoPath handling the projection and path generation. Country borders are drawn from the World Atlas TopoJSON dataset, using topojson.feature and topojson.mesh to extract land polygons and interior boundaries. The teal landmasses against a light sphere background create a polished, minimal aesthetic.

HHuldahMerlinKolli

75% match

Stretched Projection

A custom D3 v3 geo projection stretches the equirectangular world map to fill a 960×500 viewport. The code defines a cylindrical projection function using `d3.geo.projection` to scale latitude coordinates proportionally to the viewport’s aspect ratio, then renders land and country borders with `d3.geo.path` and TopoJSON data. SVG paths display the stretched map with gray land and white country boundaries.

75% match

D3 - Maps

A rotating orthographic globe displays world landmasses as stroked vector outlines on a Canvas element. D3’s `d3.geoOrthographic` projection and `d3.geoPath` render both the geographic features and a graticule, with the rotation updated by `projection.rotate` inside a `setInterval` loop. The geographic data comes from a remote TopoJSON-like GeoJSON file, while the animation runs on a 960×800 canvas.

SSubhendu Karmakar

Tetrahedric Gnomonic Projection

This example visualizes the world using a tetrahedric gnomonic projection, a polyhedral map projection that unfolds the globe onto four triangular faces. The map renders landmasses and graticules on a Canvas via `d3.geoPath`, with the projection implemented through a custom `d3.geoTetrahedralLee` function that uses `d3.geoPolyhedral` and per-face gnomonic projections. The code includes a dashed inner triangle and outlined sphere boundary, and loads world data from the World Atlas TopoJSON dataset. It also spins the projection interactively using D3's rotation APIs and renders at devicePixelRatio for sharp output.

PPhilippe Rivière

Rotating Equirectangular

This example displays the world map using an equirectangular projection that continuously rotates horizontally. The visualization is rendered on an HTML5 Canvas element using the D3.js v3 and TopoJSON libraries, with a timer-driven animation. The projection’s rotation angle updates over time based on elapsed milliseconds, clearing and redrawing the filled land polygons each frame. World geometry comes from a remote GeoJSON file of 110-meter resolution, processed with `topojson.feature` and drawn via `d3.geo.path` with Canvas context.

projection debugging

This example visually compares two map projections of the same world dataset by layering them in red and blue on a canvas. Using D3’s `geoTransform` and `geoProjection`, a standard equirectangular projection (blue) is juxtaposed with a custom sheared transform (red) that skews longitude by latitude. The code loads world country boundaries from a local JSON file and renders both outlines overlaid, making differences in shape, rotation, and distortion immediately visible. The canvas drawing highlights how tiny variations in projection logic can produce significant spatial divergence, offering a quick, intuitive way to debug or inspect map projections.

PPhilippe Rivière

Equirectangular (Plate Carrée)

This example demonstrates the equirectangular (Plate Carrée) projection, a simple geographic mapping where latitude and longitude are plotted linearly on a flat grid. The visualization displays world landmasses in dark gray and country boundaries in white, overlaid with a graticule grid at half opacity. The code uses d3.geoEquirectangular to define the projection, d3.geoPath for rendering, and topojson to parse world-50m.json data. The map is drawn as SVG paths with styling for land, boundaries, and graticule layers.