synthetic
GeoChart
A shaded grid of regions you place yourself: a choropleth without map data.
Interviews by harbour areaDarker means more interviews; hover a cell for the figure
In context
Research summaryThe map beside the headline numbers
Crew interviews12 calls, 6 to 20 Oct
Most heard from
Ferry terminal
4 of 12 interviews
Props
| Prop | Type | Required | Default |
|---|---|---|---|
regions | GeoChartRegion[] | Yes | — |
layout | GeoChartLayoutEntry[] | undefined | No | — |
title | string | undefined | No | — |
ariaLabel | string | undefined | No | — |
cellSize | number | undefined | No | 48 |
colorScale | ((normalizedValue: number) => string) | undefined | No | (normalizedValue: number): string => { const t = Math.max(0, Math.min(1, normalizedValue)); const percent = Math.round(8 + t * 92); // 8% (near-white) through 100% (the true max value) return `color-mix(in srgb, var(--rebar-color-primary, #0066cc) ${percent}%, transparent)`; } |
data-rebar-* attributes
data-rebar-component="geo-chart" on the root <figure>.
Migrating to Ant Design
Not codemod-covered — AntD ships no chart components of its own; a real geographic choropleth typically migrates to a dedicated mapping library (e.g. @ant-design/charts' geo chart, built on real GeoJSON) rather than an antd component, since this component's own abstraction wouldn't carry over as-is.