# Maps and flags

One projection for every map, and the places a country's flag may appear in data.

* Kind: data
* Page: https://design.werklist.com/data/maps
* Version: 2.1.2

## When to use it

* Where a score or a volume sits geographically
* A flag before a country name in a table, a ranked bar or a list

## When not to use it

* A map for a rank
* A flag on a map, in a legend, as a bullet or as a status

## Rules

* One projection for every map
* No labels, capitals, place names or water on a map
* A map never zooms, pans or recenters
* No data and not in scope are separate fills with separate legend entries
* A score on partial evidence keeps its step and adds a dot grid
* A rank is never a fill or a bubble size
* A flag sits before the name, never on a map, in a legend, as a bullet or as a status

## Anatomy

* Projection: Equal Earth; 84 degrees north to 56 degrees south; Antarctica is not drawn
* Borders: a hairline on screen, 0.3 pt in print, in the page color
* Grid: meridians and parallels every 30 degrees, a hairline on screen, 0.3 pt at 8 percent ink in print, no labels (--border)
* Choropleth: five steps of one hue per theme, with fixed breaks
* No data: light #d9d9de, dark #3e424e, with a 0.3 pt dotted outline in the page color
* Not in scope: light #f2f2f5, dark #2b2d37, with fine horizontal lines
* Partial evidence: the step's own fill with a fine dot grid, and its own entry in the key
* Bubbles: area by volume; the 8 largest named with leader lines; a size key of 3 steps
* Small countries: shown as a dot with an edge in the page color; close neighbors share one dot
* Flag: round; 20 px in a board cell, 1.15 em beside 13 px table text, 16 px in a dense list, 10 pt in a printed table; never under 15 px on screen or 8 pt in print; a 1 px ring over a --surface-2 backfill (--border)
* Without a flag: the two letter country code in a disc: --surface-control fill, --text-muted ink, 9 px weight 700 on screen; in print a disc at 8 percent ink with 4.5 pt letters at 55 percent (--surface-control)

## States

* Hover or focus: the country's name and value in the chart tooltip
* No flag: the two letter disc takes the place of the flag

## Keyboard

* Tab: Enter or leave the map, one stop
* Arrow keys: Move through the countries in the order of the table
* Escape: Close the tooltip

## Accessibility

* The map is an image with a summary written from its data
* Each map comes with its data as a table, grouped by the steps of the key; where a value carries a range, the range shares its cell
* Screen readers skip the flag, because the name that follows says it

## Tokens

* --border
* --surface-1
* --surface-2
* --surface-control
* --text-muted