A conformal Airocean

100%

A conformal Airocean

✓ Published0🌍 Public

Last edited Mar 28, 2021

Created on Mar 28, 2021

This example shows a conformal projection of the Airocean, a map of the world’s oceans as a single continuous water body, rendered as an SVG using D3.js v6. It displays landmasses as dark shapes on a blank background, with the projection carefully clipped and rotated to highlight the ocean-centric view. The code defines a custom forward projection function that adjusts coordinates to stitch together multiple copies of a base tetrahedral Lee projection, then uses `d3.geoProjection` with `d3.geoClipPolygon` to clip the sphere and `d3.geoPath` to draw the land. Land data comes from a GeoJSON file served via unpkg, and the final fit is applied with `fitExtent` to fill a 960×500 viewport.

AI-generated description

A stand-alone version of https://observablehq.com/@fil/a-conformal-airocean

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

Aitoff

This example displays a world map using the Aitoff projection, a compromise projection that represents the entire globe in an ellipse. The map shows landmasses in dark gray and country boundaries as white lines over a graticule of latitude and longitude lines. Built with D3 v3 and the `d3.geo.aitoff` projection from the geo.projection plugin, it uses `d3.geo.path` to render the sphere, graticule, and land features. The world data is loaded as TopoJSON from a remote gist and processed with `topojson.feature` and `topojson.mesh`.

Mmbostock

75% match

Loading thumbnail…

Floating Landmasses

An orthographic projection of the world appears as a rotating globe, with continents rendered as two concentric spheres to create a floating-landmass effect. Using d3.geo.orthographic and d3.geo.path with canvas, the code layers a blurred, semi-transparent land silhouette behind a crisper foreground, while a graticule grid rotates overhead. The land data comes from a TopoJSON world-110m file, and the animation is driven by d3.timer with changing projection scale and clip angles.

Mmbostock

74% match

Loading thumbnail…

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

74% match

Loading thumbnail…

Lee’s Tetrahedral Conformal Projection

This example visualizes the world using Lee’s Tetrahedral Conformal Projection, a map projection that maps the globe onto the faces of a tetrahedron. The view is rendered on a Canvas and combines an orthographic projection with a polyhedral face projection for interactive inertia. The code employs `d3.geoPolyhedral`, `d3.geoProjection`, and `d3.geoStream` from D3 libraries, along with `d3-inertia` and `versor` for rotation, and `d3-geo-polygon` for polyhedral geometry. Data is drawn from TopoJSON, with the projection formula implemented via complex numbers.

PPhilippe Rivière

73% match

Loading thumbnail…

Lee’s Tetrahedral Conformal Projection, South

This example demonstrates Lee’s tetrahedral conformal projection on the southern hemisphere, rendered on a canvas using a custom D3 geospatial projection. The code defines the projection mathematically with complex numbers via `Complex.js`, and applies it to a polyhedral mapping of the globe using `d3.geoPolyhedral` and `d3.geoPath`. It draws graticules and landmasses from TopoJSON data, with the canvas scaled for retina displays. The visualization highlights the conformal property by distributing distortion across the tetrahedron’s faces.

PPhilippe Rivière

73% match

Loading thumbnail…

Let's make a face with D3.js!

This example displays a static world map with countries filled in tan against a deep blue ocean, rendered inside an SVG canvas. It uses D3.js version 5.9.2 with the topojson library to convert the world-atlas country boundaries into map features. The projection, d3.geoNaturalEarth1, and the path generator, d3.geoPath, define the map’s shape, while the countries’ geographic data comes from the online world-atlas JSON dataset. The visualization also draws a background sphere for the ocean using a simple path generator call.

AAnthony-coding

73% match

Loading thumbnail…

Dodecahedral projection

This example displays a dodecahedral projection of the world map, unfolding the globe onto the faces of a dodecahedron using a myriahedral projection. The map, sourced from the VisionsCarto world atlas, is rendered as SVG with country boundaries and a graticule. The code computes the Voronoi faces on the sphere using `d3.geoVoronoi`, builds a spanning tree of the faces with Kruskal’s algorithm, and projects each face using a gnomonic projection via `d3.geoGnomonic`. The polyhedral arrangement and clipping are handled by `d3.geoPolyhedral` and `d3.geoPath`.

PPhilippe Rivière

72% match

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js, displaying countries as light green shapes with faint black outlines on an SVG canvas. The map uses a conic conformal projection defined through D3's `geoConicConformal` and `geoPath` APIs. It loads geographic boundary data from the world-atlas TopoJSON source, processes it with the `topojson` library’s `feature` function, and renders each country as an SVG path. The visualization also generates a background path, with a commented-out sphere class suggesting an optional ocean fill.

NNilla

72% match