Skip to main content

​
Physics-Based Visualization Unlocks Narrative That DAG Layouts Cannot

​
The Problem

MERIDIAN had two graph visualizations — a unit dependency graph and a skill graph — both using Cytoscape.js with rectangular nodes and directed-acyclic layouts. Technically correct. Visually cheap. As the node count grew, relations became harder to see, and the graphs told you what connects to what but not how the system feels. For a product themed around Martian missions and Andy Weir, this was an unforced error. The visualization should make the audience feel they’re looking at a living agentic solar system, not a software dependency tree.

​
What Changed

Replaced both graphs with a single “Observatory” page using the force-graph library (Canvas 2D rendering, d3-force physics). The entire entity hierarchy — councils, agents, capabilities, skills, units — is unified into one force-directed simulation with an orbital-mechanics metaphor:
  • Councils are stars (glowing, pulsing, with orbital rings)
  • Agents are planets (orbiting their council, tinted by lineage)
  • Capabilities are moons (shared belt connecting the system)
  • Skills are asteroids (loosely bound via capability edges)
  • Units are debris (tiny, type-colored, gravitationally associated)
Hover focus dims the entire graph except the selected node and its connections — Obsidian Graph View behavior. The deep-space background uses procedural starfields and nebula gradients.

​
Why It Matters

Visualization choice is a product decision, not just a technical one. When every documentation tool shows the same DAG-in-a-box, switching to a physics simulation with celestial aesthetics creates genuine differentiation. Users exploring /observatory/ understand the system hierarchy through spatial intuition — dense clusters signal important councils, isolated nodes signal orphaned units, the orbital ring radius reveals team size at a glance. The pattern is also zero-cost to maintain: same build pipeline, same data loaders, one CDN script, no npm dependencies added. The old graphs stay alive with deprecation banners for bookmark compatibility.

​
The Pattern

When your visualization library constrains your narrative, change the library, not the narrative. Cytoscape.js is excellent for DAGs — but this wasn’t a DAG problem, it was a spatial-identity problem. force-graph + Canvas 2D shadowBlur produces the glow/gradient effects that would require WebGL hacks in Cytoscape. The right tool for the right aesthetic.