Data & camera examples

These demos cover getting a graph onto the screen and moving the camera around it: generating graphs with one call, mutating a graph live, mapping your own records into a graph, and driving the view. See the guides on building a graph, generating graphs and controlling the camera, plus the coordinate system concept.

Every demo runs live in your browser — drag, zoom and use the controls.

Graph generators

nodus.generate builds a graph for you — random, scale-free, trees, grids and more. Each button clears the graph, generates a new one, lays it out and fits the view.

nodus.clearGraph();
// Generators return a { nodes, edges } graph — load it with setGraph.
const g = await nodus.generate.randomTree({ nodes: 40 });
await nodus.setGraph(g);
await nodus.layouts.force({ duration: 300 });
await nodus.view.locateGraph();

Graph generators Open in new tab ↗

Add & remove live

Mutate the graph at runtime with addNode, addEdge and removeNode — removing a node also removes its incident edges.

nodus.addNode({ id, attributes: { x, y } });
nodus.addEdge({ source: existing, target: id });

await nodus.removeNode(id); // also removes incident edges

Add & remove live Open in new tab ↗

Build from your data

Map your own domain records into a { nodes, edges } graph — domain payload lives under data — then style by a field and lay it out.

const rawGraph = {
  nodes: people.map((p) => ({ id: p.id, data: { name: p.name, role: p.role } })),
  edges: relationships.map((r) => ({ source: r.from, target: r.to })),
};
await nodus.setGraph(rawGraph);
await nodus.layouts.force({ duration: 400 });
await nodus.view.locateGraph();

Build from your data Open in new tab ↗

Fit & focus camera

Drive the camera directly: fit the whole graph, zoom in and out, or fly to a single node. Each call accepts an animation duration.

await nodus.view.locateGraph({ duration: 400 });
await nodus.view.zoomIn({ duration: 200 });
await nodus.view.zoomOut({ duration: 200 });
await node.locate({ duration: 400 }); // fly to one node

Fit & focus camera Open in new tab ↗

Coordinates

Convert between screen and world space, and read the camera’s center and zoom. Move the pointer over the graph to see live world coordinates.

const world = nodus.view.screenToGraphCoordinates({ x, y });

const center = nodus.view.getCenter();
const zoom = nodus.view.getZoom();

Coordinates Open in new tab ↗

Graph operations

The core structural calls: addGraph appends nodes and edges to what’s already there, setGraph replaces the whole graph, and clearGraph empties it. Read back getNodes().size for the count, or getConnectedComponents() to see how many disconnected clusters remain.

nodus.addGraph({ nodes, edges });   // append
await nodus.setGraph(starterGraph()); // replace
nodus.clearGraph();                 // empty

const count = nodus.getNodes().size;
const components = nodus.getConnectedComponents().length;

Graph operations Open in new tab ↗