Hypergraph examples
A hypergraph lets a single hyperedge group any number of vertices at once,
drawn as a colored region rather than a line. Nodus renders them through a
four-step pipeline: setData → simplify → layout → render. See the
hypergraphs concept, the
hypergraph visualization guide and the
hypergraph API.
Every demo runs live in your browser — drag, zoom and use the controls.
Hypergraph pipeline
Feed vertices and hyperedges with setData, simplify to balance the region
geometry, layout to position everything, and render to draw it. Each region
is one hyperedge grouping several vertices.
nodus.hypergraph.setData({ vertices, hyperedges });nodus.hypergraph.simplify({ alpha: 0.4, beta: 0.4, gamma: 0.2 });await nodus.hypergraph.layout({ separationIters: 100, regularityIters: 100, useWorker: false });nodus.hypergraph.render({ view: 'primal', showVertices: true, fillOpacity: 0.18 });Member-tight regions
A hyperedge is drawn as a Bubble Set — an isocontour that hugs its member vertices and routes around anything that isn’t one. This matters for correctness: the obvious alternative, a convex hull, encloses everything between its corners, so it routinely swallows non-member vertices and draws overlaps that don’t exist.
Toggle the demo below between Bubble Sets (smooth, the default), Concave
(straight segments, still member-tight) and Convex hull on the same pinned
layout. The center vertex x belongs only to region B — the hull also draws it
inside region A, while Bubble Sets and Concave both route around it. The banner
reports, live, how many vertices each style wrongly encloses (1 for the hull, 0
for the two member-tight styles).
// 'bubble' — member-tight, smooth organic curves (default)// 'concave' — member-tight, straight angular segments// 'hull' — legacy convex hull: clean straight lines + fastest, but// encloses any non-member between its cornersnodus.hypergraph.render({ view: 'primal', boundary: 'bubble' });Primal & dual views
The same hypergraph has two natural views: the primal (vertices grouped by
hyperedges) and its dual (hyperedges become the points). After the pipeline
runs, switch between them with setActiveView.
nodus.hypergraph.setData({ vertices, hyperedges });nodus.hypergraph.simplify({ alpha: 0.4, beta: 0.4, gamma: 0.2 });await nodus.hypergraph.layout({ separationIters: 100, regularityIters: 100, useWorker: false });
nodus.hypergraph.setActiveView('primal'); // or 'dual', or 'both'