The Choropleth component displays divided geographical areas shadedin relation to some data variable. It's build on top of primitivesfrom theGeoMap component.
Using this component requires some knowledge about thed3-geolibrary, projections, geoJSON… please have a look at theofficial d3 documentationfor further information.
Like forGeoMap, you must pass an array of featureswhich determine the geometries to render on the map, then you passan array of data which, each datum is merged with its correspondingfeature using thematch property, the value is picked accordingto thevalue accessor.
Please note that because the features file is pretty huge,it's not includedin the generated code, you can find the file used for this examplehere,you'll have to pass thefeatures array to thefeatures property.
The responsive alternative of this component isResponsiveChoropleth.This component also have a canvas implementations,ChoroplethCanvas, which should be usedwhen you have complex geometries as it offers better performance.
Chart width.
Chart height.
'Depends on device'Adjust pixel ratio, useful for HiDPI screens.
Chart margin.
'id'Label accessor.
'value'Value accessor.
'value'Value formatter.
Defines uppper and lower bounds of color shading
'mercator'Defines the projection to use.
100Projection scale.
0.5,0.5][0.5,0.5]Projection x/y translation.
0,0,0][0,0,0]Projection rotation.
Define style for common elements such as labels, axes…
0Control border width.
'#000000'#152538Method to compute border color.
Define patterns and gradients.
Define rules to apply patterns and gradients
'nivo'Defines color range.
'nivo'#666666Defines the color to use for features without value.
falseEnable meridians and parallels, useful for showing projection distortion.
0.5Control meridians and parallel lines width.
'#999999'#ddddddControl meridians and parallel lines color.
trueEnable/disable interactivity.
onClick handler, it receives clicked node data and style plus mouse event.
Custom tooltip component.
Showcase custom tooltip.
'graticule','features']Defines the order of layers.
Optional chart's legends.
Defines legend anchor relative to chart's viewport.
Legend direction, must be one of 'column', 'row'.
Justify symbol and label.
Legend block x translation.
Legend block y translation.
Legend item width.
Legend item height.
Spacing between each item.
Item symbol size.
Item layout direction.