Sigma.js is a modern JavaScript library for rendering and interacting with network graphs in the browser. It works in symbiosis with graphology, a multipurpose graph manipulation library.

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 …

Sigma.js utilizes a specific data model to represent and display graphs. This section provides an overview of the core attributes and functionalities related to nodes and edges in sigma.js.

Sigma.js utilizes a specific data model to represent and display graphs. This section provides an overview of the core attributes and functionalities related to nodes and edges in sigma.js.

Graph appearance can be inconsistent across different viewports. Node and edge sizes can be difficult to predict, especially in relation to positions, which can lead to overlap on smaller viewports.

Load this HTML in a browser, and you'll see a simple graph with two nodes connected by an edge. This serves as a foundational step to start exploring the capabilities of sigma.js.

A fundamental way to influence the look of your graph is by specifying sizes and colors for nodes and edges. As detailed in the data section of sigma.js documentation, it's essential to provide these …

// So we need to translate the screen x & y coordinates to the graph one by calling the sigma helper `viewportToGraph` const coordForGraph = renderer.viewportToGraph({ x: event.x, y: event.y }); // …

First we compute the extent (min & max values) for x and y coordinates in graph space. Then we normalize this space into a "square" (quotation marks hereafter explained) such that graphspace min …

Use degrees for node sizes: const degrees = graph.nodes().map((node) => graph.degree(node)); const minDegree = Math.min(...degrees); const maxDegree = Math.max(...degrees); const minSize = 2, …