Javascript library in a notebook: cytoscape.js

Links: notebook, html, PDF, python, slides, GitHub

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>