Projections

Map projections play an important role when making thematic maps. Projections determine how coordinates and shapes are translated from the sphere to a plane. They also have real implications for how 'correct' your visualization is in the end.

It is important to always consider the data your are trying to show, and the way you are trying to show the data to the user. Choosing a projection is always a tradeoff, and depending on what kind of data you are showing in which way, you may want to choose different projections.

If for example comparing distances to locations from one point, a good choice would be something like the geoAzimuthalEquidistant projection centered around the point of reference.

If you are mapping normalised values on a choropleth, you may want to choose the geoAzimuthalEqualArea or the geoEqualEarth map. That way, the areas of shapes are correctly displayed in relation to each other.

Built-in projections

d3-geo has some very useful projectionis built in, and react-simple-maps uses these projections under the hood. Most projections from d3-geo can be easily accessed via the projection prop of the ComposableMap component. These include:

• geoEqualEarth — Equal Earth projection
• geoAlbers — Albers projection
• geoAlbersUsa — Albers USA composite projection
• geoAzimuthalEqualArea — Azimuthal Equal Area projection
• geoAzimuthalEquidistant — Azimuthal Equidistant projection
• geoOrthographic — Orthographic projection
• geoConicConformal — Conic Conformal projection
• geoConicEqualArea — Conic Equal Area projection
• geoConicEquidistant — Conic Equidistant projection
• geoStereographic — Stereographic projection
• geoMercator — Mercator projection
• geoTransverseMercator — Transverse Mercator projection

Any of the above projections can be easily used and configured in react-simple-maps:

import { ComposableMap } from "react-simple-maps"


// Simply use a projection without any configuration
<ComposableMap projection="geoEqualEarth"></ComposableMap>

// ... or configure an existing projection to fit your needs
<ComposableMap
  projection="geoAzimuthalEqualArea"
  projectionConfig={{
    rotate: [-10.0, -52.0, 0],
    center: [-5, -3],
    scale: 1100,
  }}
></ComposableMap>

Additional projections

There are more projections out there, and you can use them with react-simple-maps. To get started with advanced projections, install d3-geo-projection in your project:

npm i -S d3-geo-projection

Once this is done, you can create custom projections like this Winkel tripel projection:

import { geoWinkel3 } from "d3-geo-projection"

const width = 800
const height = 600

const projection = geoWinkel3()
  .translate([width / 2, height / 2])
  .scale(150)

const MapChart = () => {
  return (
    <ComposableMap width={width} height={height} projection={projection}>
      <Graticule stroke="#999" />
      <Sphere stroke="#06F" strokeWidth={2} />
    </ComposableMap>
  )
}

You can also make really interesting maps using something like the Waterman Butterfly projection:

import { geoPolyhedralWaterman } from "d3-geo-projection"

const width = 800
const height = 600

const projection = geoPolyhedralWaterman()
  .translate([width / 2, height / 2])
  .scale(98)

const MapChart = () => {
  return (
    <ComposableMap width={width} height={height} projection={projection}>
      <Graticule stroke="#999" clipPath="url(#rsm-sphere)" />
      <Sphere stroke="#06F" strokeWidth={2} />
    </ComposableMap>
  )
}

Projections can be confusing at times, but they can also be a way to make your maps more interesting, and more accurate.