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
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
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
you'll have to pass the
features array to the
The responsive alternative of this component is
This component also have a canvas implementations,
ChoroplethCanvas, which should be used
when you have complex geometries as it offers better performance.
'Depends on device'
Adjust pixel ratio, useful for HiDPI screens.
Defines uppper and lower bounds of color shading
Defines the projection to use.
Projection x/y translation.
Define style for common elements such as labels, axes…
Control border width.
Method to compute border color.
Define patterns and gradients.
Define rules to apply patterns and gradients
Defines color range.
Defines the color to use for features without value.
Enable meridians and parallels, useful for showing projection distortion.
Control meridians and parallel lines width.
Control meridians and parallel lines color.
onClick handler, it receives clicked node data and style plus mouse event.
Custom tooltip component.
Showcase custom tooltip.
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.