sigma.js
a JavaScript library aimed at visualizing graphs of thousands of nodes and edges
Architecture
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.
graphology
handles graph data model & algorithms
sigma.js
handles graph rendering & interactions
your ♥ web app
Quick start
Use cases
Display
The most basic use case: You have a graph dataset, with colors, sizes and positions for each node. For instance, you exported a GEXF graph file from Gephi. You want to visualize it using on a web page.
Explore
You want to add interaction, so that your users can dig into the graph. You want to add a search field, and allow users to see the neighborhood of a node when hovering it.
Interact
You are developing a web application where users can create and manipulate graphs. You need users to be able to create nodes on click, and to drag and drop nodes.
Customize
You need to personalize the way your graphs are rendered. You need to display some nodes with pictures in them, and others differently.
Cookbook
-
How can I obtain drawable data from a CSV?
You will process the data with graphology, then render it with sigma.js. You can look at this CodeSandbox for instance.
-
What graph algorithms are implemented in sigma.js?
None in sigma.js, but graphology has a lot, from graph generators to metrics or even community detection. You can see an overview here.
-
Why should I use sigma.js and not d3.js?
Sigma.js renders graphs using WebGL. It allows drawing larger graphs faster than with Canvas or SVG based solutions. It also makes custom rendering way harder to develop. If you have small graphs (like a few hundreds of nodes and edges) and/or if you need very customized rendering, then d3.js is indeed a best fit for you.
-
Can I use sigma.js in my React application?
Yes, the best way is certainly to use the react-sigma-v2. The example on top of this page is developed using it, you can check the sourcecode to get an idea.
-
And within an Angular application?
Yes it is possible, but harder, because we do not have a wrapper yet. So you will have to bind sigma.js lifecycle to your app manually. It is not necessary too difficult though, please take a look on this repository which offers a quick example.
Go further
I want to know more
Look at the documentation.
I have a problem
Ask your questions on StackOverflow, or report bugs by opening a new GitHub issue.
I want to help
Contributions are welcome! Reading our contribution guide is a good start. You can also help us investigating existing issues or answering questions on StackOverflow.