Tries cytoscape.js in a notebook. The example is taken from the gallery and more specifically the following one cyjsSimpleDemoWithMagic.ipynb. A kind of tutorial is available at Getting started with Cytoscape.js.
from jyquickhelper import RenderJS
css = None
libs = [dict(path='http://www.xavierdupre.fr/js/cytoscape/cytoscape.min.js', name='cytoscape')]
script = """
var cy = cytoscape({
container: document.getElementById('__ID__'),
elements: {
nodes: [
{data: {id: 'a', name: 'Node A', type: 'big' }},
{data: {id: 'b', name: 'Node B', type: 'little'}},
],
edges: [
{data: {source: 'a', target: 'b'}},
{data: {source: 'b', target: 'a'}}
]
},
style: [
{selector: 'node',
style: {
'text-valign': 'center',
'text-halign': 'center',
'border-color': 'red',
'background-color': 'white',
'border-width': 1,
'label': 'data(name)',
'height': 100, // defaults
'width': 100
}},
{selector: "node[type='big']",
style: {
'height': 150,
'width': 150,
'shape': 'roundrectangle'
}},
{selector: "node[type='little']",
style: {
'height': 50,
'width': 80
}},
{selector: 'edge',
style: {
'width': '1px',
'line-color': 'blue',
'target-arrow-shape': 'triangle',
'target-arrow-color': 'black',
'curve-style': 'bezier'
}}
],
ready: function(){
console.log("small cyjs network ready");
} // ready
}); // cytoscape
"""
jr = RenderJS(script, css=css, libs=libs, height='200px', width='500px')
jr
print(jr._repr_html_())
<div id="Mf061d65cc741463b895382a57902cacf-cont"><div id="Mf061d65cc741463b895382a57902cacf" style="width:500px;height:200px;"></div></div> <script> require.config({ paths:{ 'cytoscape':'http://www.xavierdupre.fr/js/cytoscape/cytoscape.min', }, }); require(['cytoscape'], function(cytoscape) { var cy = cytoscape({ container: document.getElementById('Mf061d65cc741463b895382a57902cacf'), elements: { nodes: [ {data: {id: 'a', name: 'Node A', type: 'big' }}, {data: {id: 'b', name: 'Node B', type: 'little'}}, ], edges: [ {data: {source: 'a', target: 'b'}}, {data: {source: 'b', target: 'a'}} ] }, style: [ {selector: 'node', style: { 'text-valign': 'center', 'text-halign': 'center', 'border-color': 'red', 'background-color': 'white', 'border-width': 1, 'label': 'data(name)', 'height': 100, // defaults 'width': 100 }}, {selector: "node[type='big']", style: { 'height': 150, 'width': 150, 'shape': 'roundrectangle' }}, {selector: "node[type='little']", style: { 'height': 50, 'width': 80 }}, {selector: 'edge', style: { 'width': '1px', 'line-color': 'blue', 'target-arrow-shape': 'triangle', 'target-arrow-color': 'black', 'curve-style': 'bezier' }} ], ready: function(){ console.log("small cyjs network ready"); } // ready }); // cytoscape }); </script>