Hex Tile Map

Description

A hex tile map replaces the irregular geographic shapes of a conventional map with uniform hexagonal tiles, one per region (state, country, district). The hexagons are arranged to approximate the spatial relationships of the original geography — neighbors remain neighbors, and general compass directions are preserved — but every region receives exactly the same visual area. This solves the fundamental problem of choropleths: large-area regions dominating visual attention regardless of their data importance.

The hexagonal shape is preferred over squares because hexagons tile the plane with six equidistant neighbors (compared to four for squares), producing a more organic and visually balanced layout. Each tile can be colored, labeled, or filled with a small chart (sparkline, bar, icon) to encode data, making hex tile maps a versatile canvas for geographic small multiples.

Designing a hex tile map requires a layout algorithm or manual placement that balances geographic fidelity with constraint satisfaction: tiles should not overlap, neighbors should be adjacent, and the overall shape should be recognizable. For well-known geographies (US states, European countries), community-maintained layouts are widely available. For custom geographies, the process may require manual adjustment.

When to Use

• Comparing data across regions where geographic area varies enormously (e.g., US states, world countries)
• When every region deserves equal visual representation regardless of its physical size
• Creating geographic small multiples where each tile contains a mini-chart
• When approximate geographic arrangement suffices and distortion is acceptable
• Election maps, demographic comparisons, or any per-region metric

When NOT to Use

• When precise geographic shape or location matters — use a choropleth or standard map
• When readers need to identify regions by their geographic outlines (hex tiles strip that information away)
• For point-level data or continuous spatial distributions — use a dot map or interpolated surface
• When the geography is unfamiliar to the audience and spatial recognition is critical for interpretation

Anatomy

• Hexagonal tiles: Equal-sized hexagons, one per geographic region, arranged in a grid layout.
• Spatial arrangement: Tiles placed to approximate the real geographic relationships; neighbors in reality should be neighbors on the grid.
• Color fill: Each hexagon colored by a data value using a sequential, diverging, or categorical scale.
• Labels: Region abbreviations or names inside each hexagon (e.g., “CA”, “NY”, “TX”).
• Legend: Color scale legend explaining the value-to-color mapping.
• Embedded charts (optional): Small sparklines, bars, or icons inside each tile for richer data encoding.

Variations

• Square tile map: Uses squares instead of hexagons; simpler to construct but each tile has only four direct neighbors.
• Hex tile small multiples: Each hexagon contains a mini-chart (sparkline, bar, pie), enabling multi-variable geographic comparison.
• Hex bin map: A different concept — continuous point data is aggregated into hexagonal bins on a geographic base map, creating a density surface.
• Demers cartogram: A variant using equal-area squares with relaxed geographic constraints, optimized for non-overlap.
• Responsive tile map: Tiles rearrange at different zoom levels or screen sizes, adapting the layout for mobile or detail views.

Code Reference

// Observable Plot - hex tile map of US states
// Assumes a dataset with { state, col, row, value }
Plot.plot({
  marks: [
    Plot.cell(stateHexLayout, {
      x: "col",
      y: "row",
      fill: "value",
      tip: true,
      rx: 6
    }),
    Plot.text(stateHexLayout, {
      x: "col",
      y: "row",
      text: "state",
      fill: "white",
      fontSize: 10,
      fontWeight: "bold"
    })
  ],
  x: { axis: null },
  y: { axis: null, reverse: true },
  color: {
    scheme: "YlGnBu",
    legend: true,
    label: "Value"
  },
  aspectRatio: 1
})