Graph Visualization with Sigma.js: Building Interactive Network Views

Why Sigma.js?

Web-based graph visualization has three options:

1. D3.js — Flexible but slow beyond 500 nodes (SVG-based)
2. Cytoscape.js — Good for biological networks, less flexible rendering
3. Sigma.js — WebGL-based, handles 10K+ nodes at 60fps

Sigma.js is the right choice for knowledge graphs. It's lightweight (~80KB gzipped), uses WebGL for rendering, and pairs naturally with the Graphology library for graph algorithms.

Basic Setup

npm install sigma graphology graphology-layout-forceatlas2

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

const graph = new Graph();

// Add nodes
graph.addNode("neo4j", { label: "Neo4j", size: 15, color: "#10b981", x: 0, y: 0 });
graph.addNode("graphrag", { label: "GraphRAG", size: 12, color: "#6366f1", x: 1, y: 1 });

// Add edge
graph.addEdge("neo4j", "graphrag", { size: 2, color: "#374151" });

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

Force-Directed Layout

Raw positioning produces unusable graphs. ForceAtlas2 applies physical simulation — nodes repel, edges attract:

import forceAtlas2 from "graphology-layout-forceatlas2";

// Assign positions
forceAtlas2.assign(graph, {
  iterations: 100,
  settings: {
    gravity: 0.5,
    scalingRatio: 10,
    slowDown: 1,
  },
});

Interactivity

sigma.on("clickNode", (event) => {
  const nodeId = event.node;
  const data = graph.getNodeAttributes(nodeId);
  window.location.href = `/tag/${encodeURIComponent(nodeId)}`;
});

sigma.on("enterNode", (event) => {
  document.getElementById("tooltip").textContent =
    graph.getNodeAttribute(event.node, "label");
});

Performance Tips

• Use minCameraRatio / maxCameraRatio to limit zoom bounds
• Batch node additions: add all nodes, then all edges
• Use worker-based layout computation for large graphs
• Set enableEdgeEvents: false unless you need edge interactions

The interactive knowledge graph on this site's homepage is built with Sigma.js — open your browser's dev tools to inspect how it works.