Javascript library in a notebook: pigΒΆ

Links: notebook, html, PDF, python, slides, 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="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.