Menu
I have this page
<html>
<head>
<style type="text/css">
#container {
max-width: 800px;
height: 800px;
margin: auto;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="sigma.min.js"></script>
<script src="plugins/sigma.parsers.json.min.js"></script>
<script>
sigma.parsers.json('graph.json', {
container: 'container',
settings: {
defaultNodeColor: '#ec5148'
}
});
</script>
</body>
</html>
which works fine loading the first example graph provided here and below
{
"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"
}
]
}
But when I try to load my JSON
{"nodes":[ {
"id": "chr1",
"label": "Bob",
"size": 8.75
},
{
"id": "chr10",
"label": "Alice",
"size": 14.75
} ],"edges":[ {
"id": "1",
"source": "chr1",
"target": "chr10"
} ]}
I can't get it visualised. The JSON structure seems exactly the same to me...
716
Your JSON doesn't show up in Sigma because by default Sigma's parser needs X and Y coordinates for the nodes.
What you can do is either to add X and Y coordinates to JSON file, or if you don't want to do that (probably you will want to apply ForceAtlas layout to them, for example), then you could do something like this:
// these are just some preliminary settings
var g = {
nodes: [],
edges: []
};
// Create new Sigma instance in graph-container div (use your div name here)
s = new sigma({
graph: g,
container: 'graph-container',
renderer: {
container: document.getElementById('graph-container'),
type: 'canvas'
},
settings: {
minNodeSize: 8,
maxNodeSize: 16
}
});
// first you load a json with (important!) s parameter to refer to the sigma instance
sigma.parsers.json(
'/data/your-jsonfile.json',
s,
function() {
// this below adds x, y attributes as well as size = degree of the node
var i,
nodes = s.graph.nodes(),
len = nodes.length;
for (i = 0; i < len; i++) {
nodes[i].x = Math.random();
nodes[i].y = Math.random();
nodes[i].size = s.graph.degree(nodes[i].id);
nodes[i].color = nodes[i].center ? '#333' : '#666';
}
// Refresh the display:
s.refresh();
// ForceAtlas Layout
s.startForceAtlas2();
}
);
You will also need to include ForceAtlas2 plugin in your scripts.
If you don't want to use ForceAtlas and just want random layout, remove s.startForceAtlas2(); string above.
143
You need to add the x,y coords to your JSON, like this:
{
"nodes": [
{
"id": "chr1",
"x": 0,
"y": 0,
"label": "Bob",
"size": 8.75
},
{
"id": "chr10",
"label": "Alice",
"x": 3,
"y": 1,
"size": 14.75
}
],
"edges": [{
"id": "1",
"source": "chr1",
"target": "chr10"
}]
}
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
