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?

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?

• javascript
• visualization
• sigma.js

Share Improve this question Follow edited Jul 15, 2017 at 20:27 user4157124 2,9981414 gold badges3131 silver badges4646 bronze badges asked Apr 20, 2013 at 22:09 TuomasTuomas 38555 silver badges1212 bronze badges 5

• Maybe I should have mentioned that while I'm fortable with Python, javascript isn't what you'd call my forte. – Tuomas Commented Apr 20, 2013 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 Commented Apr 21, 2013 at 5: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 Commented Apr 21, 2013 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 Commented Apr 21, 2013 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, Except I'd like to have the mouse hover display an attribute in addition to the label of the node. – Tuomas Commented Apr 21, 2013 at 18:41

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8 +150

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>