# sigma.js

a JavaScript library aimed at visualizing graphs of thousands of nodes and edges

## See sigma.js in action

Click here to explore a network of wikipedia pages about data visualization.

## 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

I want sigma.js in my existing project:

    npm install graphology sigma

Learn more on the library's GitHub repository

I start from nothing:

Try this CodeSandbox

## 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.

Launch live CodeSandbox

## 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.

Launch live CodeSandbox

## 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.

Launch live CodeSandbox

## Customize

You need to personalize the way your graphs are rendered. You need to display some nodes with pictures in them, and others differently.

Launch live CodeSandbox

## 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.