ChoroplethMap
D3-powered choropleth map for geographic exposure visualization — regional treasury allocation, counterparty country risk, AUM by geography, FX exposure
import { ChoroplethMap } from "@nodus/design-system/finance"Props
| Prop | Type | Default | Description |
|---|---|---|---|
features | ChoroplethFeature[] | — | GeoJSON features (countries / regions). Defaults to major world regions. |
data | Record<string, number> | — | Values keyed by feature id (or dataKey property) |
dataKey | string | — | Feature property to use as lookup key (default: feature.id) |
colorScale | 'seqBlue' | 'seqRed' | 'seqNeutral' | — | Sequential color ramp (default: seqBlue) |
projection | 'mercator' | 'naturalEarth' | — | Map projection (default: naturalEarth) |
width | number | — | SVG width in px (default 640) |
height | number | — | SVG height in px (default 360) |
title | string | — | Accessible chart title |
unit | string | — | Unit suffix for tooltip and legend (default: '%') |
featuresChoroplethFeature[]Default —GeoJSON features (countries / regions). Defaults to major world regions.
dataRecord<string, number>Default —Values keyed by feature id (or dataKey property)
dataKeystringDefault —Feature property to use as lookup key (default: feature.id)
colorScale'seqBlue' | 'seqRed' | 'seqNeutral'Default —Sequential color ramp (default: seqBlue)
projection'mercator' | 'naturalEarth'Default —Map projection (default: naturalEarth)
widthnumberDefault —SVG width in px (default 640)
heightnumberDefault —SVG height in px (default 360)
titlestringDefault —Accessible chart title
unitstringDefault —Unit suffix for tooltip and legend (default: '%')
Choropleth map requires min 360px for region labels to be legible. ViewBox-based sizing scales down; legend repositions automatically.
This component was designed to express:
Explore Related
Currency pair × business unit exposure matrix. Blue = long, red = short, intensity = magnitude. Row/column totals. Click-to-drill support
Two-dimensional scatter plot for correlation and distribution — risk vs. return, exposure vs. limit
D3-powered 2D contour density chart for return distribution — bimodal clusters, alpha factor scatter, risk-return frontiers, option payoff density