JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://testprogramming.googlecode.com/svn-history/r391/trunk/javascript/canvas/sigma.js/js/sigma.min.js"></script>
<script src="https://testprogramming.googlecode.com/svn-history/r391/trunk/javascript/canvas/sigma.js/js/sigma.parseGexf.js"></script>
<div id="graph"></div>
CSS
#graph {
background: #222;
position: absolute;
width: 100%;
height: 100%;
}
JavaScript
function init() {
// Instanciate sigma.js and customize rendering :
var sigInst = sigma.init(document.getElementById('graph')).drawingProperties({
defaultLabelColor: '#fff',
defaultLabelSize: 14,
defaultLabelBGColor: '#fff',
defaultLabelHoverColor: '#000',
labelThreshold: 10,
defaultEdgeType: 'curve'
}).graphProperties({
minNodeSize: 0.5,
maxNodeSize: 15,
minEdgeSize: 1,
maxEdgeSize: 1,
sideMargin: 50
}).mouseProperties({
maxRatio: 32
});
// Parse a GEXF encoded file to fill the <graph></graph>
// (requires "sigma.parseGexf.js" to be included)
sigInst.parseGexf('https://dl.dropboxusercontent.com/u/9598149/facebook.gexf');
// Draw the graph :
sigInst.draw();
}
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
} else {
window.onload = init;
}