Sigma.js

Overview

Sigma.js is a JavaScript library dedicated to rendering and interacting with large network graphs in the browser. While D3’s force layout can handle networks of a few hundred nodes, Sigma.js uses WebGL to render graphs with tens of thousands — or even hundreds of thousands — of nodes and edges at interactive frame rates. It is the go-to tool when network visualization performance matters.

Originally created by Alexis Jacomy at Sciences Po’s médialab in Paris, Sigma.js has been rewritten from scratch in v2 with a modern TypeScript codebase, a clean plugin architecture, and first-class support for Graphology (a robust JavaScript graph data structure library). Sigma.js handles the rendering; Graphology handles the data model. This separation of concerns makes the library both flexible and powerful.

Sigma.js is commonly used for social network analysis, citation networks, knowledge graphs, biological networks, and any domain where relationships between entities are the primary focus. It pairs well with graph analysis tools like Gephi (which can export layouts that Sigma.js renders) and with backend graph databases like Neo4j.

Strengths

• WebGL-powered rendering handles 100K+ nodes and edges at interactive speeds
• Built on Graphology, providing a robust graph data structure with algorithms
• Smooth zoom, pan, and node interaction on large graphs
• Node and edge renderers are customizable and extensible
• Support for various layout algorithms (force-directed, circular, random)
• Works with GEXF and GraphML file formats (common in Gephi workflows)
• Hover, click, and drag events for interactive graph exploration
• TypeScript-first codebase with strong type safety
• Lightweight focus — does one thing (graph rendering) exceptionally well
• Active development with a v2 rewrite (modern architecture)

Limitations

• Specialized for network/graph visualization only — not a general charting library
• Layout algorithms must be provided externally or via plugins (graphology-layout)
• Customizing node/edge appearance beyond built-in renderers requires shader knowledge
• Documentation for v2 is still catching up to the feature set
• No built-in legend, tooltip, or annotation system
• Label rendering at scale requires careful configuration to avoid overlaps
• Export to static image requires additional work (Canvas capture)
• Smaller community compared to D3 or Cytoscape.js

Best For

Sigma.js is the right choice when you need to render and interact with large network graphs in the browser. It excels at social network exploration, citation network visualization, knowledge graph browsing, and any scenario where performance with thousands of nodes is critical. If your visualization is fundamentally about nodes and edges — and you need it to be fast, zoomable, and interactive — Sigma.js is purpose-built for this.

Getting Started

Install via npm:

npm install sigma graphology

Create a basic graph visualization:

import Graph from "graphology";
import Sigma from "sigma";

// Create a graph
const graph = new Graph();
graph.addNode("1", { label: "Node 1", x: 0, y: 0, size: 15, color: "#e63946" });
graph.addNode("2", { label: "Node 2", x: 1, y: 1, size: 10, color: "#457b9d" });
graph.addNode("3", { label: "Node 3", x: 1, y: -1, size: 10, color: "#2a9d8f" });
graph.addEdge("1", "2", { size: 3 });
graph.addEdge("1", "3", { size: 3 });
graph.addEdge("2", "3", { size: 1 });

// Render
const container = document.getElementById("graph-container");
const renderer = new Sigma(graph, container);

With a force-directed layout:

import forceAtlas2 from "graphology-layout-forceatlas2";

// Apply ForceAtlas2 layout
const settings = forceAtlas2.inferSettings(graph);
forceAtlas2.assign(graph, { settings, iterations: 600 });

Loading a GEXF file (from Gephi):

import { parse } from "graphology-gexf/browser";

const response = await fetch("network.gexf");
const gexf = await response.text();
const graph = parse(Graph, gexf);
const renderer = new Sigma(graph, container);

Supported Chart Types

Sigma.js is specialized for a single visualization type: network diagrams (node-link graphs). Within that domain, it supports directed and undirected graphs, weighted edges, node sizing and coloring by attributes, edge coloring and thickness, curved edges, self-loops, multiple edge renderers (line, arrow, curve), node renderers (circle, image, border), and interactive features like search, filter, hover highlight, and neighbor exploration. For non-network visualization needs, you should use a different tool.