<link href="https://fonts.googleapis.com/css?family=Work+Sans:800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,600,700" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.4.4/cytoscape.min.js"></script>
<style id="jsbin-css">
#cyto{
  width:1200px;height:700px;
}
</style>
<!-- <div id = "sidebar"> <p style = "text-decoration: underline; color: black;">
   -->
  <div class = "instructions">
  <p>I Am From</p><ul><li> Click and drag nodes to manipulate shape</li>
  <li> Click and drag anywhere else to move entire structure</li><li>Two-finger swipe to zoom in and out</li><li> Change enitre formation by choosing one of the built in options
    </ul>
<div id="cy"></div>
<div id="cy2"></div>
    <!--       this should be an interface js once I figure it out or find a better solution -->
    <div class = "instructions">

  <div id="controls">
    <input type="radio" name="layout" value="breadthfirst" id="breadthfirst"> Breadthfirst

  <input type="radio" name="layout" value="grid" id="grid"> Grid<br><br>

  <input type="radio" name="layout" value="cose" id="cose"> Cose

    <input type="radio" name="layout" value="concentric" id="concentric"> Concentric
  </div>  
    </div>

  
body { 
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 50%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #FAEDEF;
}

#cy2 {
  height: 50%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  background-color: #EDF1FA;
  border-top: 1px solid #ccc;
}
$(function(){ // on dom ready

var elesJson = {
  nodes: [
    { data: { id: 'I am from', foo: 3, bar: 5, baz: 7 } },
    { data: { id: 'I am Made Of', foo: 7, bar: 1, baz: 3 } },
    { data: { id: 'I am Shedding', foo: 2, bar: 7, baz: 6 } },
    { data: { id: 'I am Becoming', foo: 9, bar: 5, baz: 2 } },
    { data: { id: 'e', foo: 2, bar: 4, baz: 5 } }
  ], 

  edges: [
    { data: { id: 'ae', weight: 1, source: 'a', target: 'e' } },
    { data: { id: 'ab', weight: 3, source: 'a', target: 'b' } },
    { data: { id: 'be', weight: 4, source: 'b', target: 'e' } },
    { data: { id: 'bc', weight: 5, source: 'b', target: 'c' } },
    { data: { id: 'ce', weight: 6, source: 'c', target: 'e' } },
    { data: { id: 'cd', weight: 2, source: 'c', target: 'd' } },
    { data: { id: 'de', weight: 7, source: 'd', target: 'e' } }
  ]
};
  
$('#cy').cytoscape({
  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'background-color': '#B3767E',
        'width': 'mapData(baz, 0, 10, 10, 40)',
        'height': 'mapData(baz, 0, 10, 10, 40)',
        'content': 'data(id)'
      })
    .selector('edge')
      .css({
        'line-color': '#F2B1BA',
        'target-arrow-color': '#F2B1BA',
        'width': 2,
        'target-arrow-shape': 'circle',
        'opacity': 0.8
      })
    .selector(':selected')
      .css({
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black',
        'opacity': 1
      })
    .selector('.faded')
      .css({
        'opacity': 0.25,
        'text-opacity': 0
      }),
  
  elements: elesJson,
  
  layout: {
    name: 'circle',
    padding: 10
  },
  
  ready: function(){
    // ready 1
  }
});

$('#cy2').cytoscape({
  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'background-color': '#6272A3',
        'shape': 'rectangle',
        'width': 'mapData(foo, 0, 10, 10, 30)',
        'height': 'mapData(bar, 0, 10, 10, 50)',
        'content': 'data(id)'
      })
    .selector('edge')
      .css({
        'width': 'mapData(weight, 0, 10, 3, 9)',
        'line-color': '#B1C1F2',
        'target-arrow-color': '#B1C1F2',
        'target-arrow-shape': 'triangle',
        'opacity': 0.8
      })
    .selector(':selected')
      .css({
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black',
        'opacity': 1
      }),
  
  elements: elesJson,
  
  layout: {
    name: 'breadthfirst',
    directed: true,
    padding: 10
  },
  
  ready: function(){
    // ready 2
  }
});
  
}); // on dom ready

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.