Sigma.js

개요 / Overview

Sigma.js는 브라우저에서 대규모 네트워크 그래프를 렌더링하고 상호작용하는 데 특화된 JavaScript 라이브러리입니다. D3의 포스 레이아웃이 수백 개 노드 정도의 네트워크를 다룰 수 있는 반면, Sigma.js는 WebGL을 사용해 수만 개 — 심지어 수십만 개 — 의 노드와 엣지를 인터랙티브한 프레임 속도로 렌더링합니다. 네트워크 시각화 성능이 중요할 때 가장 먼저 찾게 되는 도구입니다.

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.

원래 파리 시앙스포(Sciences Po) médialab의 알렉시스 자코미(Alexis Jacomy)가 만든 Sigma.js는 v2에서 현대적인 TypeScript 코드베이스, 깔끔한 플러그인 아키텍처, 그리고 Graphology(견고한 JavaScript 그래프 자료구조 라이브러리)에 대한 일급 지원을 갖추고 처음부터 다시 작성되었습니다. Sigma.js는 렌더링을 담당하고, Graphology는 데이터 모델을 담당합니다. 이러한 관심사의 분리 덕분에 이 라이브러리는 유연하면서도 강력합니다.

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는 소셜 네트워크 분석, 인용 네트워크, 지식 그래프, 생물학적 네트워크 등 개체 간 관계가 주된 관심사인 모든 분야에서 흔히 사용됩니다. Sigma.js가 렌더링할 레이아웃을 내보낼 수 있는 Gephi 같은 그래프 분석 도구, 그리고 Neo4j 같은 백엔드 그래프 데이터베이스와도 잘 어울립니다.

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 기반 렌더링으로 10만 개 이상의 노드와 엣지를 인터랙티브한 속도로 처리
• WebGL-powered rendering handles 100K+ nodes and edges at interactive speeds
• Graphology를 기반으로 하여 알고리즘을 갖춘 견고한 그래프 자료구조 제공
• 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)
• GEXF와 GraphML 파일 형식 지원(Gephi 워크플로우에서 흔히 사용)
• Works with GEXF and GraphML file formats (common in Gephi workflows)
• 인터랙티브한 그래프 탐색을 위한 호버, 클릭, 드래그 이벤트
• Hover, click, and drag events for interactive graph exploration
• 강력한 타입 안전성을 갖춘 TypeScript 우선 코드베이스
• TypeScript-first codebase with strong type safety
• 가벼운 초점 — 한 가지 일(그래프 렌더링)을 탁월하게 수행
• Lightweight focus — does one thing (graph rendering) exceptionally well
• v2 재작성을 통한 활발한 개발(현대적 아키텍처)
• Active development with a v2 rewrite (modern architecture)

한계 / Limitations

• 네트워크/그래프 시각화에만 특화됨 — 범용 차트 라이브러리가 아님
• Specialized for network/graph visualization only — not a general charting library
• 레이아웃 알고리즘은 외부에서 제공하거나 플러그인(graphology-layout)을 통해 제공해야 함
• Layout algorithms must be provided externally or via plugins (graphology-layout)
• 내장 렌더러를 넘어서는 노드/엣지 외관 커스터마이징에는 셰이더 지식이 필요함
• Customizing node/edge appearance beyond built-in renderers requires shader knowledge
• v2 문서화는 아직 기능 세트를 따라잡고 있는 중
• 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
• 정적 이미지로 내보내려면 추가 작업이 필요함(Canvas 캡처)
• Export to static image requires additional work (Canvas capture)
• D3나 Cytoscape.js에 비해 커뮤니티 규모가 작음
• Smaller community compared to D3 or Cytoscape.js

이런 용도에 최적 / Best For

브라우저에서 대규모 네트워크 그래프를 렌더링하고 상호작용해야 할 때 Sigma.js가 올바른 선택입니다. 소셜 네트워크 탐색, 인용 네트워크 시각화, 지식 그래프 브라우징, 그리고 수천 개 노드에서의 성능이 중요한 모든 시나리오에서 뛰어난 성능을 발휘합니다. 시각화가 근본적으로 노드와 엣지에 관한 것이고 — 빠르고, 확대/축소 가능하고, 인터랙티브해야 한다면 — Sigma.js는 바로 이를 위해 만들어진 도구입니다.

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

npm으로 설치합니다:

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 });

GEXF 파일 불러오기(Gephi에서):

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는 단 하나의 시각화 유형, 즉 네트워크 다이어그램(노드-링크 그래프)에 특화되어 있습니다. 이 영역 내에서 방향 그래프와 무방향 그래프, 가중 엣지, 속성에 따른 노드 크기와 색상 지정, 엣지 색상과 두께, 곡선 엣지, 자기 루프, 다양한 엣지 렌더러(선, 화살표, 곡선), 노드 렌더러(원, 이미지, 테두리), 그리고 검색, 필터, 호버 하이라이트, 이웃 탐색 같은 인터랙티브 기능을 지원합니다. 네트워크가 아닌 시각화가 필요하다면 다른 도구를 사용해야 합니다.

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.