# XWUIChartChoroplethMap

A choropleth map that shades geographic regions by a data value so spatial patterns
and regional highs and lows stand out. Two render paths:

- **Real geography** - pass `data.regions` as `{ code, value, label? }[]` using ISO
  3166-1 alpha-2 country codes (`"US"`, `"JP"`, `"BR"`, ...). Codes are resolved
  against 173 countries' real Natural Earth border geometry bundled with xwui
  (`chart/_geo/worldCountries.geo.ts`) and rendered on a live Leaflet map via
  `XWUIMap` - no GeoJSON authoring required. Regions outside a hand-drawn feature
  you already have also work: pass `{ feature, value, label }[]` or a raw GeoJSON
  `FeatureCollection` instead of codes.
- **Abstract chart** - when `data.regions` is absent, `series` of `{ x, y }` data
  renders through the same fixed-type `XWUIChart` wrapper as the other chart blocks
  (legacy path, unchanged).

Pass a `block` preset (1-4) and `size` (`sm` / `md` / `lg`); the shared block config
also exposes legend, grid, axis, data-label, and tooltip-formatter toggles. `config.geo`
(`ramp`, `center`, `zoom`, `mapTheme`, `fitBounds`) controls the real-map renderer.

## Basic Usage

Two monthly `{ x, y }` series (Series A and Series B, Jan-Jun) fed to the choropleth
map renderer as region values at the md size preset.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Two {x, y} series mapped to region shading through the choropleth type.
```

## Unemployment by State

Eight US states shaded by their unemployment rate, with values rendered as percentages and labelled per state.

```example
file: examples/Unemployment.ts
html: examples/Unemployment.html
title: Unemployment by State
description: Eight states shaded by unemployment percentage with grid values, x-axis labels, and interactive hover.
```

## Internet Penetration

Eight countries shaded by the share of their population online, contrasting saturated and
still-connecting markets - rendered on the real-geography path via `{ code, value }` regions
resolved against the bundled country borders.

```example
file: examples/InternetPenetration.ts
html: examples/InternetPenetration.html
title: Internet Penetration
description: Eight countries shaded by percent of population online on the real Natural Earth map.
```

## Renewable Electricity Share

28 countries spanning every inhabited continent, shaded by the share of electricity
generation from renewables - exercises the bundled world geometry at full scale rather
than a handful of picks.

```example
file: examples/RenewableShare.ts
html: examples/RenewableShare.html
title: Renewable Electricity Share
description: 28 countries across every continent shaded by renewable electricity share.
```

```api
```