{
  "title": "Maps and flags",
  "path": "/data/maps",
  "url": "https://design.werklist.com/data/maps",
  "text": "https://design.werklist.com/agent/data/maps",
  "summary": "How WerkOS draws the world on one projection, and where a country's flag may appear in data.",
  "version": "2.1.2",
  "kind": "data",
  "name": "Maps and flags",
  "purpose": "One projection for every map, and the places a country's flag may appear in data.",
  "use": [
    "Where a score or a volume sits geographically",
    "A flag before a country name in a table, a ranked bar or a list"
  ],
  "avoid": [
    "A map for a rank",
    "A flag on a map, in a legend, as a bullet or as a status"
  ],
  "anatomy": [
    {
      "part": "Projection",
      "measure": "Equal Earth; 84 degrees north to 56 degrees south; Antarctica is not drawn"
    },
    {
      "part": "Borders",
      "measure": "a hairline on screen, 0.3 pt in print, in the page color"
    },
    {
      "part": "Grid",
      "measure": "meridians and parallels every 30 degrees, a hairline on screen, 0.3 pt at 8 percent ink in print, no labels",
      "token": "--border"
    },
    {
      "part": "Choropleth",
      "measure": "five steps of one hue per theme, with fixed breaks"
    },
    {
      "part": "No data",
      "measure": "light #d9d9de, dark #3e424e, with a 0.3 pt dotted outline in the page color"
    },
    {
      "part": "Not in scope",
      "measure": "light #f2f2f5, dark #2b2d37, with fine horizontal lines"
    },
    {
      "part": "Partial evidence",
      "measure": "the step's own fill with a fine dot grid, and its own entry in the key"
    },
    {
      "part": "Bubbles",
      "measure": "area by volume; the 8 largest named with leader lines; a size key of 3 steps"
    },
    {
      "part": "Small countries",
      "measure": "shown as a dot with an edge in the page color; close neighbors share one dot"
    },
    {
      "part": "Flag",
      "measure": "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",
      "token": "--border"
    },
    {
      "part": "Without a flag",
      "measure": "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",
      "token": "--surface-control"
    }
  ],
  "states": [
    {
      "name": "Hover or focus",
      "change": "the country's name and value in the chart tooltip"
    },
    {
      "name": "No flag",
      "change": "the two letter disc takes the place of the flag"
    }
  ],
  "keys": [
    {
      "key": "Tab",
      "action": "Enter or leave the map, one stop"
    },
    {
      "key": "Arrow keys",
      "action": "Move through the countries in the order of the table"
    },
    {
      "key": "Escape",
      "action": "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"
  ],
  "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"
  ]
}