Cytoscape demo

by Rishi Kumar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.5.4/cytoscape.min.js"></script>
<div id="cy"></div>

CSS

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

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

JavaScript

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

  layout: {
    name: 'cose',
    padding: 10
  },

  style: cytoscape.stylesheet()
    .selector('node')
    .css({
      'shape': 'data(faveShape)',
      'width': 'mapData(weight, 40, 80, 20, 60)',
      'content': 'data(name)',
      'text-valign': 'top',
      'text-halign': 'left',
      'text-outline-width': 2,
      'text-outline-color': 'data(faveColor)',
      'background-color': 'data(faveColor)',
      'text-border-opacity': 1,
      'text-border-color': "black",
      'color': '#fff'
    })
    
    .selector('node[weight > 65]')
    .css({
      'text-background-padding': '15px',
      'text-background-color': 'red',
      'text-background-opacity': 1,
      "text-margin-x": '25px',
    })

    .selector(':selected')
    .css({
      'border-width': 3,
      'border-color': '#333'
    })

    .selector('edge')
    .css({
      'curve-style': 'bezier',
      'opacity': 0.666,
      'width': 'mapData(strength, 70, 100, 2, 6)',
      'target-arrow-shape': 'triangle',
      'source-arrow-shape': 'circle',
      'line-color': 'data(faveColor)',
      'source-arrow-color': 'data(faveColor)',
      'target-arrow-color': 'data(faveColor)'
    })
    .selector('edge.questionable')
    .css({
      'line-style': 'dotted',
      'target-arrow-shape': 'diamond'
    })
    .selector('.faded')
    .css({
      'opacity': 0.25,
      'text-opacity': 0
    }),

  elements: {
    nodes: [
      { data: { id: 'j', name: 'Jerry', weight: 65, faveColor: '#6FB1FC', faveShape: 'triangle' } },
      { data: { id: 'e', name: 'Elaine', weight: 45, faveColor: '#EDA1ED', faveShape: 'ellipse' } },
      { data: { id: 'k', name: 'Kramer', weight: 75, faveColor: '#86B342', faveShape: 'octagon' } },
      { data: { id: 'g', name: 'George', weight: 70, faveColor: '#F5A45D', faveShape: 'rectangle' } }
    ],
    edges: [
      { data: { source: 'j', target: 'e', faveColor: '#6FB1FC', strength: 90 } },
      { data: { source:...