.. _localjsrst: ==================== Try local javascript ==================== .. only:: html **Links:** :download:`notebook `, :downloadlink:`html `, :download:`PDF `, :download:`python `, :downloadlink:`slides `, :githublink:`GitHub|_doc/notebooks/local_js.ipynb|*` Use javascript in a notebook with local scripts. .. code:: ipython3 from jyquickhelper import add_notebook_menu add_notebook_menu() .. contents:: :local: JSJSON ------ .. code:: ipython3 from jyquickhelper import JSONJS JSONJS(dict(name="xavier", city="Paris"), only_html=True, show_to_level=3, local=True) .. raw:: html
The function copies the javascript code in the current folder. .. code:: ipython3 import os [_ for _ in os.listdir(os.getcwd()) if '.js' in _] .. parsed-literal:: ['custom_demo.js', 'renderjson.js', 'vis.min.js', 'viz-lite.js', 'viz.js'] RenderJsDot ----------- .. code:: ipython3 from jyquickhelper import RenderJsDot dot = """ digraph { d[label="longer label"]; a -> b -> c; b -> d; } """ RenderJsDot(dot, local=True) .. raw:: html
RenderJsVis ----------- .. code:: ipython3 script = """ var nodes = new vis.DataSet([ {id: 1, label: 'Node 1'}, {id: 2, label: 'Node 2'}, {id: 3, label: 'Node 3'}, {id: 4, label: 'Node 4'}, {id: 5, label: 'Node 5'} ]); // create an array with edges var edges = new vis.DataSet([ {from: 1, to: 3}, {from: 1, to: 2}, {from: 2, to: 4}, {from: 2, to: 5}, {from: 3, to: 3} ]); // create a network var data = { nodes: nodes, edges: edges }; var options = {}; """ .. code:: ipython3 from jyquickhelper import RenderJsVis RenderJsVis(script, local=False, width="400px", height="300px") .. raw:: html
RenderJsVis with DOT -------------------- [DOT](https://en.wikipedia.org/wiki/DOT_(graph_description_language) is quite popular to desccribe graph. .. code:: ipython3 from jyquickhelper import RenderJsVis dot = """ digraph { d[label="longer label"]; a -> b -> c; b -> d; } """ RenderJsVis(dot=dot, local=True) .. raw:: html
.. code:: ipython3 RenderJsVis(dot=dot, local=True, layout="hierarchical", height="200px") .. raw:: html