Graph Visualisation Libraries

When I had to choose a library for visualising large networks, I expected the decision to be about features. It turned out to be about pixels per frame. Every library can draw fifty nodes beautifully. Very few can keep ten thousand interactive.

Rendering tech is the decision

Approach	Examples	Comfortable up to	Why
DOM / SVG	D3 with SVG, many React graph components	hundreds to low thousands	every node is a DOM element the browser must lay out and paint
Canvas 2D	D3 with canvas, vis.js, Cytoscape.js	a few thousand	one bitmap, but drawing still happens on the main thread
WebGL	Sigma.js, some commercial libraries	10k+	the GPU does the drawing; the CPU only updates buffers

DOM-bound architectures also make it hard to move work off the main thread, which hurts responsiveness exactly when graphs get big. A published benchmark I leaned on showed a WebGL renderer handling 10,000 nodes several times faster than a canvas one, while an older canvas library took minutes at 1,000.

How to choose

1. Benchmark the scary requirement first. Generate graphs at 100, 1,000 and 10,000 nodes and time first render and layout. It settles debates that opinions can’t.
2. List the features you actually need. Grouping and combining nodes, edge aggregation, curved edges, geospatial layouts, editing, export, search. Features can be built; a renderer that can’t scale can’t be fixed.
3. Consider the migration. If you’re replacing an existing library, an API close to the old one lets screens move across one at a time.
4. Weigh licence cost against ownership. Commercial libraries are excellent and expensive. Building on an open-source renderer means you own every feature — and every bug.

Graphs are also data

Under the rendering, these are graphs in the computer-science sense: layouts are force simulations, “find a path” is a breadth-first search, clustering is community detection. Knowing a little graph theory helps you choose layouts and explain what users are looking at.

In practice

These notes were the groundwork for an in-house network graph library — the full story is in Building a Graph Component Library, and the API design lessons in Headless Component Libraries. Storybook became the place where each capability was demonstrated and tested (Storybook).