Javascript library in a notebook: c3

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

The following cell should show a c3.js graph. The results depends on the browser. It works fine on chrome.

script = """
var chart = c3.generate({
    bindto: '#__ID__',
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ]
    }
});

setTimeout(function () {
    chart.load({
        columns: [
            ['data1', 230, 190, 300, 500, 300, 400]
        ]
    });
}, 1000);

setTimeout(function () {
    chart.load({
        columns: [
            ['data3', 130, 150, 200, 300, 200, 100]
        ]
    });
}, 1500);

setTimeout(function () {
    chart.unload({
        ids: 'data1'
    });
}, 2000);

"""

The script does not use the latest version of d3.js. See C3JS - Cannot read property ‘category10’ of undefined.

from jyquickhelper import RenderJS
css = ["https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.21/c3.min.css"]
jr = RenderJS(script, css=css, libs = [
                dict(path="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js",
                     name="d3", exports="d3"),
                dict(path="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.21/c3.min.js",
                     name="c3", exports="c3", deps=["d3"])])
jr

Here is the code it produces:

print(jr.generate_html()[0])
<div id="M57ddf640565443438db5a7e7719ff3f3-css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.21/c3.min.css" type="text/css" /><div id="M57ddf640565443438db5a7e7719ff3f3" style="height:100%;width:100%;"></div></div>
print(jr.generate_html()[1])
require.config({
paths:{
'd3':'https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min',
'c3':'https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.21/c3.min',
},
shim:{
'c3':{'deps':['d3'],'exports':'c3'},
'd3':{'exports':'d3'},
},
});
require(['d3','c3'], function(d3,c3) {
var chart = c3.generate({
    bindto: '#M57ddf640565443438db5a7e7719ff3f3',
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ]
    }
});
setTimeout(function () {
    chart.load({
        columns: [
            ['data1', 230, 190, 300, 500, 300, 400]
        ]
    });
}, 1000);
setTimeout(function () {
    chart.load({
        columns: [
            ['data3', 130, 150, 200, 300, 200, 100]
        ]
    });
}, 1500);
setTimeout(function () {
    chart.unload({
        ids: 'data1'
    });
}, 2000);
 });