Javascript library in a notebook: pig¶

Links: notebook, html, PDF, python, slides, slides(2), GitHub

Tries pig in a notebook. Example from index.html.

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
print(jr._repr_html_())
<div id="Md3ade3535e8040439d786dbfe9dc9640-cont"><div id="Md3ade3535e8040439d786dbfe9dc9640" 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: "Md3ade3535e8040439d786dbfe9dc9640",
}).enable();
 });
</script>

Not very successful.