sigma

Sigma.js

Sigma.js is an open-source JavaScript library aimed at visualizing graphs of thousands of nodes and edges, mainly developed by @jacomyal and @Yomguithereal.

Overview

Here are some quick insights on the codebase. To know more on these topics, please read the documentation.

Architecture

Since version v2, sigma.js focuses on the management of graph display: rendering, interaction... The graph model is managed in a separate library called graphology, which is packed with convenience methods to manage graph data structures, and a lot of satellite libraries to handle various graph-related problems (metrics, community detection, layout algorithms...).

Graphology website offers a list of these libraries. Most of them can help you solve problems in your sigma.js based web applications.

Rendering

Sigma.js uses WebGL to render graphs. This makes it good at rendering medium to larger graphs in web pages (thousands of nodes and edges or more). It is also possible to customize rendering, but it is harder than it would be with SVG or Canvas based solutions.

Each way to draw a node or an edge is implemented as a program. You can develop your own, or use the owns provided by sigma. You can check this example to see how to use multiple programs. Also, you can check the list of available programs here.

Installation

You can install sigma (and graphology which is required for sigma to work) in your JavaScript or TypeScript project using npm:

npm install graphology sigma

Examples

The examples folder contains a series of self-contained TypeScript projects that you can either browse and edit on CodeSandbox or install locally likewise:

git clone [e-mail]:jacomyal/sigma.js.git
cd sigma.js
npm install
cd packages/examples
npm start --example=load-gexf-file # Change this to the desired example

List of available examples

• Fetching and displaying a graph contained in a gexf file (fallback link)
• Using node & edge reducers to handle interactivity (fallback link)
• Fetching, parsing & wrangling a CSV file to create a network map (fallback link)
• Handling drag and drop of nodes as well as node & edge creation on click (fallback link)
• Displaying arbitrary elements, such as cluster labels, synchronized with the network (fallback link)
• Applying different animated layout algorithms to a network (fallback link)
• Displaying nodes in various custom ways (fallback link)
• Saving the graph as a PNG image (fallback link)
• Use events to implement interactions (fallback link)
• See how sigma behaves with larger graphs (fallback link)

Also, a more realistic sigma.js based web application is available in the demo folder. It aims to show a real-world usecase, and is the main showcase of sigma.js website.

Testing

Some minor helpers are unit tested, but the main way sigma.js is tested is with generated screenshots. Those screenshots are generated with Puppeteer on a headless Chrome/Chromium. Also, there are now some benchmarking scenarii, to ensure some features do not bring a bad impact on performances.

You can check that everything is fine (unit tests and screenshots) by simply running:

npm run test

If at some point, you actually have a good reason to break some screenshots, you can run npm run e2e:generate-screenshots to erase reference screenshots.

Benchmarking

You can run the benchmark scenarii by running:

cd path/to/sigma.js
cd packages/sigma
npm run e2e:benchmark -- --filename my-report.json

This will generate a JSON report at test/e2e/reports/my-report.json.

Then, you can compare it to some reference report, by running:

cd path/to/sigma.js
cd packages/sigma
npm run e2e:compare-benchmarks -- --reference test/e2e/reports/reference-report.json --report test/e2e/reports/my-report.json

Website

The current website is based on Docusaurus, with a static homepage. It is located in the website folder. It also showcases the React.js based demo available in the demo folder in an iframe. The website itself does not need any build step, though the demo does.

The homepage and identity have been kindly designed by Robin de Mourat from the Sciences-Po médialab team.

Read the dedicated README to know more on how to build it.

Contributing

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 documentation here.