How We Built a 153-Node Interactive Lore Graph for Black Myth: Zhong Kui Using D3.js and Astro

The Challenge

Rendering a complex 153-concept-node, 1,200-edge mythic relationship topology for mobile devices without triggering main-thread layout thrashing or heavy client-side JavaScript execution.

The Technical Approach

1. Build-Time D3 Force Layout Computation: Pre-computing node coordinates and physics simulation during the Astro static build step.
2. Zero-Runtime SVG Pre-rendering: Outputting the rendered topology as inline SVG with CSS design tokens, preserving 60 FPS scrolling on mobile.
3. Canonical Lore Data Architecture: Structuring 153 canonical concept nodes across Tang Dynasty exorcistic texts (Nuo rituals) and Black Myth: Zhong Kui motifs.

Check out the live interactive relationship map:

Black Myth Lore & Concept Map

Official website: blackmyth.game