sigma.js README

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

Build Status


Sigma.js

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:

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

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

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:

sigma.js (jacomyal/sigma.js)

Searching Database…

12.2K ·GitHub
Sigma.js
Что это такое?Sigma.js — это библиотека JavaScript с открытым исходным кодом для визуализации графов из тысяч узлов и рёбер с помощью отрисовки на WebGL.
Это самостоятельное приложение или библиотека, которую я добавляю в свой проект?Это библиотека, которую устанавливают в проект на JavaScript или TypeScript; она построена на основе библиотеки структур данных графов graphology.
Как добавить её в мой проект?Установите sigma и graphology как зависимости, затем импортируйте sigma и создайте новый экземпляр Sigma с вашими данными графа и целевым DOM-контейнером.
Нужен ли мне graphology или можно использовать любой формат графа?Да, sigma требует graphology для базовой структуры данных графа; вы строите граф с помощью graphology и передаёте его в Sigma.
Стоит ли использовать стабильную версию или стоит следить за более новой?Текущая версия стабильна, но уже доступна альфа-версия v4 со своим сайтом и веткой, так что API могут измениться, если вы перейдёте на неё.
Работает ли она в любом браузере или нужно специальное оборудование?Она работает в стандартных веб-браузерах и использует WebGL для быстрой отрисовки больших графов.
Можно ли посмотреть примеры, прежде чем создавать свой граф?Да, интерактивные примеры есть в Storybook, а полнофункциональное демо-приложение на React размещено по адресу sigmajs.org/demo.
Можно ли создать свой пакет sigma на основе шаблона?Запуск `npm run createPackage` из корня проекта копирует папку packages/template и создаёт новый пакет с обновлёнными конфигурацией и метаданными.
Ведётся ли активная поддержка sigma.js?Да, это монорепозиторий с постоянной CI-интеграцией (сборка, тесты, рабочие процессы сайта) и активной разработкой к релизу v4.
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 16Release[email protected]Oct 15
Age
14y
Commits · 90 Days