WorldChoropleth
ChartsShaded world map — colour ramp driven by a numeric value per country.
Country-shaded world map. Pass one datum per country (by ISO 3166-1 alpha-3 or UN M49 numeric ID) and a numeric value — every polygon is tinted along a Slate-Core → Neo-Green ramp by default. Built-in hover tooltip and HUD legend.
Import
import { WorldChoropleth } from "nosible-ux"Examples
GDP by country (USD trillions)
GDP
0.3827.36
Custom ramp + explicit domain
Emissions
012
Accessibility
aria-label is forwarded to the SVG role="img" wrapper — prefer a one-sentence summary (metric + unit + dataset). The tooltip is keyboard-inert; include the full dataset in an accompanying table for screen-reader users.
Props
| Name | Type | Default | Description |
|---|---|---|---|
aria-label | string | undefined | — | Accessible label forwarded to the `role="img"` wrapper. |
data | ChoroplethDatum[] | — | One datum per country. Countries with no datum use the default fill. |
domain | [number, number] | undefined | — | Optional explicit `[min, max]` domain. Default: derived from data. |
height | number | undefined | — | Viewport height in px. Default: `450`. |
legendTitle | string | undefined | — | Legend title. Default: `"VALUE"`. |
projection | WorldProjectionKind | undefined | — | Projection family. Default: `"equalEarth"`. |
ramp | string[] | undefined | — | Interpolated colour ramp (min → max). Default: Slate Core → Neo Green. |
unit | string | undefined | — | Unit appended to tooltip value, e.g. `"%"`. |
width | number | undefined | — | Viewport width in px. Default: `800`. |
withLegend | boolean | undefined | — | Render the built-in HUD legend. Default: `true`. |