Choropleth

@nivo/geomap

The Choropleth component displays divided geographical areas shaded in relation to some data variable. It's build on top of primitives from the GeoMap component.

Using this component requires some knowledge about the d3-geo library, projections, geoJSON… please have a look at the official d3 documentation for further information.

Like for GeoMap, you must pass an array of features which determine the geometries to render on the map, then you pass an array of data which, each datum is merged with its corresponding feature using the match property, the value is picked according to the value accessor.

Please note that because the features file is pretty huge, it's not included in the generated code, you can find the file used for this example here, you'll have to pass the features array to the features property.

The responsive alternative of this component is ResponsiveChoropleth. This component also have a canvas implementations, ChoroplethCanvas, which should be used when you have complex geometries as it offers better performance.

Actions Logs
Start interacting with the chart to log actions
Base
numberrequired

Chart width.

numberrequired

Chart height.

numberoptionaldefault:'Depends on device'

Adjust pixel ratio, useful for HiDPI screens.

supportsvgcanvas
objectoptional
px
px
px
px

Chart margin.

string | Functionoptionaldefault:'id'

Label accessor.

string | Functionoptionaldefault:'value'

Value accessor.

string | Functionoptionaldefault:'value'

Value formatter.

number[]required

Defines uppper and lower bounds of color shading

Projection
stringoptionaldefault:'mercator'
mercator

Defines the projection to use.

numberoptionaldefault:100

Projection scale.

[number, number]optionaldefault:[0.5, 0.5]
value[0.5, 0.5]
px
px

Projection x/y translation.

[number, number, number]optionaldefault:[0, 0, 0]
value[0, 0, 0]

Projection rotation.

Style
Themeoptional

Define style for common elements such as labels, axes…

numberoptionaldefault:0
px

Control border width.

string | object | Functionoptionaldefault:'#000000'
inheritthemecustom
#152538

Method to compute border color.

object[]optional

Define patterns and gradients.

supportsvgcanvas
object[]optional

Define rules to apply patterns and gradients

supportsvgcanvas
string | Function | string[]optionaldefault:'nivo'
Categorical: Nivo

Defines color range.

stringoptionaldefault:'nivo'
   #666666

Defines the color to use for features without value.

Graticule
booleanoptionaldefault:false
   

Enable meridians and parallels, useful for showing projection distortion.

numberoptionaldefault:0.5
px

Control meridians and parallel lines width.

stringoptionaldefault:'#999999'
   #dddddd

Control meridians and parallel lines color.

Interactivity
booleanoptionaldefault:true
   

Enable/disable interactivity.

Functionoptional

onClick handler, it receives clicked node data and style plus mouse event.

Functionoptional

Custom tooltip component.

booleanoptional
   

Showcase custom tooltip.

Customization
Array<'graticule' | 'features' | Function>optionaldefault:['graticule', 'features']

Defines the order of layers.

Legends
{Array<object>}optional

Optional chart's legends.

add legend
legends[0]remove
stringoptional
bottom-left

Defines legend anchor relative to chart's viewport.

'column' | 'row'optional

Legend direction, must be one of 'column', 'row'.

booleanoptional
   

Justify symbol and label.

numberoptional
px

Legend block x translation.

numberoptional
px

Legend block y translation.

numberrequired
px

Legend item width.

numberrequired
px

Legend item height.

numberoptional
px

Spacing between each item.

numberoptional
px

Item symbol size.

stringoptional
left-to-right

Item layout direction.