Risk · Hex Map & Graph

Reconstructing the classic Risk board as a tiled hexagon map in three.js, with a graph overlay (territories = nodes, borders = edges) as the foundation for exploring the board through graph theory.

The idea

The board's truly important asset is its adjacency graph, not the picture. So the project is split into two layers:

• Data layer — canonical, render-agnostic. Drives both the map and all future analysis.
  • data/territories.json — the 42 territories, 6 continents (with reinforcement bonuses), and the full adjacency list, including the non-geographic sea routes (Alaska↔Kamchatka, Brazil↔North Africa, Western Europe↔North Africa, Siam↔Indonesia, …).
  • data/shapes.json — the real Risk territory outlines as polygons in SVG-coordinate space, plus the inland seas. Imported by tools/import-svg.mjs from raddrick/risk-map-svg (adapted from Wikimedia Commons File:Risk_board.svg, CC).
  • data/hexmap.json — generated by tools/gen-map.mjs, which rasterises those real outlines onto the hex grid (default ~6,800 hexes): each hex joins the territory whose polygon contains it, seas are subtracted, and coastlines/sizes follow the actual map — so true islands (Greenland, Britain, Iceland, Japan, Madagascar, Indonesia, New Guinea) stand free and sizes range realistically (Iceland ~16 hexes → Ukraine ~450).
• View layer — src/main.js renders the hexes as extruded prisms in three.js, coloured by continent, with the graph drawn above the tiles.

Hex math (offset ↔ pixel, centroids, bounds) lives in src/hex.js and is shared by the browser app and the Node preview tool, so the map and the graph never drift apart.

Run it

npm install
npm run dev        # three.js app at http://localhost:5173

Drag to orbit, scroll to zoom, hover a territory for its continent/bonus/border count. Toggle the graph overlay and labels from the HUD.

Tooling

bash tools/fetch-svg.sh              # fetch third-party SVG outline sources -> tools/svgsrc/
node tools/import-svg.mjs            # parse those outlines -> data/shapes.json
node tools/gen-map.mjs [hexRadius]   # rasterise shapes.json -> hexmap.json (smaller radius = finer)
npm run validate                     # graph + hex checks (see below); also prints an ASCII map
npm run map-preview                  # render the hex map to preview.png (no browser needed)
node tools/check-orientation.mjs     # confirm on-screen N/S/E/W without WebGL

Pipeline: fetch-svg.sh → import-svg.mjs → data/shapes.json → gen-map.mjs → data/hexmap.json. The fetched third-party sources (tools/svgsrc/) are gitignored; only the derived data/shapes.json is committed.

validate confirms: 42 territories · 83 undirected edges · 6 continents (NA 9, SA 4, EU 7, AF 6, AS 12, AU 4), and that every land border is realised as two touching hexes. Genuine water crossings (Alaska↔Kamchatka, the Mediterranean, islands like Britain/Japan/Madagascar) are listed as SEA_ROUTES and allowed to be gaps. Non-contiguity (real territories have offshore islands) and cosmetic corner-touches between non-adjacent territories are reported as warnings.

Status

• Canonical territory + adjacency data
• Hexagon reconstruction of all 42 territories
• Real Risk territory outlines rasterised to hexes (faithful coastlines, sizes & islands)
• Inland seas (Great Lakes, Black, Mediterranean, Caspian) carved from the source
• three.js map rendering (north-up / east-right), continent colouring, hover
• Graph overlay (nodes + edges)
• Graph-theory lab — Paths & distance module (BFS distances, shortest path, world diameter) with three comparable visualization styles (Colour / Elevation / Graph) and a guided tour. Algorithms in src/graph.js.
• Further modules: centrality, chokepoints / cut vertices, continent defensibility

Roadmap toward graph theory

Once the map feels right, the same territories.json feeds questions like:

• Which territories are most important? — degree / betweenness centrality.
• Where are the chokepoints? — cut vertices and bridges (e.g. Central America, the Australia/Asia link at Siam).
• How defensible is a continent? — count and location of its border territories.

Credits

Territory outlines are derived from raddrick/risk-map-svg, itself adapted from Wikimedia Commons File:Risk_board.svg. RISK is a trademark of Hasbro; this is a non-commercial graph-theory project.