ONA Embed — Minimal

How this works in 3 steps:

1. Load the engine — four CDN libraries (Graphology, Sigma, FA2, Alpine) + four local ONA files (tokens.js, lenses.js, colors.js, lab.js).
2. Define a VizSpec — a plain JSON object that declares what to show: which dataset, which colors, which edge layers, which UI panels. The spec is the complete contract. The engine reads it verbatim.
3. Mount the component — one <div> with x-data="onaViz(null)" and x-init="loadInlineSpec(SPEC)". Pass null to skip the API VizSpec fetch; loadInlineSpec() injects your object directly. The engine still fetches graph data from the API (api.php?action=load&dataset=…).

The VizSpec driving this embed:

"dataset": "SBM_INNOVATION_small" — synthetic org network (100 nodes · 565 edges). Replace with any available dataset ID.
"node_color": "department" — each department gets a distinct color
"node_size": "none" — all nodes rendered at uniform size
"active_edge_layers": ["communication"] — only communication edges shown
"shell.topbar": false — no navigation bar (clean embed mode)
"shell.panels": [] — no sidebar panels (no legend, metrics, or compute)

To change what this viz shows, edit the SPEC constant in the page source. No backend change required.

▼

The div below is the entire mount point. x-data="onaViz(null)" initializes the engine component. x-init="loadInlineSpec(SPEC)" injects the spec defined above. The child div[x-ref="sigmaContainer"] is where Sigma renders the WebGL canvas.

What to explore:

Hover over a node to see its name and department in a tooltip.
Click a node to select it (it will be highlighted in the network).
Scroll to zoom in/out. Drag to pan.
Nodes are colored by department — clusters reveal team structure.
Dense areas = high internal communication within a group. Sparse bridges = nodes connecting different departments.

To embed this in your own page: copy the engine <script> tags, define your own SPEC constant, and paste the mount <div>. That's it. The VizSpec is the only thing you need to customize.

ONA Visual Lab — Minimal Embed