ONA Embed — API-Fetched VizSpec

Key difference from the minimal embed:

VizSpec stored on disk — instead of a hardcoded JS constant, specs live in dataset/{id}/viz-*.json. The API serves them on request.
Standard mount — onaViz('viz-id') with a string triggers the normal API fetch path. No loadInlineSpec() call needed.
Switcher — api.php?action=vizslist&dataset=… returns all available specs for a dataset. The selector calls switchViz(id) — built into the engine.
Live spec inspector — the sidebar reads from the engine state (spec, colorAttr, sizeAttr) to show what is active.

Select a VizSpec → The dropdown below is rendered inside the onaViz() component — it can access availableViz and call switchViz() directly.

Active VizSpec: Loading…

Loading graph…

Hover · Click · Scroll to zoom

How to embed

Pass the VizSpec ID to onaViz(). The engine fetches the spec and graph data automatically. Use switchViz(id) to swap specs without a page reload.

API calls made

On every viz load, the engine calls:

api.php?action=viz&id={id}

api.php?action=load&dataset={dataset}

The first returns the VizSpec + list of available vizspecs for this dataset. The second returns the full graph JSON (nodes + edges).

Architecture

VizSpecs are stored in
dataset/{id}/viz-*.json

To add a new view, add a new viz-*.json file. It appears in the switcher automatically. No engine change required.

Example vizspec format

BA_medium/viz-defaultDefault View

VizSpec IDs follow the format dataset_id/viz-id. Create multiple views by adding JSON files to dataset/{id}/viz-*.json.

What to try:

API-fetched VizSpec — The page loads BA_medium/viz-default from the API. The VizSpec is stored on disk as a JSON file, not hardcoded in the page.
Explore the network — The BA_medium dataset is a Barabási-Albert scale-free network with 500 nodes. Color by department to see community structure.
Interactive filtering — Click legend items to filter by department and activate the bridge lens (highlights nodes connecting different departments).
Hover to see individual profiles. Click a node to select it and see its ego network.
Create your own VizSpecs — Add new viz-*.json files to dataset/BA_medium/. They will appear in the switcher automatically without code changes.

ONA Visual Lab — API-Fetched VizSpec

How to embed

API calls made

Architecture

Example vizspec format