Website | Documentation | Storybook
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.
To integrate sigma into your project, follow these simple steps:
-
Installation: Add
sigma
andgraphology
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"));
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.
- 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.
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.