Keeping a force-directed organisation graph off the main thread

On Restor, an organisation can mark another organisation as a partner. Do that enough times across enough organisations and you get a graph — not the sites/collections/organisations hierarchy the map already shows, but a separate web of who's partnered with whom. We wanted a way to actually look at it.

The obvious build is d3-force ticking on the main thread, rendered to SVG. That's where I started, and it worked right up until it didn't: every tick of the simulation ran on the same thread responsible for scrolling, hovering, and clicking. At real scale — hundreds of nodes — the graph you were trying to drag around was the same thread deciding whether your drag even registered.

So the simulation moved off it. The layout is computed once, in a Web Worker: d3-force ticks forward a fixed number of steps and hands back finished node positions, instead of re-simulating on every animation frame. The worker doesn't know about React or the DOM — it just crunches positions and returns coordinates.

Rendering changed too. Instead of SVG, it's React Three Fiber: an orthographic camera over a plain WebGL scene. That unlocked something worth having anyway — lazily loading each node's avatar texture only once it actually scrolls into view, instead of fetching hundreds of images for nodes nobody's looking at yet.

It's a trick I lean on generally now: keep expensive work off the render path, hand it to a worker, and only pay for what's actually on screen. The polygon drawer on Restor uses the same instinct for a different problem — self-intersection checks running in their own worker so dragging a vertex never blocks on validation. Two workers, two unrelated problems, same reflex: if it's not the UI, it doesn't get the UI thread.

The trade-off is startup cost — spinning up a worker and shipping node data across that boundary isn't free, and for a graph of a dozen nodes, main-thread d3-force would still feel instant. It only pays off once you're into the hundreds, which is exactly where Restor's organisation network already sits.