d3-geo-hemispheres

A map projection compatible with d3-geo for drawing a vertical world map.

Installing

If you use NPM, npm install d3-geo-hemispheres.

import { geoHemispheres } from "d3-geo-hemispheres";

const projection = geoHemispheres();

Try d3-geo-hemispheres in your browser.

API Reference

The projection works like a d3-geo projection with exceptions noted below.

# d3.geoHemispheres([raw]) · Source

The stacked hemispheres projection with overlap of 0.15 and rotate of [110, 0, 0].

You can pass a symmetrical raw projection, such as d3.geoAzimuthalEqualAreaRaw, d3.geoAzimuthalEquidistantRaw, d3.geoOrthographicRaw, d3.geoStereographicRaw or d3.geoCrasterRaw.

# hemispheres.overlap([overlap])

If overlap is specified, sets the share of the top hemisphere that is covered by the bottom hemisphere. An overlap of 0 means the two hemispheres do not overlap, while an overlap of 1 means the bottom hemisphere covers the top. If overlap is not specified, returns the current overlap, which defaults to 0.15.

# hemispheres.width([width])

If width is specified, sets the width of the map. If width is not specified, returns the current width, which defaults to 100.

You should calculate the height with:

const height = projection.width() * (2 - projection.overlap());

Credits

Thank you to Niko Kommenda for introducing me to this idea and to Philippe Rivière for implementing the projection in D3.