app/views/tag/graph.html.erb

<!DOCTYPE html>
<html lang="<%= I18n.locale || 'en' %>">
  <head>
    <meta charset="utf-8" />
    <title>&#127880; Public Lab<%= ": "+(@title || params[:action].capitalize) %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <%= stylesheet_link_tag "application", :media => "all" %>
    <%= javascript_include_tag "application" %>
  </head>
  <body>

<style>
html, body {
  background: #efefff;
}
#cytoscape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
</style>

<script src="/lib/cytoscape/dist/cytoscape.min.js" type="text/javascript"></script>

<script>module = {}</script>

<script type="text/javascript" src="/lib/jlouvain/jLouvain.js"></script>

<div id="cytoscape"></div>

<script>
  var cy, community, c_result;

  (function() {

  $.ajax({
    url : '/tag/graph.json?limit=' + <%= params[:limit] || 250 %>,
    type: 'GET',
    success: function(response){
      setup_cytoscape(response);
    }
  });

  function parse_cyto_data(data) {
    var output = {
      tagnames: [],
      nodes: [],
      edges: []
    }

    data['tags'].forEach(function(tag) {
      output.tagnames.push(tag.name);
      output.nodes.push({ data: {
        id: tag.name,
        weight: tag.count,
        href: '/tag/' + tag.name
      } });
    });
    data['edges'].forEach(function(edge) {
      if (output.tagnames.includes(edge.from) && output.tagnames.includes(edge.to)) {
        output.edges.push({
          data: {
            id: edge.from + "_" + edge.to,
            source: edge.from,
            target: edge.to,
            weight: Math.random()*10+3 // <= dummy value for jlouvain
          }
        });
      }
    });
    return output;
  }

  function setup_cytoscape(data) {

    var data = parse_cyto_data(data),
        weights = data.nodes.map(function(aa){ return aa.data.weight });

    weights = weights.sort(function(a,b){return parseFloat(a) > parseFloat(b) ? -1 : 1 });

    var max = weights[0],
        min = weights.reverse()[0];

    cy = cytoscape({
      container: document.getElementById('cytoscape'),
      elements: {
        nodes: data.nodes,
        edges: data.edges
      },

      layout: {
        name: 'cose',

        // Called on `layoutready`
        ready: function(){},

        // Called on `layoutstop`
        stop: function(){},

        // Whether to animate while running the layout
        // true : Animate continuously as the layout is running
        // false : Just show the end result
        // 'end' : Animate with the end result, from the initial positions to the end positions
        animate: true,

        // Easing of the animation for animate:'end'
        animationEasing: undefined,

        // The duration of the animation for animate:'end'
        animationDuration: undefined,

        // A function that determines whether the node should be animated
        // All nodes animated by default on animate enabled
        // Non-animated nodes are positioned immediately when the layout starts
        animateFilter: function ( node, i ){ return true; },


        // The layout animates only after this many milliseconds for animate:true
        // (prevents flashing on fast runs)
        animationThreshold: 250,

        // Number of iterations between consecutive screen positions update
        refresh: 20,

        // Whether to fit the network view after when done
        fit: true,

        // Padding on fit
        padding: 30,

        // Constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
        boundingBox: undefined,

        // Excludes the label when calculating node bounding boxes for the layout algorithm
        nodeDimensionsIncludeLabels: false,

        // Randomize the initial positions of the nodes (true) or use existing positions (false)
        randomize: false,

        // Extra spacing between components in non-compound graphs
        componentSpacing: 100,

        // Node repulsion (non overlapping) multiplier
        nodeRepulsion: function( node ){ return 2048; },

        // Node repulsion (overlapping) multiplier
        nodeOverlap: 50,

        // Ideal edge (non nested) length
        idealEdgeLength: function( edge ){ return 100; },

        // Divisor to compute edge forces
        edgeElasticity: function( edge ){ return 32; },

        // Nesting factor (multiplier) to compute ideal edge length for nested edges
        nestingFactor: 1.2,

        // Gravity force (constant)
        gravity: 1,

        // Maximum number of iterations to perform
        numIter: 1000,

        // Initial temperature (maximum node displacement)
        initialTemp: 1000,

        // Cooling factor (how the temperature is reduced between consecutive iterations
        coolingFactor: 0.99,

        // Lower temperature threshold (below this point the layout will end)
        minTemp: 1.0,

        // Pass a reference to weaver to use threads for calculations
        weaver: false
      },

      style: [
        {
          selector: 'node',
          style: {
            'width': 'mapData(weight, ' + min + ',' + max + ', 30, 150)',
            'height': 'mapData(weight, ' + min + ',' + max + ', 30, 150)',
            'background-color': '#888',
            'label': 'data(id)',
            'font-size': 11,
            'text-valign': 'center',
            'color': 'white',
            'border-width': 3,
            'border-color': 'white',
            'text-outline-width': 1.5,
            'text-outline-color': '#444'
          }
        },

        {
          selector: 'edge',
          style: {
            'curve-style': 'haystack',
            'haystack-radius': 0,
            'width': 2,
            'opacity': 0.3,
            'line-color': '#888'
          }
        }
      ]

    });

    cy.on('tap', 'node', function(){
      try { // your browser may block popups
        window.open( this.data('href') );
      } catch(e){ // fall back on url change
        window.location.href = this.data('href');
      }
    });

    cy.on('tapstart', 'node', function(e){
      cy.elements().style('opacity', 0.2);
      var node = e.target;
      node.connectedEdges()
        .style('opacity', 1)
        .style('line-color', 'magenta');
      node.connectedEdges()
        .connectedNodes()
        .style('opacity', 1)
        .style('border-color', 'magenta');
    });

    cy.on('tapend', 'node', function(e){
      cy.nodes().style('opacity', 1);
      cy.edges().style('opacity', 0.3);
      var node = e.target;
      node.connectedEdges()
        .style('line-color', '#888');
      node.connectedEdges()
        .connectedNodes()
        .style('border-color', 'white');
    });


    /*
    //attempt to use cytoscape native clustering

    var clusters = cy.elements().hca({
      mode: 'threshold',
      threshold: 15,
      attributes: [
        function( node ){ return node.data('weight'); }
      ]
    });
    */

    // https://sashat.me/2017/01/11/list-of-20-simple-distinct-colors/
    var colors = ['#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe', '#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff', '#000000', '#999999'];

    // clusters[0].forEach(function(n){n.style('backgroundColor','blue');})


    community = jLouvain()
      .nodes(data.tagnames)
      .edges(data.edges)
    c_result  = community();
//console.log(data.edges, 'result', c_result);

    cy.nodes().forEach(function(node) {
      var index = c_result[node.id()];
      if (index > colors.length) index = colors.length - 1;
      color = colors[index];
      node.style('backgroundColor', color);
    });

  }

})();

</script>
</body>