What is Sigma.js?

Sigma.js is a JavaScript library for rendering and interacting with network graphs in the browser. It is built for graphs with thousands of nodes and edges, and it pairs with a separate library called graphology: graphology handles the graph data model and algorithms, while Sigma.js handles rendering and interaction. If you have a graph dataset and want it displayed on a web page, Sigma.js is the rendering layer you would reach for.

How the two libraries split the work

The architecture is deliberately divided:

The site describes this as a symbiosis: graphology plus Sigma.js equals your web app. A practical consequence is that Sigma.js itself implements no graph algorithms. If you need layout computation, centrality metrics, or community detection, those come from graphology, and you render the result with Sigma.js.

Why WebGL matters here

Sigma.js renders graphs using WebGL. That is the main reason it can draw larger graphs faster than Canvas- or SVG-based solutions. The trade-off is stated plainly on the site: custom rendering is harder to develop with Sigma.js.

That gives a fairly clear dividing line:

• Choose Sigma.js when your graph is large (thousands of nodes and edges) and you want speed.
• Choose d3.js when your graph is small (a few hundred nodes and edges) and/or you need highly customized rendering.

Getting it into a project

For an existing project, the quickstart path is:

npm install graphology sigma

From there you follow the quickstart guide. If you are starting from nothing, the site points to a CodeSandbox to try it immediately.

For React applications, the recommended approach is the @react-sigma package. The interactive example on the Sigma.js homepage is built with it, and its source code is available to inspect.

What you can build with it

The site groups use cases into three levels:

Display

The most basic case: you already have a graph dataset with colors, sizes, and positions for each node — for example, a GEXF file exported from Gephi — and you want to visualize it on a web page.

Explore

You add interaction so users can dig into the graph: a search field, or seeing a node's neighborhood on hover.

Interact and customize

You build an application where users create and manipulate graphs — creating nodes on click, dragging and dropping nodes — or you personalize rendering, such as showing some nodes with pictures inside them and others differently.

Common questions

Can I use CSV data? Yes, but not directly. You process the data with graphology first, then render it with Sigma.js. The site links to an example of this.

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

Can I use it in React? Yes, via @react-sigma. The site also notes Angular support exists, though the excerpt is cut off at that point.

The short version: if your graph is large and you want it fast in the browser, Sigma.js plus graphology is the intended combination. If your graph is small or your rendering needs are unusual, d3.js is likely the better fit.