sigma.js on GitHub (jacomyal/sigma.js) — FAQ & Similar Projects · GitHub.Locker

sigma.js README

The project's README from github.com/jacomyal/sigma.js. As one markdown file: README.md.

Website | Documentation | Storybook | Mastodon

[!NOTE] Sigma v4 is now available as an alpha release. See v4.sigmajs.org for the website, or the v4 branch for the source code.

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

How to use in your project

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

Installation: Add sigma and graphology to your project by running the following command:
```
npm install sigma graphology
```

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

How to develop locally

To run the Storybook locally:

git clone [email protected]:jacomyal/sigma.js.git
cd sigma.js
npm install
npm run start

This will open the Storybook in your web browser, which live reloads when you modify the stories or the package sources.

Resources

GitHub Project: The source code and collaborative development efforts for Sigma.js are hosted on GitHub.
Website: The official website, sigmajs.org, kindly designed by Robin de Mourat from the Sciences-Po médialab team, showcases the library's capabilities.
Documentation: A detailed documentation, built with Docusaurus, is available at sigmajs.org/docs. It provides extensive guides and API references for users.
Storybook: Interactive examples can be found at sigmajs.org/storybook.
Demo: A comprehensive demo, available at sigmajs.org/demo, features a full-featured React-based web application utilizing Sigma.js.

How to contribute

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.

How to start a new package

Run npm run createPackage from the project root. It will:

Ask you the new package name
Copy the packages/template folder
Update the new package package.json entries (name, description, exports)
Update various other files (buildable packages list in tsconfig.json, Preconstruct compatible packages list in package.json...)

Searching Database…

12.2K ·GitHub

What is this?

Sigma.js is an open-source JavaScript library for visualizing graphs of thousands of nodes and edges using WebGL rendering.

Is it a standalone app or a library I add to my own project?

It's a library you install into a JavaScript or TypeScript project, built on top of the graphology graph data structure library.

How do I add it to my project?

Install sigma and graphology as dependencies, then import sigma and create a new Sigma instance with your graph data and a target DOM container.

Do I need graphology or can I use any graph format?

Yes, sigma requires graphology for the underlying graph data structure; you build your graph with graphology and pass it to Sigma.

Is the stable version what I should use, or is there a newer one to watch for?

The current version is stable, but a v4 alpha is already available with its own site and branch, so APIs may shift if you move to it.

Does it run in any browser or does it need special hardware?

It runs in standard web browsers, relying on WebGL for rendering performance with large graphs.

Can I preview examples before building my own graph?

Yes, interactive examples are available in the Storybook, and a full-featured React demo app is hosted at sigmajs.org/demo.

Can I create my own sigma package from a template?

Running `npm run createPackage` from the project root copies the packages/template folder and scaffolds a new package with updated config and metadata.

Is sigma.js actively maintained?

Yes, it's a monorepo with ongoing CI (build, tests, website workflows) and active development toward a v4 release.

What are similar projects?

cytoscape.js, G6, uPlot, cesium, apexcharts.js, plotly.js, charts, mapbox-gl-js

Which topics is it in?

graphs, network-analysis, web-application, knowledge, social-network, analysis, graph, interactive, webgl, template, rendering, visualization

Creator: jacomyal
Size: 62 MB
Stars: 12.2K
Updated: CommitOct 16 Release[email protected]Oct 15
Age: 14y
Commits · 90 Days