handles graph data model & algorithms
handles graph rendering & interactions
your ♥ web app
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.
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.
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.
You need to personalize the way your graphs are rendered. You need to display some nodes with pictures in them, and others differently.
Frequently asked questions
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 ForceAtlas2 layout to various metrics or even community detection. You can see an overview in the documentation.
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. 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 necessarily too difficult though, please take a look on this repository which offers a quick example.
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.