<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.8/cytoscape.min.js"></script>
  </head>



<body onload="app.init(false)">

<button onclick="app.init(true)">
Redraw with self connecting node 
</button>
<div id="cy">

</div>
</body>
  
  

</html>
var GraphApp = function () {
  var cy;
  var maxNodes = 200;

  return {
      init: function (includeSelfConnectingEdge) {
        cy = cytoscape({
          container: document.querySelector('#cy'),
          boxSelectionEnabled: false,
          style: cytoscape.stylesheet()
            .selector('node')
              .css({
                'width': '100px',
                'height': '100px',
                'content': 'data(name)',
                'text-valign': 'center',
                'color': 'black',
                'border-color': '#000',
                'border-width': 3,
                'background-color': '#ddd'
              }),
          elements: {
            nodes: [
              { data: { id: 'parent', name: '' } }
            ]
          }
        });
          
        for (var i = 0; i <= maxNodes; i++) {
          cy.add({
            data: { id: 'node' + i, name: '' + i }
          });
          var source = 'node' + i;
          if(i > 0 || includeSelfConnectingEdge) {
            cy.add({
                data: { 
                    id: 'edge' + i,
                    source: source,
                    target: 'node' + (Math.floor(Math.random() * (i)))
                }
            });
          }
          cy.add({
              data: {
                  id: 'pEdge' + i,
                  source: source,
                  target: 'parent'
              }
          });
        }
        
        cy.layout({
          name: 'cose',
          animate: true
        });

      },

      destroy: function () {
          cy.destroy();
          cy = null;
      }
  }
};


var app = new GraphApp();
/* Styles go here */

body {
  font-family: helvetica;
  font-size: 14px;
}
button {
  background-color: red;
  font-weight: bold;
}

#cy {
  width: 600px; 
  height: 600px;
  border: 1px solid #888;
}