<link href="https://fonts.googleapis.com/css?family=Oswald:300,500,600,700" rel="stylesheet">
<!-- <script src="https://code.jquery.com/jquery-2.1.4.js"></script> -->
<!--  <h1>A Language that implies the truth of the ways we are all connected</h1> -->
<h1> A Language That Reveals All The Ways Us and The World Are Connected</h1>

 <div id="cyto">

  </div>

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.4.4/cytoscape.min.js"></script> -->
body {
  background: #fcfcfc;
  font-family: 'Oswald', sans-serif;
  color: #444;
  font-size: 16px;
  border: 5px solid #444;
  width: 90%;
  height: 450px;
   margin-left: auto;
  margin-right: auto; 
/*   text-align: center; */
  
}

.container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

/* trying to figure out how to center horizintally and vertically */
.thing {
/* position: absolute;
  margin-top: auto;
  margin-bottom: auto; */
}

h1 {
  font-size: 260%;
  line-height: 1.2em;
  text-align: center;
}

#cyto{
  width:100%; 
 height:300px;
  z-index:1;
}
/* #cyto{
	  height: 100%;
  width: 100%;
  position: absolute;
  // left: 0;
  top: 25%;
    // display: block;
    font-family: 'Work Sans', sans-serif !important;

} */
$(function(){ // on dom ready

var cy = cytoscape({
  container: document.getElementById('cyto'),

  boxSelectionEnabled: false,
  autounselectify: true,

  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'content': 'data(id)'
      })
    .selector('edge')
      .css({
        'target-arrow-shape': 'triangle',
        'width': 4,
        'line-color': '#ddd',
        'target-arrow-color': '#ddd',
        'curve-style': 'bezier'
      })
    .selector('.highlighted')
      .css({
        'background-color': '#61bffc',
        'line-color': '#61bffc',
        'target-arrow-color': '#61bffc',
        'transition-property': 'background-color, line-color, target-arrow-color',
        'transition-duration': '0.5s'
      }),
  
  elements: {
      nodes: [
        { data: { id: 'a' } },
        { data: { id: 'langauge' } },
        { data: { id: 'reveals' } },
        { data: { id: 'us' } },
        { data: { id: 'the world' } }
      ], 
      
      edges: [
        { data: { id: 'a"the world', weight: 1, source: 'a', target: 'the world' } },
        { data: { id: 'ab', weight: 3, source: 'a', target: 'langauge' } },
        { data: { id: 'be', weight: 4, source: 'langauge', target: 'the world' } },
        { data: { id: 'bc', weight: 5, source: 'langauge', target: 'reveals' } },
        { data: { id: 'ce', weight: 6, source: 'reveals', target: 'the world' } },
        { data: { id: 'cd', weight: 2, source: 'reveals', target: 'us' } },
        { data: { id: 'de', weight: 7, source: 'us', target: 'the world' } }
      ]
    },
  
  layout: {
    name: 'breadthfirst',
    directed: true,
    roots: '#a',
    padding: 10
  }
});
  
var bfs = cy.elements().bfs('#a', function(){}, true);

var i = 0;
var highlightNextEle = function(){
  if( i < bfs.path.length ){
    bfs.path[i].addClass('highlighted');
  
    i++;
    setTimeout(highlightNextEle, 1000);
  }
};

// kick off first highlight
highlightNextEle();

}); // on dom ready

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.4.4/cytoscape.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/p5.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/p5.dom.js
  5. //cdnjs.cloudflare.com/ajax/libs/velocity/1.4.3/velocity.min.js
  6. //cdnjs.cloudflare.com/ajax/libs/velocity/1.4.3/velocity.ui.min.js
  7. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/jquery.blast.js