Javascript library in a notebook: vis.js

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

Tries visjs in a notebook. It is another way to represent graphs, networks in a notebook. It works better in Chrome.

from jyquickhelper import add_notebook_menu
add_notebook_menu()

Simple example

from jyquickhelper import RenderJS
css = ['http://www.xavierdupre.fr/js/visjs/vis.min.css']
libs = [dict(path='http://www.xavierdupre.fr/js/visjs/vis.min.js', name='vis')]
script = """
  var nodes = new vis.DataSet([
    {id: 1, label: 'Node 1'},
    {id: 2, label: 'Node 2'},
    {id: 3, label: 'Node 3'},
    {id: 4, label: 'Node 4'},
    {id: 5, label: 'Node 5'}
  ]);

  // create an array with edges
  var edges = new vis.DataSet([
    {from: 1, to: 3},
    {from: 1, to: 2},
    {from: 2, to: 4},
    {from: 2, to: 5},
    {from: 3, to: 3}
  ]);

  // create a network
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {};
  var container = document.getElementById('__ID__');
  var network = new vis.Network(container, data, options);
"""
jr = RenderJS(script, css=css, libs=libs)
jr

print(jr._repr_html_())

<div id="M7af9233382d24ed8a6cd651528741792-css"><link rel="stylesheet" href="http://www.xavierdupre.fr/js/visjs/vis.min.css" type="text/css" /><div id="M7af9233382d24ed8a6cd651528741792" style="width:100%;height:100%;"></div></div>
<script>
require.config({
paths:{
'vis':'http://www.xavierdupre.fr/js/visjs/vis.min',
},
});
require(['vis'], function(vis) {
  var nodes = new vis.DataSet([
    {id: 1, label: 'Node 1'},
    {id: 2, label: 'Node 2'},
    {id: 3, label: 'Node 3'},
    {id: 4, label: 'Node 4'},
    {id: 5, label: 'Node 5'}
  ]);
  // create an array with edges
  var edges = new vis.DataSet([
    {from: 1, to: 3},
    {from: 1, to: 2},
    {from: 2, to: 4},
    {from: 2, to: 5},
    {from: 3, to: 3}
  ]);
  // create a network
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {};
  var container = document.getElementById('M7af9233382d24ed8a6cd651528741792');
  var network = new vis.Network(container, data, options);
 });
</script>

More complex example

from jyquickhelper import RenderJS
css = ['http://www.xavierdupre.fr/js/visjs/vis-network.min.css']
libs = [dict(path='http://www.xavierdupre.fr/js/visjs/vis.min.js', name='vis')]
script = """
var nodes = null;
var edges = null;
var network = null;

function draw() {
  // create people.
  // value corresponds with the age of the person
  nodes = [
    {id: 1,  value: 2,  label: 'Algie' },
    {id: 2,  value: 31, label: 'Alston'},
    {id: 3,  value: 12, label: 'Barney'},
    {id: 4,  value: 16, label: 'Coley' },
    {id: 5,  value: 17, label: 'Grant' },
    {id: 6,  value: 15, label: 'Langdon'},
    {id: 7,  value: 6,  label: 'Lee'},
    {id: 8,  value: 5,  label: 'Merlin'},
    {id: 9,  value: 30, label: 'Mick'},
    {id: 10, value: 18, label: 'Tod'},
  ];

  // create connections between people
  // value corresponds with the amount of contact between two people
  edges = [
    {from: 2, to: 8, value: 3, title: '3 emails per week'},
    {from: 2, to: 9, value: 5, title: '5 emails per week'},
    {from: 2, to: 10,value: 1, title: '1 emails per week'},
    {from: 4, to: 6, value: 8, title: '8 emails per week'},
    {from: 5, to: 7, value: 2, title: '2 emails per week'},
    {from: 4, to: 5, value: 1, title: '1 emails per week'},
    {from: 9, to: 10,value: 2, title: '2 emails per week'},
    {from: 2, to: 3, value: 6, title: '6 emails per week'},
    {from: 3, to: 9, value: 4, title: '4 emails per week'},
    {from: 5, to: 3, value: 1, title: '1 emails per week'},
    {from: 2, to: 7, value: 4, title: '4 emails per week'}
  ];

  // Instantiate our network object.
  var container = document.getElementById('__ID__');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {
    nodes: {
      shape: 'dot',
      scaling:{
        label: {
          min:8,
          max:20
        }
      }
    }
  };
  network = new vis.Network(container, data, options);
}
draw();
"""
jr = RenderJS(script, css=css, libs=libs, style="width: 400px; height: 400px; border: 1px solid lightgray;")
jr

print(jr._repr_html_())

<div id="M0cf52fbdc869438793c3b342839b5c7a-css"><link rel="stylesheet" href="http://www.xavierdupre.fr/js/visjs/vis-network.min.css" type="text/css" /><div id="M0cf52fbdc869438793c3b342839b5c7a" style="width: 400px; height: 400px; border: 1px solid lightgray;"></div></div>
<script>
require.config({
paths:{
'vis':'http://www.xavierdupre.fr/js/visjs/vis.min',
},
});
require(['vis'], function(vis) {
var nodes = null;
var edges = null;
var network = null;
function draw() {
  // create people.
  // value corresponds with the age of the person
  nodes = [
    {id: 1,  value: 2,  label: 'Algie' },
    {id: 2,  value: 31, label: 'Alston'},
    {id: 3,  value: 12, label: 'Barney'},
    {id: 4,  value: 16, label: 'Coley' },
    {id: 5,  value: 17, label: 'Grant' },
    {id: 6,  value: 15, label: 'Langdon'},
    {id: 7,  value: 6,  label: 'Lee'},
    {id: 8,  value: 5,  label: 'Merlin'},
    {id: 9,  value: 30, label: 'Mick'},
    {id: 10, value: 18, label: 'Tod'},
  ];
  // create connections between people
  // value corresponds with the amount of contact between two people
  edges = [
    {from: 2, to: 8, value: 3, title: '3 emails per week'},
    {from: 2, to: 9, value: 5, title: '5 emails per week'},
    {from: 2, to: 10,value: 1, title: '1 emails per week'},
    {from: 4, to: 6, value: 8, title: '8 emails per week'},
    {from: 5, to: 7, value: 2, title: '2 emails per week'},
    {from: 4, to: 5, value: 1, title: '1 emails per week'},
    {from: 9, to: 10,value: 2, title: '2 emails per week'},
    {from: 2, to: 3, value: 6, title: '6 emails per week'},
    {from: 3, to: 9, value: 4, title: '4 emails per week'},
    {from: 5, to: 3, value: 1, title: '1 emails per week'},
    {from: 2, to: 7, value: 4, title: '4 emails per week'}
  ];
  // Instantiate our network object.
  var container = document.getElementById('M0cf52fbdc869438793c3b342839b5c7a');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {
    nodes: {
      shape: 'dot',
      scaling:{
        label: {
          min:8,
          max:20
        }
      }
    }
  };
  network = new vis.Network(container, data, options);
}
draw();
 });
</script>

With the DOT language

from jyquickhelper import RenderJS
css = ['http://www.xavierdupre.fr/js/visjs/vis.min.css']
libs = [dict(path='http://www.xavierdupre.fr/js/visjs/vis.min.js', name='vis')]
script = """
var DOTstring = 'digraph {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
var parsedData = vis.network.convertDot(DOTstring);
var container = document.getElementById('__ID__');
var network = new vis.Network(container, parsedData, parsedData.options);
"""
jr = RenderJS(script, css=css, libs=libs)
jr

from jyquickhelper import RenderJS
css = ['http://www.xavierdupre.fr/js/visjs/vis.min.css']
libs = [dict(path='http://www.xavierdupre.fr/js/visjs/vis.min.js', name='vis')]
script = """
var DOTstring = 'digraph { d[label="longer label"]; a -> b -> c; b -> d; }';
var parsedData = vis.network.convertDot(DOTstring);
var container = document.getElementById('__ID__');
var network = new vis.Network(container, parsedData, parsedData.options);
"""
jr = RenderJS(script, css=css, libs=libs)
jr

print(jr._repr_html_())

<div id="Me0e5ed855a0e4fcf9b3dbdcdfbf0cbab-css"><link rel="stylesheet" href="http://www.xavierdupre.fr/js/visjs/vis.min.css" type="text/css" /><div id="Me0e5ed855a0e4fcf9b3dbdcdfbf0cbab" style="width:100%;height:100%;"></div></div>
<script>
require.config({
paths:{
'vis':'http://www.xavierdupre.fr/js/visjs/vis.min',
},
});
require(['vis'], function(vis) {
var DOTstring = 'digraph { d[label="longer label"]; a -> b -> c; b -> d; }';
var parsedData = vis.network.convertDot(DOTstring);
var container = document.getElementById('Me0e5ed855a0e4fcf9b3dbdcdfbf0cbab');
var network = new vis.Network(container, parsedData, parsedData.options);
 });
</script>

from jyquickhelper import RenderJS
css = ['http://www.xavierdupre.fr/js/visjs/vis.min.css']
libs = [dict(path='http://www.xavierdupre.fr/js/visjs/vis.min.js', name='vis')]
script = """
var DOTstring = 'digraph { d[label="longer label"]; a -> b -> c; b -> d; }';
var parsedData = vis.network.convertDot(DOTstring);
var container = document.getElementById('__ID__');
var options =  parsedData.options;
var options = {
        layout: {
            hierarchical: {
                direction: "UD",
                sortMethod: "directed"
            }
        }
        };
var network = new vis.Network(container, parsedData, options);
"""
jr = RenderJS(script, css=css, libs=libs, height="200px")
jr