.. _nbpigrst:

=====================================
Javascript library in a notebook: pig
=====================================


.. only:: html

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


Tries `pig <https://github.com/schlosser/pig.js>`__ in a notebook.
Example from
`index.html <https://github.com/schlosser/pig.js/blob/master/test/index.html>`__.

.. code:: ipython3

    from jyquickhelper import RenderJS
    css = None
    libs = ['http://www.xavierdupre.fr/js/pig/pig.min.js']
    script = """
    var imageData = [
        {"filename": "nb_c3.thumb.png", "aspectRatio": 1},
        {"filename": "nb_viz.thumb.png", "aspectRatio": 1},
        {"filename": "nb_svg.thumb.png", "aspectRatio": 1},
        {"filename": "nb_vis.thumb.png", "aspectRatio": 1},
        {"filename": "nb_mermaid.thumb.png", "aspectRatio": 1},
    ];
    var pig = new Pig(imageData, {
        urlForSize: function(filename, size) {
            return 'http://www.xavierdupre.fr/app/jyquickhelper/helpsphinx/_images/' + filename;
            },
        containerId: "__ID__",
    }).enable();
    """
    jr = RenderJS(script, css=css, libs=libs)
    jr






.. raw:: html

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

    require(['http://www.xavierdupre.fr/js/pig/pig.min.js'], function() { 
    var imageData = [
        {"filename": "nb_c3.thumb.png", "aspectRatio": 1},
        {"filename": "nb_viz.thumb.png", "aspectRatio": 1},
        {"filename": "nb_svg.thumb.png", "aspectRatio": 1},
        {"filename": "nb_vis.thumb.png", "aspectRatio": 1},
        {"filename": "nb_mermaid.thumb.png", "aspectRatio": 1},
    ];
    var pig = new Pig(imageData, {
        urlForSize: function(filename, size) {
            return 'http://www.xavierdupre.fr/app/jyquickhelper/helpsphinx/_images/' + filename;
            },
        containerId: "Mb16557ab711d4a17ab42d515fff41f66",
    }).enable();
     });

    </script>




.. code:: ipython3

    print(jr._repr_html_())


.. parsed-literal::
    <div id="Mb16557ab711d4a17ab42d515fff41f66-cont"><div id="Mb16557ab711d4a17ab42d515fff41f66" style="width:100%;height:100%;"></div></div>
    <script>
    require(['http://www.xavierdupre.fr/js/pig/pig.min.js'], function() { 
    var imageData = [
        {"filename": "nb_c3.thumb.png", "aspectRatio": 1},
        {"filename": "nb_viz.thumb.png", "aspectRatio": 1},
        {"filename": "nb_svg.thumb.png", "aspectRatio": 1},
        {"filename": "nb_vis.thumb.png", "aspectRatio": 1},
        {"filename": "nb_mermaid.thumb.png", "aspectRatio": 1},
    ];
    var pig = new Pig(imageData, {
        urlForSize: function(filename, size) {
            return 'http://www.xavierdupre.fr/app/jyquickhelper/helpsphinx/_images/' + filename;
            },
        containerId: "Mb16557ab711d4a17ab42d515fff41f66",
    }).enable();
     });
    </script>
    


Not very successful.