IPyCytoscape Example

Thebe can display output from ipycytoscape, which could visualize graphs using Cytoscape.js.

Setup

Be sure to load require.js before any of your thebe activation code so that the Cytoscape visualizations can function:

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js"></script>

Configure thebe and load it:

<script type="text/x-thebe-config">
  {
    requestKernel: true,
    binderOptions: {
      repo: "QuantStack/ipycytoscape",
      ref: "1.2.0",
      repoProvider: "github",
    },
  }
</script>
<script src="https://unpkg.com/thebe@latest/lib/index.js"></script>

Create a button to activate thebe:

<button id="activateButton" style="width: 120px; height: 40px; font-size: 1.5em;">
  Activate
</button>
<script>
var bootstrapThebe = function() {
    thebelab.bootstrap();
}
document.querySelector("#activateButton").addEventListener('click', bootstrapThebe)
</script>

Now add code cells between these HTML tags:

<pre data-executable="true" data-language="python"></pre>

Example

Using Cytoscape, you can display a graph with several nodes. This example is from the ipycytoscape repository and is licensed under the BSD 3-Clause License.

Press the “Activate” button below to connect to a Jupyter server:

import ipycytoscape
data = {
  'nodes': [
      { 'data': { 'id': 'desktop', 'name': 'Cytoscape', 'href': 'http://cytoscape.org' } },
      { 'data': { 'id': 'a', 'name': 'Grid', 'href': 'http://cytoscape.org' } },
      { 'data': { 'id': 'b', 'name': 'Cola', 'href': 'http://cytoscape.org' } },
      { 'data': { 'id': 'c', 'name': 'Popper', 'href': 'http://cytoscape.org' } },
      { 'data': { 'id': 'js', 'name': 'Cytoscape.js', 'href': 'http://js.cytoscape.org' } }
  ],
  'edges': [
      {'data': { 'source': 'desktop', 'target': 'js' }},
      {'data': { 'source': 'a', 'target': 'b' }},
      {'data': { 'source': 'a', 'target': 'c' }},
      {'data': { 'source': 'b', 'target': 'c' }},
      {'data': { 'source': 'js', 'target': 'b' }}
  ]
}
cytoscapeobj = ipycytoscape.CytoscapeWidget()
cytoscapeobj.graph.add_graph_from_json(data)
cytoscapeobj.set_style([{
  'selector': 'node',
  'css': {
      'content': 'data(name)',
      'text-valign': 'center',
      'color': 'white',
      'text-outline-width': 2,
      'text-outline-color': 'green',
      'background-color': 'green'
  }
  },
  {
  'selector': ':selected',
  'css': {
      'background-color': 'black',
      'line-color': 'black',
      'target-arrow-color': 'black',
      'source-arrow-color': 'black',
      'text-outline-color': 'black'
  }}
  ])
cytoscapeobj