v3.0.0
gzip size
Github

Documentation

Getting started
Map files
Projections
Styling



Advanced

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:

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>

jsx

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

bash

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>
  )
}

jsx

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>
  )
}

jsx

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

Newsletter

Sign up to the React Simple Maps newsletter and be the first one to know when we publish new stuff.

Contact us

React Simple Maps was created by z creative labs. We turn ideas into digital products and specialise in dataviz and data-driven design. Are you looking for someone to create custom mapcharts and data visualisations?

Get in touch

React Simple Maps