One hex per state

A hex tile map is a cartogram, not geography: every region becomes one equal hexagon at a hand-authored position, so Rhode Island is as legible as Texas and land area stops deciding how loud a value looks. Built in a chart core it is a grid of tiles, which leaves the reader supplying 51 hex coordinates alongside every value. Here it is a layout: geometry keyed exactly the way the boundary pack is keyed, so one dataset and one joinBy serve both, and the scale, legend, tooltip, labels, selection and keyboard navigation are the machinery that already exists.

Press it and watch the states, not the map. Toggling the layout morphs each region between the two representations rather than swapping them, which is the answer to the one real problem with a cartogram: a reader who cannot navigate a honeycomb can navigate the map it grew out of, and watching Texas walk to its cell is what tells them which cell is Texas. Each outline is resampled at equal arc length, rotated to its closest match and walked across; Alaska travels furthest, from the corner it is inset into to the corner the grid parks it in. Labels step out for the flight, because they are placed against the geometry that has already arrived.

Illustrative data. A smooth function of longitude and latitude, not a real indicator. The layout is hand-authored and verified against the boundary pack it claims to represent: npm run check:layout scores order against state centroids and adjacency against shared TopoJSON arcs.

Three things you did not have to configure

A layout is a diagram, and it knows that about itself. Every one of these was set by hand while prototyping, which is the evidence that none of them belongs to the caller:

• The identity projection. The coordinates are a grid, so projecting them would be meaningless. The pack recommends it the same way us/states@10m recommends albersUsa.
• Labels are keys, not names. A cell sized for Rhode Island cannot hold "Rhode Island". With names, 22 of the 51 labels lost their collision fight and vanished; with keys, all 51 fit. That is why hex layouts are keyed on the postal abbreviation.
• No zoom, no pan, no zoom controls. Nothing sharpens on zoom and there is nothing off-screen, so both gestures go back to the page. Compare the corner of the two maps above.

Each is a default, not a rule: pass geo.projection, dataLabels.field or interaction.zoom.enabled and yours wins.

…

…

Seven region sets have one

A layout has no canonical answer, so each of these is a judgement about which real adjacencies matter most, scored against the boundary pack it claims to represent. Each one has a shape that fights the grid, and the interesting part is which compromise it forces:

• Australia keeps all 10 of its state borders touching, the only one that keeps every single one. Germany keeps 72% of 29, and draws Berlin beside Brandenburg because the two share a centroid and no grid can hold an enclave.
• Canada keeps 75% of 16. Nunavut is the problem: it spans 60 degrees of longitude, more than twice any other region, and borders the Northwest Territories in the west and Labrador in the east. One cell cannot reach both, so it keeps the land border and gives up the offshore one.
• Brazil keeps 82% of 50. Its nine northeastern states descend 7.5 degrees of latitude within about 2 degrees of longitude, so that coast is a near-vertical chain that costs four grid rows, and Alagoas and Sergipe end up level with the central plateau.
• Japan keeps 86% of 86, the highest of the large ones, because Hokkaido, Shikoku, Kyushu and Okinawa share no boundary with Honshu at all. The straits are water, so each island is a separate component that can be solved on its own: Kyushu keeps all nine of its internal borders and Shikoku all five. Nagano borders eight prefectures and a hexagon has six sides, so six is its ceiling and it reaches it.
• Europe keeps 78% of 58. Germany borders nine countries and Austria eight. Austria gets all six a hexagon can hold; Germany gets five, because one of its two northern cells is North Sea and Denmark takes the other.

Europe's set is not the EU. NUTS is a statistical classification, so level 0 also covers the United Kingdom, the four EFTA countries and the five candidate countries. Boundaries © EuroGeographics; the cell positions are ours.

Author your own

registerLayout takes a table of key → [col, row], row 0 north and col 0 west, keyed by whatever field your boundary pack joins on. There is no canonical layout for any country, so curating the table is the work: it is a judgement about which real adjacencies matter most, and the numbers below are how you tell whether the judgement was good.

ApexMaps.registerLayout('demo/quad@hex', {
  keyField: 'code',
  cells: { NW: [0, 0], NE: [1, 0], SW: [0, 1], SE: [1, 1] },
  names: { NW: 'North west', NE: 'North east',
           SW: 'South west', SE: 'South east' },
})

// geo: { map: 'demo/quad@hex' }