-
Notifications
You must be signed in to change notification settings - Fork 2
Home
This wiki is the documentation for the version 1.0.0 of sigma, which hasn't been released yet. The reason can be seen here. So, it is adviced not to use this version in production yet, or at least to be aware that the API or the settings naming might change soon.
However, if you use it, your feedbacks are welcome!
Sigma is a JavaScript library to display graphs. It has been designed as an engine that you can customize and use to develop highly interactive Web applications that show graph visualizations. Here is a short list of the most important features:
- Custom rendering: You can use the Canvas or WebGL built-in renderers, or even write your own. And the built-in renderers also provide a lot of ways to already customize the rendering.
- Interactivity oriented: You can catch when the users clicks or rolls the mouse over a node. You can catch when the user drags the graph or zoom in, and always know the position of the graph relatively to the screen. And much more.
- Powerful graph model: Sigma is just a rendering engine, but you might want to do more, like running your own graph algorithms. For that, sigma's graph model is customizable, and you can add your own custom indexes on the data.
- Extendable: It is easy to develop plugins or simple snippets to augment sigma's features. Some are already available in the main repository to read some popular graph file formats, or to run complex layout algorithms, for instance.
- Compatibility: Sigma runs on all modern browsers that support Canvas, and works faster on browser with WebGL support.
Any instance of sigma is basically a graph model and a controller. The graph model is the part of sigma that helps manipulating the data, and the controller provides some useful methods to interface the rendering process, the data and your application.
Also, it is possible to bind any instance of sigma to one or more cameras and renderers. The renderers are the components that actually render the graph. The cameras work exactly as in video games, they are the components that make possible to move in the graph with your mouse or the zoom in with your mouse wheel, for instance. Each renderer works with one and exactly one camera, but it is possible to bind several renderers to the same camera.
In most cases, you will just need to instanciate sigma with one camera and one controller. And sigma provides simple ways to be initialized for the most common usages. Here is a basic example:
<!DOCTYPE html>
<html>
<head>
<title>Basic sigma.js example</title>
<style type="text/css">
body {
margin: 0;
}
#container {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="./sigma.min.js"></script>
<script>
// Let's first initialize sigma:
var s = new sigma('container');
// Then, let's add some data to display:
s.graph.addNode({
// Main attributes:
id: 'n0',
label: 'Hello',
// Display attributes:
x: 0,
y: 0,
size: 1,
color: 'blue'
}).addNode({
// Main attributes:
id: 'n1',
label: 'World !',
// Display attributes:
x: 1,
y: 1,
size: 1,
color: 'green'
}).addEdge({
id: 'e0',
// Reference extremities:
source: 'n0',
target: 'n1'
});
// Finally, let's ask our sigma instance to refresh:
s.refresh();
</script>
</body>
</html>Anytime, it is easy to customize how sigma renders your graph by overriding some settings. The available settings, their default values and what they do is described here.
For instance, here is how to draw the edges with a specific color instead of the color of their source:
s.settings({
edgeColor: 'default',
defaultEdgeColor: 'grey'
});