The .gph document

setDocument() accepts the same .gph project used by the workbench and Python package. Pass the parsed object:

const project = await fetch("/network.gph").then((response) => response.json());
await graph.setDocument(project);

Project shape

interface Gph {
  info: {
    version: 1;
    name?: string;
    created?: string;
  };
  datasets: Array<{
    id: string;
    graph: NodeLinkData;
  }>;
  config: {
    version: number;
    layout?: "force" | "levels" | "geo";
    bindings?: Binding[];
    filterStack?: Filter[];
    [key: string]: unknown;
  };
}

Older projects may contain "quality"; the loader accepts it as a compatibility alias for "force", but new projects should emit "force".

The project may also contain positions, saved sets, history, and a story. The embed applies the same validated project-loading path as the workbench.

Node-link data

{
  "directed": true,
  "multigraph": false,
  "graph": { "title": "Dependencies" },
  "nodes": [
    { "id": "parser", "label": "Parser", "team": "core" },
    { "id": "renderer", "label": "Renderer", "team": "visuals" }
  ],
  "links": [
    { "source": "parser", "target": "renderer", "weight": 2 }
  ]
}

Node and edge attributes become fields in the visual source catalogue.

Visual configuration

Bindings connect a source to a visual channel:

{
  "version": 1,
  "layout": "force",
  "bindings": [
    {
      "channel": "color",
      "source": { "kind": "field", "id": "field:team" },
      "resultType": "cat"
    },
    {
      "channel": "size",
      "source": { "kind": "algorithm", "id": "degree" },
      "resultType": "num"
    }
  ]
}

Build the document in the workbench, with Project.from_pandas() or Project.from_networkx(), or against the published GPH schema. See the Binding grammar for every channel, result type, source kind, and the field: id rule.