ONA Visual Lab

Embedding Examples

Each example is a self-contained HTML file that demonstrates a specific integration pattern or analytical use case. They are designed to be read, forked, and modified — every key decision is documented inline so you or an AI assistant can adapt them quickly to a new context.

◈

Self-documented

Inline comments explain every architectural choice — not just the what, but the why. No separate tutorial required.

⌥

Fork-friendly

Each file is a working starting point. Customize the VizSpec, swap the dataset, adjust thresholds — the comment markers show exactly where.

⬡

AI-modifiable

The structured comments and CUSTOMIZE markers are written for AI-assisted editing. Paste any example into Claude or GPT and describe your changes.

All examples

C1 · embed-minimal

The smallest possible embedding of an ONA graph. A hardcoded VizSpec drives a single Sigma canvas — no sidebar, no controls. 20 lines of mount markup. The reference pattern for any custom integration.

Inline VizSpec loadInlineSpec() No sidebar

C2 · embed-api

API-Fetched VizSpec

Loads a VizSpec by ID from the API instead of hardcoding it. Includes a live switcher between all available VizSpecs for the current dataset. The pattern to use when the spec is managed server-side.

onaViz(id) switchViz() Live switcher

C3 · demo-dashboard

2-Panel Dashboard

Two independent network graphs displayed side-by-side with a shared selection state. Clicking a node in one panel highlights it in the other. Demonstrates the Alpine.store('lab') cross-component coordination pattern.

Multi-panel Cross-selection Alpine.store

C4 · embed-playground

Config Playground

Every VizSpec option exposed through a live form with immediate graph preview. Generates the corresponding JSON output you can copy into the VizSpec Editor or a file. The fastest way to explore what the engine can do.

All VizSpec options Live preview JSON generator

C5 · ona-outcomes

ONA Specialist · HR

ONA Outcomes Dashboard

Extends the engine with domain-specific ONA indicators computed entirely client-side. A split-panel layout shows the network graph on the left and four analytical outcome panels on the right. Clicking a row in any panel selects the corresponding node on the graph.

EI Index (Krackhardt & Stern) Burnout Risk Isolation Risk Bridge Score Color by outcome onaViz() spread pattern

Best for ONA practitioners who want to present outcome indicators — not just raw network structure — to HR managers or leadership without requiring technical knowledge of graph metrics.

Customize Change GROUP_ATTR and the four risk thresholds at the top of the script block to adapt to any dataset.

C6 · cockpit-scenario

ONA Specialist · Strategy

Scenario Cockpit

A two-panel cockpit anchored to a single BMK dataset. Fetches the cockpit config from the API, displays benchmark metadata injected from SQLite (_db_scenario), and renders the analyst narrative alongside the graphs. Demonstrates the scenario-container pattern: one dataset, multiple visual angles.

dataset anchor _db_scenario Narrative strip Scoped VizSpec resolution Cross-panel selection

Best for ONA analysts who need to present a structured investigation around a single dataset — combining network topology with adoption or outcome scores in one scrollable view.

Customize Swap COCKPIT_ID at the top of the script block to point to any cockpit JSON in your project. The scenario.narrative and _db_scenario strips update automatically.