JSON is not readable by sigma.js
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 great by loading the first sample chart 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 not imagine it visualized. The JSON structure seems to me the same ...
Your JSON is not displayed in Sigma, because by default Sigma parser needs X and Y coordinates for nodes.
What you can do is either add the X and Y coordinates to the JSON file, or if you do not want to do this (you might want to apply a ForceAtlas layout to them, for example), then you can do something for example:
// 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 the ForceAtlas2 plugin in your scripts.
If you do not want to use ForceAtlas and just want a random layout, delete s.startForceAtlas2 (); line above.
You need to add x, y coordinates to your JSON, for example:
{ "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" }] }