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.

This component also have a canvas implementations, ChoroplethCanvas, which should be used when you have complex geometries as it offers better performance.

roll the dice
Actions Logs
Start interacting with the chart to log actions
Dimensions
Projection
Style
Graticule
Interactivity
Base
Customization
Legends