gistfile1.js

  sigma.utils.pkg('sigma.canvas.edges');
  sigma.canvas.edges.t = function(edge, source, target, context, settings) {
    var color = edge.color,
        prefix = settings('prefix') || '',
        edgeColor = settings('edgeColor'),
        defaultNodeColor = settings('defaultNodeColor'),
        defaultEdgeColor = settings('defaultEdgeColor');

    if (!color)
      switch (edgeColor) {
        case 'source':
          color = source.color || defaultNodeColor;
          break;
        case 'target':
          color = target.color || defaultNodeColor;
          break;
        default:
          color = defaultEdgeColor;
          break;
      }

    context.strokeStyle = color;
    context.lineWidth = 11;
    //context.lineWidth = edge[prefix + 'size'] || 1;
    context.beginPath();
    context.moveTo(
      source[prefix + 'x'],
      source[prefix + 'y']
    );
    context.lineTo(
      source[prefix + 'x'],
      target[prefix + 'y']
    );
    context.lineTo(
      target[prefix + 'x'],
      target[prefix + 'y']
    );
    context.stroke();
  };

  var s,
      g = {
        nodes: [],
        edges: []
      },
      colors = {
        starter:   '#617db4',
        commenter: '#668f3c',
        idea:      '#c6583e',
        edge:      '#b956af'
      };


  getCsv('/sna.csv',function(data){

    //------- Node related functions --------

    nodes = function(type, id, label){
      return _nodes[type][id] ||
        (_nodes[type][id] = defaultNode(type, id, label));
    }
    // _nodes['starter'][1] => {id: 1, label: 'denny'}
    // _nodes['idea'][1]    => {id: 1, label: 'ventilation advisor'}
    _nodes = {
      starter:   {},
      commenter: {},
      idea:      {}
    };

    var nodeId = function(type, id){
      return type + '-' + id;
    };

    var defaultNode = function(type, id, label, x, y, size, color){
      return {
        id: nodeId(type, id),
        label: label,
        x: x || Math.random(),
        y: y || Math.random(),
        size: size || 0,
        color: color || colors[type]
      };
    };

    var starter = function(entry){
      return nodes('starter',   entry.starter, entry.starter);
    };
    var commenter = function(entry){
      return nodes('commenter', entry.commenter, entry.commenter);
    };
    var idea = function(entry){
      return nodes('idea',      entry.idea, entry.idea);
    };

    //------- End node related functions --------

    edges = {};

    edgeId = function(from, to){
      return from + "-" + to;
    }

    for (var i = 0, l = data.length; i < l; i ++) {
      var entry      = data[i];
      var _starter   = starter(entry);
      var _commenter = commenter(entry);
      var _idea      = idea(entry);

      _starter.size++;
      _commenter.size++;
      _idea.size++;

      var permutations = [
        ['starter', 'commenter'],['starter', 'idea'],
        ['commenter', 'idea']
      ];
      for (var j = 0, l1 = permutations.length; j < l1; j ++) {
        var from = permutations[j][0];
        var to   = permutations[j][1];
        var fromId = eval("_" + from).id;
        var toId   = eval("_" + to).id;
        edges[edgeId(fromId, toId)] = {
          id: edgeId(fromId, toId),
          source: fromId,
          target: toId,
          size: 1,
          color: colors['edge']
        };
      }
    }

    g.nodes = _.values(_nodes.starter)
      .concat(_.values(_nodes.commenter))
      .concat(_.values(_nodes.idea));
    g.edges = _.values(edges);

    // Instanciate sigma:
    s = new sigma({
      graph: g,
      renderer: {
        // IMPORTANT:
        // This works only with the canvas renderer, so the
        // renderer type set as "canvas" is necessary here.
        container: document.getElementById('graph-container'),
        type: 'canvas'
      }
    });