# 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>
```

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.