Get started with cytoscape CDN

MIT licensed

Cytoscape: Interactive, data-driven graph library in JS for web browsers.

Tags:
  • graph
  • theory
  • visualisation
  • visualization
  • analysis

Stable version

Copied!

How to start using cytoscape CDN


<!DOCTYPE html>
<html>
<head>
  <style>
    .node {
      content: data(id);
      width: 20px;
      height: 20px;
      border-radius: 5px;
      background-color: #ddd;
      text-align: center;
      padding: 6px;
    }
  </style>
  <script src="https://cdn.cdnhub.io/cytoscape/3.28.1/cytoscape.min.js"></script>
</head>
<body>
  <div id="cy"></div>
  <script>
    const cy = cytoscape({
      container: document.getElementById('cy'),
      elements: {
        nodes: [
          { data: { id: 'A' } },
          { data: { id: 'B' } },
          { data: { id: 'C' } },
        ],
        edges: [
          { data: { source: 'A', target: 'B' } },
          { data: { source: 'A', target: 'C' } },
          { data: { source: 'B', target: 'C' } },
        ],
      },
      layout: { name: 'random' },
      style: [
        {
          selector: 'node',
          style: {
            content: 'data(id)',
            width: '20px',
            height: '20px',
            borderRadius: '5px',
            backgroundColor: '#ddd',
            textAlign: 'center',
            padding: '6px',
          },
        },
      ],
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!

All versions

2.0.1 2.0.2 2.0.3 2.0.4 2.0.5 2.1.0 2.1.1 2.2.0 2.2.1 2.2.10 2.2.11 2.2.12 2.2.13 2.2.14 2.2.2 2.2.3 2.2.4 2.2.5 2.2.6 2.2.7 2.2.8 2.2.9 2.3.0 2.3.1 2.3.10 2.3.11 2.3.12 2.3.13 2.3.14 2.3.15 2.3.16 2.3.2 2.3.3 2.3.4 2.3.5 2.3.6 2.3.7 2.3.8 2.3.9 2.4.0 2.4.1 2.4.2 2.4.3 2.4.4 2.4.5 2.4.6 2.4.7 2.4.8 2.4.9 2.5.0 2.5.1 2.5.2 2.5.3 2.5.4 2.5.5 2.6.0 2.6.1 2.6.10 2.6.11 2.6.12 2.6.2 2.6.3 2.6.4 2.6.5 2.6.6 2.6.7 2.6.8 2.6.9 2.7.0 2.7.1 2.7.10 2.7.11 2.7.12 2.7.13 2.7.14 2.7.15 2.7.16 2.7.17 2.7.18 2.7.19 2.7.2 2.7.20 2.7.21 2.7.22 2.7.23 2.7.24 2.7.25 2.7.26 2.7.27 2.7.28 2.7.29 2.7.3 2.7.4 2.7.5 2.7.6 2.7.7 2.7.8 2.7.9 3.0.0 3.0.1 3.1.0 3.1.1 3.1.2 3.1.3 3.1.4 3.1.5 3.10.0 3.10.1 3.10.2 3.11.0 3.11.1 3.11.2 3.12.0 3.12.1 3.12.2 3.12.3 3.13.0 3.13.1 3.13.2 3.13.3 3.14.0 3.14.1 3.14.2 3.14.4 3.15.0 3.15.1 3.15.2 3.15.3 3.15.4 3.15.5 3.16.0 3.16.1 3.16.2 3.16.3 3.16.4 3.16.5 3.17.0 3.17.1 3.17.2 3.17.3 3.17.4 3.18.0 3.18.1 3.18.2 3.18.3 3.19.0 3.19.1 3.2.0 3.2.1 3.2.10 3.2.11 3.2.12 3.2.13 3.2.14 3.2.15 3.2.16 3.2.17 3.2.18 3.2.19 3.2.2 3.2.20 3.2.21 3.2.22 3.2.3 3.2.4 3.2.5 3.2.6 3.2.7 3.2.8 3.2.9 3.20.0 3.20.1 3.20.2 3.20.3 3.21.0 3.21.1 3.21.2 3.21.3 3.22.0 3.22.1 3.23.0 3.23.1 3.24.0 3.24.1 3.24.2 3.25.0 3.25.1 3.25.2 3.26.0 3.26.1 3.26.2 3.27.0 3.27.1 3.27.2 3.28.0 3.28.1 3.29.0 3.29.1 3.29.2 3.29.3 3.3.0 3.3.1 3.3.2 3.3.3 3.3.4 3.3.5 3.3.6 3.30.0 3.30.1 *** 3.30.2 3.4.0 3.4.1 3.4.2 3.4.3 3.4.4 3.4.5 3.4.6 3.4.7 3.4.8 3.4.9 3.5.0 3.5.1 3.5.2 3.5.3 3.5.4 3.5.5 3.5.6 3.5.7 3.5.8 3.5.9 3.6.0 3.6.1 3.6.2 3.6.3 3.6.4 3.6.5 3.6.6 3.7.0 3.7.1 3.7.2 3.7.3 3.7.4 3.7.5 3.7.6 3.8.0 3.8.1 3.8.2 3.8.3 3.8.4 3.8.5 3.9.0 3.9.1 3.9.2 3.9.3 3.9.4