Dither Map
Each country is shaded by its value as a density of ink dots, from a light stipple for the least to solid for the most, on a log scale when the data spans decades; land without data is a faint stipple, the sea is the plain page, and neighbours are kept apart by a hairline gap. It develops in when it first comes into view, and a change of data eases each country to its new density. Point at a country, or focus the map and use the arrow keys (highest first), to read it; a hidden table gives screen readers the whole of the data.
Needs: None. Canvas 2D. Borders from Natural Earth 1:110m (public domain), built in at about 11 KB.
Customize
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | Record<string, number> | required | A value for each country, keyed by ISO 3166 alpha-2 code. |
| format | (value: number) => string | – | How a value reads. |
| label | string | "Value" | What the values are, e.g. “Active users”. |
| onSelect | (code: string, value: number) => void | – | Called when a country with data is clicked or chosen with Enter. |
| tone | string | – | The ink. The page's accent by default. |
| cell | number | 3 | Size of one dither cell in px. |
| legend | boolean | true | The key below the map. |
| className | string | – | Class on the map. It fills its container's width. |
| style | CSSProperties | – | Style on the map. |