jacomyal/sigma.js

Website | Documentation | Mastodon

Sigma.js is an open-source JavaScript library aimed at visualizing graphs of thousands of nodes and edges using WebGL, and built on top of graphology.

To integrate sigma into your project, follow these simple steps:

1. Installation: Add sigma and graphology to your project by running the following command:

   npm install sigma graphology

2. Usage: Import sigma into your JavaScript or TypeScript file:

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

   Then, create a new Sigma instance with your graph data and target container:

   const graph = new Graph();
   graph.addNode("1", { label: "Node 1", x: 0, y: 0, size: 10, color: "blue" });
   graph.addNode("2", { label: "Node 2", x: 1, y: 1, size: 20, color: "red" });
   graph.addEdge("1", "2", { size: 5, color: "purple" });
   
   const sigmaInstance = new Sigma(graph, document.getElementById("container"));

Sigma ships as a family of packages living in this monorepo. Install only what you need:

• @sigma/node-image: node program that renders images
• @sigma/node-border: node program that renders concentric discs
• @sigma/node-piechart: node program that renders nodes as piecharts
• @sigma/layer-leaflet: plugin to set a Leaflet map in background
• @sigma/layer-maplibre: plugin to set a MapLibre map in background
• @sigma/layer-webgl: helpers to draw custom WebGL layers
• @sigma/export-image: captures snapshots of sigma instances as images
• @sigma/utils: utility functions to ease sigma usage

• GitHub Project: The source code and collaborative development efforts for Sigma.js are hosted on GitHub.
• Website: The official website, sigmajs.org, showcases the library's capabilities.
• Documentation: A detailed documentation is available at sigmajs.org/docs. It provides extensive guides, interactive examples, and API references for users.

To run the website locally:

git clone https://github.com/jacomyal/sigma.js.git
cd sigma.js
npm install
npm run start

This will open the website in your web browser (including all its live examples), which live reloads when you modify the examples or the package sources.

You can contribute by submitting issues tickets and proposing pull requests. Make sure that tests and linting pass before submitting any pull request.

You can also browse the related CONTRIBUTING.md guide.

Sigma is developed by Alexis Jacomy and Benoît Simard at OuestWare, together with Guillaume Plique from the Sciences Po médialab, who also maintains graphology.

The project was initially supported by Sciences Po médialab through the v1 and v2 development. OuestWare has provided continuous support since, and gdotv actively sponsored the v3 and v4 development. The current website was designed by Robin de Mourat.

Since v4, sigma's development also includes help from LLMs. They are used to draft mechanical code, while the architecture, API design, and core logic remain human-authored. Notably, they have been used for the following features:

• GLSL handling in programs generations
• Styles and primitives engines
• Label attachments rendering

OuestWare offers professional support, custom development, and consulting around sigma. Reach out at contact@ouestware.com.