.. _nbvizjsrst:

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


.. only:: html

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


Tries `vizjs <https://github.com/mdaines/viz.js/>`__ in a notebook. This
is a simple way to show a graph defined with the `DOT
language <http://www.graphviz.org/content/dot-language/>`__.
`vizjs <https://github.com/mdaines/viz.js/>`__ compiles
`Graphviz <https://www.graphviz.org/>`__ was compiled into javascript
with `emscripten <http://kripken.github.io/emscripten-site/>`__.

.. code:: ipython3

    from jyquickhelper import add_notebook_menu
    add_notebook_menu()






.. contents::
    :local:





viz.js
------

.. code:: ipython3

    from jyquickhelper import RenderJS
    css = None
    libs = ['http://www.xavierdupre.fr/js/vizjs/viz-lite.js']
    script = """
    var svgGraph = Viz("digraph { a -> b; }");
    document.getElementById('__ID__').innerHTML = svgGraph;
    """
    jr = RenderJS(script, css=css, libs=libs)
    jr






.. raw:: html

    <div id="M87f269e44904465d99006e0de0c9b161-cont"><div id="M87f269e44904465d99006e0de0c9b161" style="width:100%;height:100%;"></div></div>
    <script>

    require(['http://www.xavierdupre.fr/js/vizjs/viz-lite.js'], function() { 
    var svgGraph = Viz("digraph { a -> b; }");
    document.getElementById('M87f269e44904465d99006e0de0c9b161').innerHTML = svgGraph;
     });

    </script>




.. code:: ipython3

    print(jr._repr_html_())


.. parsed-literal::
    <div id="M87f269e44904465d99006e0de0c9b161-cont"><div id="M87f269e44904465d99006e0de0c9b161" style="width:100%;height:100%;"></div></div>
    <script>
    require(['http://www.xavierdupre.fr/js/vizjs/viz-lite.js'], function() { 
    var svgGraph = Viz("digraph { a -> b; }");
    document.getElementById('M87f269e44904465d99006e0de0c9b161').innerHTML = svgGraph;
     });
    </script>
    


wrapped into RenderJsDot
------------------------

The previous script was wraps into a class in this module.

.. code:: ipython3

    from jyquickhelper import RenderJsDot
    
    dot = """
    digraph {
        d[label="longer label"];
        a -> b -> c;
        b -> d;
    }
    """
    
    RenderJsDot(dot)






.. raw:: html

    <div id="Mf4ab52667c344cb495fd8ad092f751ea-cont"><div id="Mf4ab52667c344cb495fd8ad092f751ea" style="width:100%;height:100%;"></div></div>
    <script>

    require(['http://www.xavierdupre.fr/js/vizjs/viz.js'], function() { var svgGraph = Viz("\ndigraph {\n    d[label=\"longer label\"];\n    a -> b -> c;\n    b -> d;\n}\n");
    document.getElementById('Mf4ab52667c344cb495fd8ad092f751ea').innerHTML = svgGraph; });

    </script>



.. code:: ipython3

    print(RenderJsDot(dot)._repr_html_())


.. parsed-literal::
    <div id="M897d8534cca9461ab1f83b41aa37cac1-cont"><div id="M897d8534cca9461ab1f83b41aa37cac1" style="width:100%;height:100%;"></div></div>
    <script>
    require(['http://www.xavierdupre.fr/js/vizjs/viz.js'], function() { var svgGraph = Viz("\ndigraph {\n    d[label=\"longer label\"];\n    a -> b -> c;\n    b -> d;\n}\n");
    document.getElementById('M897d8534cca9461ab1f83b41aa37cac1').innerHTML = svgGraph; });
    </script>


d3 graphviz
-----------

The graph can become dynamic by using
`d3-graphviz <https://github.com/magjac/d3-graphviz>`__. I took the
minified version available here
`d3-graphviz.min.js <https://www.jsdelivr.com/package/npm/d3-graphviz>`__
showing up at this example `d3-graphviz Basic
Example <https://bl.ocks.org/magjac/a23d1f1405c2334f288a9cca4c0ef05b>`__.

.. code:: ipython3

    css = None
    libs = [dict(path="http://www.xavierdupre.fr/js/d3/d3.v4.min.js",
                 name="d3", exports="d3"),
            'http://www.xavierdupre.fr/js/vizjs/viz-lite.js',
            'http://www.xavierdupre.fr/js/d3graphviz/d3-graphviz.min.js']
    script = """
    d3.select("#__ID__").graphviz()
        .fade(false)
        .renderDot('digraph  {a -> b}');
    """
    jr = RenderJS(script, css=css, libs=libs)
    jr






.. raw:: html

    <div id="Md277a3b6510c4ae78dc84287effccb59-cont"><div id="Md277a3b6510c4ae78dc84287effccb59" style="width:100%;height:100%;"></div></div>
    <script>
    require.config({
    paths:{
    'd3':'http://www.xavierdupre.fr/js/d3/d3.v4.min',
    },
    shim:{
    'd3':{'exports':'d3'},
    },
    });

    require(['d3','http://www.xavierdupre.fr/js/vizjs/viz-lite.js','http://www.xavierdupre.fr/js/d3graphviz/d3-graphviz.min.js'], function(d3) { 
    d3.select("#Md277a3b6510c4ae78dc84287effccb59").graphviz()
        .fade(false)
        .renderDot('digraph  {a -> b}');
     });

    </script>




.. code:: ipython3

    print(jr._repr_html_())


.. parsed-literal::
    <div id="Md277a3b6510c4ae78dc84287effccb59-cont"><div id="Md277a3b6510c4ae78dc84287effccb59" style="width:100%;height:100%;"></div></div>
    <script>
    require.config({
    paths:{
    'd3':'http://www.xavierdupre.fr/js/d3/d3.v4.min',
    },
    shim:{
    'd3':{'exports':'d3'},
    },
    });
    require(['d3','http://www.xavierdupre.fr/js/vizjs/viz-lite.js','http://www.xavierdupre.fr/js/d3graphviz/d3-graphviz.min.js'], function(d3) { 
    d3.select("#Md277a3b6510c4ae78dc84287effccb59").graphviz()
        .fade(false)
        .renderDot('digraph  {a -> b}');
     });
    </script>
    


Not really working.