Appearance
Visualise a network on the web when readers genuinely need to explore it — to filter, search, trace a path or query relationships — and the graph is too large for a single static image to show structure clearly. For a fixed argument, a small graph, or a print-bound audience, a carefully laid-out static export almost always communicates better and costs a fraction of the effort. The interactivity is the cost; only pay it when exploration is the point.
This is a decision guide, not a tutorial: it lays out the signals, the trade-offs and the thresholds.
When does interactivity actually earn its keep?
Interactivity helps when the reader has questions you cannot anticipate: "what were this merchant's correspondents in the 1680s?", "which faction does this person sit between?". A web network lets them filter by attribute, highlight a node's neighbourhood, and follow ties at their own pace.
It does not help when you have one finding to deliver. If your point is "the correspondence splits into two communities", a static image with two coloured clusters and an annotation makes that point instantly, loads everywhere, and survives in a PDF. Interactivity there is decoration that adds load time, bugs and an accessibility burden.
How big is too big for the web?
Size drives both the renderer choice and whether a network is readable at all.
| Nodes | Renderer | Reality check |
|---|---|---|
| < 50 | Anything (even static) | Often clearer as a static image |
| 50–1,000 | SVG (D3, Cytoscape.js) | Sweet spot for interactive exploration |
| 1,000–10,000 | Canvas (Sigma.js) | Needs filtering; raw view is a hairball |
| > 10,000 | WebGL (Sigma + WebGL) | Render-only; show backbones/communities |
The renderer ceiling is generous, but human legibility caps out far earlier. Past a few hundred visible nodes, no layout reads cleanly — you must filter to a backbone, aggregate into communities, or expose detail on demand.
Which library should I reach for?
A short heuristic:
- Cytoscape.js — medium graphs, rich per-node styling, many built-in layouts. The fastest path to a polished, embeddable historical network.
- Sigma.js — large graphs where performance matters; pairs naturally with a Gephi-computed layout.
- D3 — when the network is one part of a bespoke visual, or you need total control over interaction.
A common, underrated route: lay the graph out in Gephi, export node positions, and ship those fixed coordinates so the browser never runs an expensive force simulation. That gives a deterministic, reproducible layout.
js
// Load a precomputed layout — positions fixed, no live simulation
const res = await fetch('network.json'); // {nodes:[{id,x,y,community}], edges:[...]}
const graph = await res.json();
renderer.setGraph(graph); // browser just draws, no physicsWill a force layout mislead my readers?
Yes, if you let it run live. Force-directed layouts are non-deterministic: reload the page and the shape changes, which quietly implies the position is meaningful when it is not. Pre-compute the layout once, freeze the coordinates, and the reader sees a stable, citable figure. Reserve live simulation for genuine sandbox exploration tools, and tell the reader the geometry is arbitrary.
What do I owe accessibility and preservation?
A canvas hairball is invisible to screen readers and to anyone with a slow connection or a broken script. Always ship a static fallback image, a downloadable edge/node table, and a paragraph stating the key findings in words. Encode community by shape or label as well as colour. For the archival record, the static export and the underlying data are what will still be readable in ten years — the interactive layer rarely survives a framework migration.
Key Takeaways
- Choose a web network only when readers need to explore; otherwise a static export communicates better for less effort.
- Renderer ceilings are high (SVG ~1k, Canvas ~tens of thousands, WebGL more) but human legibility caps near a few hundred visible nodes.
- Pick Cytoscape.js for styled medium graphs, Sigma.js for large ones, D3 for bespoke compositions.
- Pre-compute and freeze the layout (e.g. from Gephi) so the figure is deterministic and citable.
- Filter to a backbone or aggregate into communities rather than publishing a hairball.
- Provide a static fallback, a data table, text findings, and non-colour encoding for accessibility.
- You rarely need a server; ship a static JSON graph on a static host.
Frequently Asked Questions
When is an interactive web network worth the effort?
When readers genuinely need to explore — filter by date, trace a specific person's ties, or query the graph — and the network has enough nodes that a static image cannot show structure clearly. For under ~50 nodes or a fixed narrative point, a static export is usually better.
How many nodes can a web network handle smoothly?
An SVG force layout starts to stutter around 1,000–2,000 nodes in most browsers. Canvas-based renderers like Sigma.js handle tens of thousands, and WebGL pushes into the hundreds of thousands, but legibility, not the renderer, is the real limit beyond a few hundred nodes.
Should I use D3, Sigma.js, or Cytoscape.js for a historical network?
Use Cytoscape.js for small-to-medium graphs needing rich styling and built-in layouts, Sigma.js for large graphs needing performance, and D3 when you need full custom control or to combine the network with other visual elements. For a quick embed, an exported Gephi-to-web bundle may be enough.
Is a hairball network ever useful to publish?
A dense hairball communicates 'this is connected' and little else. It can work as a deliberate texture or a hook, but if readers need to read structure you should pre-compute a layout, filter to a backbone, or aggregate nodes into communities before publishing.
What are the accessibility risks of web networks?
Force layouts are non-deterministic, unlabelled, and invisible to screen readers, and colour-only encoding excludes colour-blind users. Provide a static fallback image, a data table, text describing key findings, and shape or label encoding alongside colour.
Do I need a server to publish an interactive network?
Usually no. Most historical networks are small enough to ship as a static JSON file loaded by client-side JavaScript on a static host. You only need a server or database when the graph is too large to load at once or must be queried live.