The latest articles on DEV Community by rambo586 (@rambo586). https://dev.to/rambo586 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4044742%2F0ccd6bd1-152a-4cef-802f-6fe4f81608dc.png https://dev.to/rambo586 en rambo586 Fri, 24 Jul 2026 03:32:45 +0000 https://dev.to/rambo586/how-we-built-a-153-node-interactive-lore-graph-for-black-myth-zhong-kui-using-d3js-and-astro-4cn6 https://dev.to/rambo586/how-we-built-a-153-node-interactive-lore-graph-for-black-myth-zhong-kui-using-d3js-and-astro-4cn6 <h2> The Challenge </h2> <p>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.</p> <h2> The Technical Approach </h2> <ol> <li> <strong>Build-Time D3 Force Layout Computation</strong>: Pre-computing node coordinates and physics simulation during the Astro static build step.</li> <li> <strong>Zero-Runtime SVG Pre-rendering</strong>: Outputting the rendered topology as inline SVG with CSS design tokens, preserving 60 FPS scrolling on mobile.</li> <li> <strong>Canonical Lore Data Architecture</strong>: Structuring 153 canonical concept nodes across Tang Dynasty exorcistic texts (<em>Nuo</em> rituals) and <em>Black Myth: Zhong Kui</em> motifs.</li> </ol> <p>Check out the live interactive relationship map:</p> <p><a href="https://blackmyth.game/en/posts/lore/black-myth-concept-relationship-map/" rel="noopener noreferrer">Black Myth Lore &amp; Concept Map</a></p> <p>Official website: <a href="https://blackmyth.game/en/" rel="noopener noreferrer">blackmyth.game</a></p> webdev javascript gaming showdev