Geo map
Where: a world choropleth in one sequential hue, bubbles on places, country names in the reader's language — plain SVG, the world loaded on demand.
Web only — React, from @krizaka/charts/geo. Beta: its API may still change in a minor version.
When to use
- An audience by country: a creator's viewers, a service's users.
- Places with an amount: cities, data centres, as bubbles.
When not to use
Installation
Install
npm install @krizaka/chartsImport
import { GeoMap } from "@krizaka/charts/geo";Examples
Viewers by country
A creator's viewers by country, the top cities as bubbles.
Viewers by country, last 90 days
Map, 12. France 48.2K (32%), Canada 31.5K (21%), United States 15.3K (10%), Morocco 12.9K (8.6%), Belgium 9.8K (6.5%). Total 150K.
| Country | Viewers | % |
|---|---|---|
| France | 48.2K | 32% |
| Canada | 31.5K | 21% |
| United States | 15.3K | 10% |
| Morocco | 12.9K | 8.6% |
| Belgium | 9.8K | 6.5% |
| Switzerland | 7.4K | 4.9% |
| Senegal | 6.1K | 4.1% |
| Tunisia | 5.6K | 3.7% |
| Côte d’Ivoire | 4.9K | 3.3% |
| Germany | 4.2K | 2.8% |
| Brazil | 2.3K | 1.5% |
| Japan | 1.8K | 1.2% |
| Paris | 21.4K | |
| Montréal | 17.8K | |
| Casablanca | 6.3K | |
| Dakar | 3.9K |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
datarequired | readonly T[] | — | One row per region with a value. |
regionrequired | string | ((datum: T, index: number) => string) | — | The field (or function) of the region's ISO 3166-1 alpha-2 code ("FR", "US"). |
titlerequired | string | — | What the chart shows, in a few words: its accessible name, and its heading unless hideTitle. |
valuerequired | string | ((datum: T, index: number) => number) | — | The field (or function) of its value. |
brand | BrandId | — | The brand whose palette the charts use. Without it, a chart follows a .brand-<id> ancestor, else Krizaka. Set it
when the app loads a brand stylesheet on :root (@krizaka/tokens/brands/orazaka.css). |
className | string | — | A class on the figure (layout: margins, grid placement). |
dataTable | boolean | — | The "Show data" button (the table is in the page for screen readers either way). Default true. |
description | ReactNode | — | A sentence under the title: the period, the unit, the source. |
empty | ReactNode | — | What to show when there is nothing to draw (default: the empty label). An EmptyState of
@krizaka /ui fits. |
error | ReactNode | — | The data could not be loaded: true says the default words, a node says yours (a retry button…). |
exportable | boolean | readonly ExportFormat[] | — | Export buttons: true for PNG, SVG and CSV, or the formats you want. |
format | ValueFormat | — | How the values are written. |
height | number | — | The height of the plot in pixels. Default 280 (a sparkline: 32). |
hideTitle | boolean | — | Visually hide the title (it stays the chart's accessible name): a card that already has its heading. |
id | string | — | The id of the figure. |
labels | ChartLabelsInput | — | The words, translated: the buttons, the states, the written summary. |
live | boolean | — | Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point. |
loading | boolean | — | The data is on its way: a skeleton of the chart, announced once. |
locale | Locale | — | The locale of every figure and date ("fr-FR"). Default "en-US". |
onSelect | ((datum: T, index: number) => void) | — | Called with the row when a region is clicked (or Enter is pressed on it). |
points | readonly GeoPoint[] | — | Bubbles on places, their area by value. |
regionLabel | string | — | The header of the regions and of the values in the table (“Country”, “Viewers”). |
steps | number | — | The number of colour steps of the scale. Default 5. |
style | CSSProperties | — | Inline style on the figure (layout only: colours come from the tokens). |
summary | "hidden" | "visible" | — | The written summary: read by screen readers only ("hidden", default), or shown under the chart ("visible"). |
summaryText | string | — | Your own summary instead of the generated one (still read first by screen readers). |
valueLabel | string | — | The header of the values (“Viewers”). |
Accessibility
- The summary names the five largest regions with their shares; the table lists every region and place.
- The Equal Earth projection keeps areas true: no country looks larger than it is.
- The world's countries (~38 kB) are loaded only when a map is drawn; a skeleton holds the height meanwhile.
Keyboard
| Keys | Action |
|---|---|
| Arrow keys | Walk the regions that have data, largest first, then the places. |
| Home / End | Jump to the largest or the last item. |
| Esc | Clears the active region. |
Best practices
- Key the regions by ISO 3166-1 alpha-2 (
FR,US): the names come fromIntl.DisplayNamesin the reader's locale. - Map rates (per viewer, per capita) rather than raw counts when the countries' sizes differ widely.
- Pair it with a ranked table or bars when the exact order matters.
Related components
Generated from the code of @krizaka/ui 2.4.0: its meta.ts, its examples and its types.Edit this documentation on GitHub