When should I use Sigma.js instead of d3.js?

Updated

Use Sigma.js when your graph has thousands of nodes and edges and you need it to render and stay interactive in the browser. Use d3.js instead when your graph is small (roughly a few hundred nodes and edges) or when you need highly customized rendering. The deciding factors are graph size and how much control you need over how each element is drawn.

The core difference: WebGL vs Canvas/SVG

Sigma.js renders graphs with WebGL. That is the main reason it can draw larger graphs faster than Canvas- or SVG-based solutions. d3.js typically renders through Canvas or SVG, which gives you fine-grained control over every drawn element but scales worse as the node and edge count grows.

Dimension Sigma.js d3.js
Rendering technology WebGL Canvas or SVG
Best for large graphs Yes — thousands of nodes and edges Not its strength
Best for small graphs Works, but not the reason to choose it Yes — a few hundred nodes and edges
Custom rendering Possible, but harder to develop Highly customizable
Graph data model & algorithms Delegated to graphology Handled within your d3 code

The trade-off is explicit in the library's own guidance: WebGL lets Sigma.js draw larger graphs faster, but it "makes custom rendering way harder to develop." So the same mechanism that wins on scale is the one that costs you flexibility.

Choose Sigma.js when scale is the priority

Pick Sigma.js if any of these describe your situation:

  • You have a graph dataset with thousands of nodes and edges and need it to render in a web page.
  • You want built-in interaction — for example, a search field, or showing a node's neighborhood on hover.
  • You are building an app where users create and manipulate graphs (creating nodes on click, drag-and-drop).
  • You want to personalize rendering at a normal level, such as displaying some nodes with pictures in them and others differently.

Sigma.js is designed to work in symbiosis with graphology: graphology handles the graph data model and algorithms, while Sigma.js handles rendering and interactions. If you need graph algorithms — from ForceAtlas2 layout to metrics or community detection — those live in graphology, not Sigma.js.

Choose d3.js when customization is the priority

The library's own FAQ is direct on this: if you have small graphs (like a few hundred nodes and edges) and/or you need very customized rendering, then d3.js is the best fit. Reach for d3.js when:

  • Your graph is small enough that Canvas or SVG performance is not a concern.
  • You need rendering control that goes beyond what Sigma.js makes easy.
  • Your visualization is less about a large interactive network and more about bespoke drawing.

How to get started with Sigma.js

If you have decided Sigma.js fits, the setup depends on your starting point.

Adding it to an existing project:

npm install graphology sigma

Starting from nothing: the project points to a CodeSandbox as a starting point.

A common first task is displaying an existing dataset — for example, a GEXF graph file exported from Gephi, with colors, sizes, and positions for each node — on a web page. From there you can layer on interaction (search, hover neighborhoods) or customization (image nodes, differentiated styling).

Common questions that affect the choice

Can I get drawable data from a CSV? Yes — process the data with graphology, then render it with Sigma.js.

Does Sigma.js include graph algorithms? No. Sigma.js implements none; graphology provides them, from ForceAtlas2 layout to metrics and community detection.

Can I use Sigma.js in React? Yes, and the recommended approach is @react-sigma. The demo on the Sigma.js site is built with it, and its source is available for reference.

The short version: let graph size and rendering-customization needs decide. Large and interactive points to Sigma.js; small and highly custom points to d3.js.