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.
.._example: https://github.com/QuantStack/ipycytoscape/blob/master/examples/Text%20on%20node.ipynb
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