.. _nbvisjsrst:

========================================
Javascript library in a notebook: vis.js
========================================


.. only:: html

    **Links:** :download:`notebook <nb_visjs.ipynb>`, :downloadlink:`html <nb_visjs2html.html>`, :download:`PDF <nb_visjs.pdf>`, :download:`python <nb_visjs.py>`, :downloadlink:`slides <nb_visjs.slides.html>`, :githublink:`GitHub|_doc/notebooks/nb_visjs.ipynb|*`


Tries `visjs <http://visjs.org/>`__ in a notebook. It is another way to
represent graphs, networks in a notebook. It works better in Chrome.

.. code:: ipython3

    from jyquickhelper import add_notebook_menu
    add_notebook_menu()






.. contents::
    :local:





Simple example
--------------

.. code:: ipython3

    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






.. raw:: 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>




.. code:: ipython3

    print(jr._repr_html_())


.. parsed-literal::
    <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
--------------------

.. code:: ipython3

    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






.. raw:: 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>




.. code:: ipython3

    print(jr._repr_html_())


.. parsed-literal::
    <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
---------------------

.. code:: ipython3

    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






.. raw:: html

    <div id="M58bcfa511f434b0abc342c7dd3238a24-css"><link rel="stylesheet" href="http://www.xavierdupre.fr/js/visjs/vis.min.css" type="text/css" /><div id="M58bcfa511f434b0abc342c7dd3238a24" 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 {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
    var parsedData = vis.network.convertDot(DOTstring);
    var container = document.getElementById('M58bcfa511f434b0abc342c7dd3238a24');
    var network = new vis.Network(container, parsedData, parsedData.options);
     });

    </script>




.. code:: ipython3

    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






.. raw:: 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>




.. code:: ipython3

    print(jr._repr_html_())


.. parsed-literal::
    <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>
    


.. code:: ipython3

    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






.. raw:: html

    <div id="M3f83c302550647499fbd05c2d34fc7f9-css"><link rel="stylesheet" href="http://www.xavierdupre.fr/js/visjs/vis.min.css" type="text/css" /><div id="M3f83c302550647499fbd05c2d34fc7f9" style="width:100%;height:200px;"></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('M3f83c302550647499fbd05c2d34fc7f9');
    var options =  parsedData.options;
    var options = {
            layout: {
                hierarchical: {
                    direction: "UD",
                    sortMethod: "directed"
                }
            }
            };
    var network = new vis.Network(container, parsedData, options);
     });

    </script>