Javascript library in a notebook: viz.js

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

Tries vizjs in a notebook. This is a simple way to show a graph defined with the DOT language. vizjs compiles Graphviz was compiled into javascript with emscripten.

from jyquickhelper import add_notebook_menu
add_notebook_menu()

viz.js

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
print(jr._repr_html_())
<div id="Mf50b3ae579ca4e12946d4e9f54857e44-cont"><div id="Mf50b3ae579ca4e12946d4e9f54857e44" 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('Mf50b3ae579ca4e12946d4e9f54857e44').innerHTML = svgGraph;
 });
</script>

wrapped into RenderJsDot

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

from jyquickhelper import RenderJsDot

dot = """
digraph {
    d[label="longer label"];
    a -> b -> c;
    b -> d;
}
"""

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

d3 graphviz

The graph can become dynamic by using d3-graphviz. I took the minified version available here d3-graphviz.min.js showing up at this example d3-graphviz Basic Example.

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
print(jr._repr_html_())
<div id="Md47fa70583834f1cb6f1aacbf5e44190-cont"><div id="Md47fa70583834f1cb6f1aacbf5e44190" 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("#Md47fa70583834f1cb6f1aacbf5e44190").graphviz()
    .fade(false)
    .renderDot('digraph  {a -> b}');
 });
</script>

Not really working.