I would like to discover sigma.js so I might use it in a project. I know already a little of d3 but through searching on the internet people mention that sigma is better for graphs and in my case , for example in graph databases sigma might be better. But I searched and I couldn't find a lot documentation about sigma or any tutorials. Even the examples in jay's website doesn't exist. Could someone advice me on where to start in order to learn sigma.js?
I would like to discover sigma.js so I might use it in a project. I know already a little of d3 but through searching on the internet people mention that sigma is better for graphs and in my case , for example in graph databases sigma might be better. But I searched and I couldn't find a lot documentation about sigma or any tutorials. Even the examples in jay's website doesn't exist. Could someone advice me on where to start in order to learn sigma.js?
Share Improve this question asked Dec 1, 2016 at 1:24 AkisAkis 1431 gold badge2 silver badges12 bronze badges 02 Answers
Reset to default 1I have found some tutorials on the GitHub of the Project:
https://github./jayal/sigma.js/tree/master/examples
Also in this website:
http://thewhyaxis.info/hairball/
And it's official page:
http://sigmajs/
For example as you can see here from the official tutorials page , a simple example could be the below:
For the Data:
{
"nodes": [
{
"id": "n0",
"label": "A node",
"x": 0,
"y": 0,
"size": 3
},
{
"id": "n1",
"label": "Another node",
"x": 3,
"y": 1,
"size": 2
},
{
"id": "n2",
"label": "And a last one",
"x": 1,
"y": 3,
"size": 1
}
],
"edges": [
{
"id": "e0",
"source": "n0",
"target": "n1"
},
{
"id": "e1",
"source": "n1",
"target": "n2"
},
{
"id": "e2",
"source": "n2",
"target": "n0"
}
]
}
For html:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#container {
max-width: 400px;
height: 400px;
margin: auto;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="sigma.min.js"></script>
<script src="sigma.parsers.json.min.js"></script>
<script>
sigma.parsers.json('data.json', {
container: 'container',
settings: {
defaultNodeColor: '#ec5148'
}
});
</script>
</body>
</html>
Which will result to:
This is a pretty nice and simple example : Github example
and the wiki of the sigma.js github repository is also well detailed : Sigma.js – Wiki