How do i "plug in" the plugins for sigma.js?

Question

Sigma.js lists several examples on their GitHub, but it is not clear from them what is required to load a plugin.

I have tried simply including a <script> tag pointing to the plugin's JavaScript file but that did not work. How do I import/use/copypaste the plugin to my site?

Maybe I should have mentioned that while I'm comfortable with Python, javascript isn't what you'd call my forte. — Tuomas, Apr 20 '13 at 22:19
It I understand it correctly, the plugins are just javascript files. I would think that you to download a plugin and "reference" in your html file. as in "script type="text/javascript" src = ...." — user1043144, Apr 21 '13 at 05:21
No, sorry, I tried that but it didn't work like that. The examples listed on the sigma.js site seem to have other stuff in them as well as the actual plugin functionality. — Tuomas, Apr 21 '13 at 13:21
sorry. another suggestion: would gexf-js help ? I am experimenting with it right now and happy with it. You can use python (networkx) to prepare the graph and export it in gexf format. with gexf-js you need nothing else than just to reference the gexf file. N.B: the standard write_gexf of networkx won't work. If needed I can share the codes I am using — user1043144, Apr 21 '13 at 18:28
Thanks for the good suggestion. I would like to do that, but the sigma.js exporter from Gephi does 95% of what I need with little effort, so I'm reluctant to give it up. My project is very, very similar to [this one](http://sunlight-embed.s3.amazonaws.com/2013/04/Taxes/network/interactive/index.html#), Except I'd like to have the mouse hover display an attribute in addition to the label of the node. — Tuomas, Apr 21 '13 at 18:41

score 8 · Accepted Answer · edited Jan 14 '15 at 19:53

First, include the sigma-files you need:

<script src="sigma/sigma.concat.js"></script>
<script src="sigma/plugins/sigma.parseGexf.js"></script>
<script src="sigma/plugins/sigma.forceatlas2.js"></script>

Then start your script;

<script type="text/javascript">
function init() {
  // Instanciate sigma.js and customize rendering :
   sigInst = sigma.init(document.getElementById('graph')).drawingProperties({
    defaultLabelColor: '#fff',
    defaultLabelSize: 14,
    defaultLabelBGColor: '#fff',
    defaultLabelHoverColor: '#000',
    labelThreshold: 6,
    defaultEdgeType: 'curve' 

  }).graphProperties({
    minNodeSize: 2,
    maxNodeSize: 5,
    minEdgeSize: 1,
    maxEdgeSize: 1

  }).mouseProperties({
    maxRatio: 32
  });

  // Parse a GEXF encoded file to fill the graph
  // (requires "sigma.parseGexf.js" to be included)
  sigInst.parseGexf('getgefx.php');


  sigInst.bind('downnodes',function(event){
    var nodes = event.content;
    var neighbors = {};
    sigInst.iterEdges(function(e){
      if(nodes.indexOf(e.source)>=0 || nodes.indexOf(e.target)>=0){
        neighbors[e.source] = 1;
        neighbors[e.target] = 1;

      } 
    }).iterNodes(function(n){
      if(!neighbors[n.id]){
        n.attr['temphidden'] = 1;
        n.attr['oldcolor'] = n.color;
        // var c = sigma.tools.getRGB(n.color);
        n.color = "#eee"; // #ccc";

        // n.color = "rgba("+c['r']+","+c['g']+","+c['b']+",0.2)";
      }
    }).draw(2,2,2);
  }).bind('upnodes',function(){
    sigInst.iterNodes(function(n){
        if(n.attr['temphidden'] == 1) {
            n.color = n.attr['oldcolor'];
            n.attr['temphidden'] = 0;
        }

    }).draw(2,2,2);
  });
  // Draw the graph :
  sigInst.draw(2,2,2);
  sigInst.startForceAtlas2();
  var isRunning = true;
  document.getElementById('stop-layout').addEventListener('click',function(){
    if(isRunning){
      isRunning = false;
      sigInst.stopForceAtlas2();
      document.getElementById('stop-layout').childNodes[0].nodeValue = 'Start Layout';
    }else{
      isRunning = true;
      sigInst.startForceAtlas2();
      document.getElementById('stop-layout').childNodes[0].nodeValue = 'Stop Layout';
    }
  },true);

}

if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", init, false);
} else {
  window.onload = init;
}
</script>

How do i "plug in" the plugins for sigma.js?

1 Answers1