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')
    .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: {
         ...