Sigma.js — GPU-Powered Graph Visualization for the Web

Introduction

Sigma.js is a graph visualization library that leverages WebGL to render networks with thousands of nodes and edges at interactive frame rates. It pairs with Graphology as its graph data model, separating data manipulation from rendering concerns.

What Sigma.js Does

• Renders large-scale graph networks using WebGL shaders
• Supports interactive panning, zooming, and node hovering
• Handles node and edge labeling with automatic collision avoidance
• Provides event hooks for click, hover, and drag interactions
• Works with Graphology for graph algorithms like centrality and community detection

Architecture Overview

Sigma.js uses a layered WebGL renderer with separate programs for nodes, edges, and labels. The graph data lives in a Graphology instance, and Sigma subscribes to its events to trigger efficient re-renders. Custom node and edge renderers can be written as WebGL shader programs. Camera state (zoom, pan, rotation) is managed internally with smooth animation support.

Self-Hosting & Configuration

• Install sigma and graphology as peer dependencies
• Create a Graphology graph and populate it with nodes (x, y, size, color) and edges
• Mount a Sigma instance on a DOM container element
• Customize rendering with settings for label density, edge curvature, and node shapes
• Use @sigma/node-image or @sigma/edge-curve plugins for extended visual options

Key Features

• WebGL rendering handles graphs with tens of thousands of nodes smoothly
• Layout-agnostic design works with any positioning algorithm (ForceAtlas2, circular, random)
• Plugin architecture for custom node shapes, edge types, and interaction modes
• Camera animations for programmatic zoom-to-node and fly-to-region transitions
• Typed events system for building interactive graph exploration UIs

Comparison with Similar Tools

• Cytoscape.js — Canvas-based with built-in layouts; Sigma.js is faster for large graphs via WebGL
• D3-force — SVG-based force simulation; Sigma.js scales better for large networks
• vis-network — Simpler API with built-in physics; Sigma.js offers more rendering control
• Gephi — Desktop application for graph analysis; Sigma.js brings similar visualization to the browser

FAQ

Q: How many nodes can Sigma.js handle? A: It comfortably renders graphs with 50,000+ nodes and 100,000+ edges in WebGL, depending on hardware.

Q: Does Sigma.js include layout algorithms? A: No. Use Graphology layout packages like graphology-layout-forceatlas2 and pass the positioned graph to Sigma.

Q: Can I export the visualization as an image? A: Yes. Use the built-in sigma.toCanvas() or sigma.toSVG() methods.

Q: Does it support directed and weighted edges? A: Yes. Edge types, arrows, and thickness can be configured per edge or globally.

Sources

• https://github.com/jacomyal/sigma.js
• https://www.sigmajs.org