Moebio Framework - Network Example by davo

index.html

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Moebio Framework - Network Example</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="Author" content="Santiago Ortiz" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <style type="text/css" media="screen">
      html, body{ height:100%;}
      body { margin:0; padding:0; overflow:hidden; }
      textarea:focus { border: 2px solid red; outline: 0px; resize: none; }
      body { font-family: Arial; }
      #maindiv {
        width: 100%;
        height: 100%;
      }
  
    </style>
  </head>
  <body bgcolor='#FFFFFF' id="index" class="home" link="#000000" vlink="#000000">

    <div id="maindiv">
    </div>
	<script src="moebio_framework.min.js"></script>
  <script>
    window.onload = function() {
  /*
   * Network
   * Demonstration of using the Moebio Framework and its random network generator
   * to create a random network and display it on the canvas. Uses the
   *
   */
  var network;

  var N_NODES = 1000; // Number of nodes to put in visualization
  var P_RELATION = 0.0006; //probablity that any two nodes are connected

  new mo.Graphics({
    container: "#maindiv",
    /*
     * init
     * All Moebio Framework visualizations use init to setup variables.
     * These variables are used in the cycle function.
     */
    init: function(){
      // create a sample network using NetworkGenerators
      network = mo.NetworkGenerators.createRandomNetwork(N_NODES, P_RELATION, 1);

      this.forces = new mo.Forces({
        dEqSprings:30,
        dEqRepulsors:120,
        k:0.001,
        friction:0.9
      });

      // apply the forces to the network
      this.forces.forcesForNetwork(network, 400, new mo.Point(0, 0), 1, true);
    },

    /*
     * The cycle function is called repeatedly to display the visualization.
     * Here we render the network for each iteration.
     */
    cycle: function(){
      var i;
      var node;
      var relation;
      var isOverCircle;
      var iOver = null;

      // update the forces applied to this network
      this.forces.calculate();
      this.forces.applyForces();

      // set the drawing stroke to be black and thin
      this.setStroke('black', 0.1);


      // for each edge in the network, create a line connecting them
      for(i=0; network.relationList[i] != null; i++){
        relation = network.relationList[i];
        // cX, cY are the coordinates of the center of the canvas
        this.line(relation.node0.x + this.cX, relation.node0.y + this.cY,
             relation.node1.x + this.cX, relation.node1.y+ this.cY
            );
      }

      this.setFill('black');

      // for each node in the network, draw it
      for(i=0; network.nodeList[i] != null; i++){
        node = network.nodeList[i];

        // draws a node with radius = (2x number of node connections + 2) px, and detects wether the cursor is hovering
        isOverCircle = this.fCircleM(node.x + this.cX, node.y + this.cY, 2*node.nodeList.length+2);
        if(isOverCircle) {
          iOver = i;
        }
      }

      // for the circle that is being hovered over,
      // if it exists, make a outlined circle
      if(iOver != null){
        this.setStroke('black', 4);
        node = network.nodeList[iOver];
        this.sCircle(node.x + this.cX, node.y + this.cY, 2*node.nodeList.length + 10);
        this.setCursor('pointer');
      }
    }
  });

};

  </script>
</body>