{"cells": [{"cell_type": "markdown", "metadata": {}, "source": ["# Javascript library in a notebook: vis.js\n", "\n", "Tries [visjs](http://visjs.org/) in a notebook. It is another way to represent graphs, networks in a notebook. It works better in Chrome."]}, {"cell_type": "code", "execution_count": 1, "metadata": {}, "outputs": [{"data": {"text/html": ["<div id=\"my_id_menu_nb\">run previous cell, wait for 2 seconds</div>\n", "<script>\n", "function repeat_indent_string(n){\n", "    var a = \"\" ;\n", "    for ( ; n > 0 ; --n)\n", "        a += \"    \";\n", "    return a;\n", "}\n", "// look up into all sections and builds an automated menu //\n", "var update_menu_string = function(begin, lfirst, llast, sformat, send, keep_item, begin_format, end_format) {\n", "    var anchors = document.getElementsByClassName(\"section\");\n", "    if (anchors.length == 0) {\n", "        anchors = document.getElementsByClassName(\"text_cell_render rendered_html\");\n", "    }\n", "    var i,t;\n", "    var text_menu = begin;\n", "    var text_memo = \"<pre>\\nlength:\" + anchors.length + \"\\n\";\n", "    var ind = \"\";\n", "    var memo_level = 1;\n", "    var href;\n", "    var tags = [];\n", "    var main_item = 0;\n", "    var format_open = 0;\n", "    for (i = 0; i <= llast; i++)\n", "        tags.push(\"h\" + i);\n", "\n", "    for (i = 0; i < anchors.length; i++) {\n", "        text_memo += \"**\" + anchors[i].id + \"--\\n\";\n", "\n", "        var child = null;\n", "        for(t = 0; t < tags.length; t++) {\n", "            var r = anchors[i].getElementsByTagName(tags[t]);\n", "            if (r.length > 0) {\n", "child = r[0];\n", "break;\n", "            }\n", "        }\n", "        if (child == null) {\n", "            text_memo += \"null\\n\";\n", "            continue;\n", "        }\n", "        if (anchors[i].hasAttribute(\"id\")) {\n", "            // when converted in RST\n", "            href = anchors[i].id;\n", "            text_memo += \"#1-\" + href;\n", "            // passer \u00e0 child suivant (le chercher)\n", "        }\n", "        else if (child.hasAttribute(\"id\")) {\n", "            // in a notebook\n", "            href = child.id;\n", "            text_memo += \"#2-\" + href;\n", "        }\n", "        else {\n", "            text_memo += \"#3-\" + \"*\" + \"\\n\";\n", "            continue;\n", "        }\n", "        var title = child.textContent;\n", "        var level = parseInt(child.tagName.substring(1,2));\n", "\n", "        text_memo += \"--\" + level + \"?\" + lfirst + \"--\" + title + \"\\n\";\n", "\n", "        if ((level < lfirst) || (level > llast)) {\n", "            continue ;\n", "        }\n", "        if (title.endsWith('\u00b6')) {\n", "            title = title.substring(0,title.length-1).replace(\"<\", \"&lt;\")\n", "         .replace(\">\", \"&gt;\").replace(\"&\", \"&amp;\");\n", "        }\n", "        if (title.length == 0) {\n", "            continue;\n", "        }\n", "\n", "        while (level < memo_level) {\n", "            text_menu += end_format + \"</ul>\\n\";\n", "            format_open -= 1;\n", "            memo_level -= 1;\n", "        }\n", "        if (level == lfirst) {\n", "            main_item += 1;\n", "        }\n", "        if (keep_item != -1 && main_item != keep_item + 1) {\n", "            // alert(main_item + \" - \" + level + \" - \" + keep_item);\n", "            continue;\n", "        }\n", "        while (level > memo_level) {\n", "            text_menu += \"<ul>\\n\";\n", "            memo_level += 1;\n", "        }\n", "        text_menu += repeat_indent_string(level-2);\n", "        text_menu += begin_format + sformat.replace(\"__HREF__\", href).replace(\"__TITLE__\", title);\n", "        format_open += 1;\n", "    }\n", "    while (1 < memo_level) {\n", "        text_menu += end_format + \"</ul>\\n\";\n", "        memo_level -= 1;\n", "        format_open -= 1;\n", "    }\n", "    text_menu += send;\n", "    //text_menu += \"\\n\" + text_memo;\n", "\n", "    while (format_open > 0) {\n", "        text_menu += end_format;\n", "        format_open -= 1;\n", "    }\n", "    return text_menu;\n", "};\n", "var update_menu = function() {\n", "    var sbegin = \"\";\n", "    var sformat = '<a href=\"#__HREF__\">__TITLE__</a>';\n", "    var send = \"\";\n", "    var begin_format = '<li>';\n", "    var end_format = '</li>';\n", "    var keep_item = -1;\n", "    var text_menu = update_menu_string(sbegin, 2, 4, sformat, send, keep_item,\n", "       begin_format, end_format);\n", "    var menu = document.getElementById(\"my_id_menu_nb\");\n", "    menu.innerHTML=text_menu;\n", "};\n", "window.setTimeout(update_menu,2000);\n", "            </script>"], "text/plain": ["<IPython.core.display.HTML object>"]}, "execution_count": 2, "metadata": {}, "output_type": "execute_result"}], "source": ["from jyquickhelper import add_notebook_menu\n", "add_notebook_menu()"]}, {"cell_type": "markdown", "metadata": {}, "source": ["## Simple example"]}, {"cell_type": "code", "execution_count": 2, "metadata": {}, "outputs": [{"data": {"text/html": ["<div id=\"M7af9233382d24ed8a6cd651528741792-css\"><link rel=\"stylesheet\" href=\"http://www.xavierdupre.fr/js/visjs/vis.min.css\" type=\"text/css\" /><div id=\"M7af9233382d24ed8a6cd651528741792\" style=\"width:100%;height:100%;\"></div></div>\n", "<script>\n", "require.config({\n", "paths:{\n", "'vis':'http://www.xavierdupre.fr/js/visjs/vis.min',\n", "},\n", "});\n", "\n", "require(['vis'], function(vis) { \n", "  var nodes = new vis.DataSet([\n", "    {id: 1, label: 'Node 1'},\n", "    {id: 2, label: 'Node 2'},\n", "    {id: 3, label: 'Node 3'},\n", "    {id: 4, label: 'Node 4'},\n", "    {id: 5, label: 'Node 5'}\n", "  ]);\n", "\n", "  // create an array with edges\n", "  var edges = new vis.DataSet([\n", "    {from: 1, to: 3},\n", "    {from: 1, to: 2},\n", "    {from: 2, to: 4},\n", "    {from: 2, to: 5},\n", "    {from: 3, to: 3}\n", "  ]);\n", "\n", "  // create a network\n", "  var data = {\n", "    nodes: nodes,\n", "    edges: edges\n", "  };\n", "  var options = {};\n", "  var container = document.getElementById('M7af9233382d24ed8a6cd651528741792');\n", "  var network = new vis.Network(container, data, options);\n", " });\n", "\n", "</script>\n"], "text/plain": ["<jyquickhelper.jspy.render_nb_js.RenderJS at 0x208a6d27860>"]}, "execution_count": 3, "metadata": {}, "output_type": "execute_result"}], "source": ["from jyquickhelper import RenderJS\n", "css = ['http://www.xavierdupre.fr/js/visjs/vis.min.css']\n", "libs = [dict(path='http://www.xavierdupre.fr/js/visjs/vis.min.js', name='vis')]\n", "script = \"\"\"\n", "  var nodes = new vis.DataSet([\n", "    {id: 1, label: 'Node 1'},\n", "    {id: 2, label: 'Node 2'},\n", "    {id: 3, label: 'Node 3'},\n", "    {id: 4, label: 'Node 4'},\n", "    {id: 5, label: 'Node 5'}\n", "  ]);\n", "\n", "  // create an array with edges\n", "  var edges = new vis.DataSet([\n", "    {from: 1, to: 3},\n", "    {from: 1, to: 2},\n", "    {from: 2, to: 4},\n", "    {from: 2, to: 5},\n", "    {from: 3, to: 3}\n", "  ]);\n", "\n", "  // create a network\n", "  var data = {\n", "    nodes: nodes,\n", "    edges: edges\n", "  };\n", "  var options = {};\n", "  var container = document.getElementById('__ID__');\n", "  var network = new vis.Network(container, data, options);\n", "\"\"\"\n", "jr = RenderJS(script, css=css, libs=libs)\n", "jr"]}, {"cell_type": "code", "execution_count": 3, "metadata": {}, "outputs": [{"name": "stdout", "output_type": "stream", "text": ["<div id=\"M7af9233382d24ed8a6cd651528741792-css\"><link rel=\"stylesheet\" href=\"http://www.xavierdupre.fr/js/visjs/vis.min.css\" type=\"text/css\" /><div id=\"M7af9233382d24ed8a6cd651528741792\" style=\"width:100%;height:100%;\"></div></div>\n", "<script>\n", "require.config({\n", "paths:{\n", "'vis':'http://www.xavierdupre.fr/js/visjs/vis.min',\n", "},\n", "});\n", "\n", "require(['vis'], function(vis) { \n", "  var nodes = new vis.DataSet([\n", "    {id: 1, label: 'Node 1'},\n", "    {id: 2, label: 'Node 2'},\n", "    {id: 3, label: 'Node 3'},\n", "    {id: 4, label: 'Node 4'},\n", "    {id: 5, label: 'Node 5'}\n", "  ]);\n", "\n", "  // create an array with edges\n", "  var edges = new vis.DataSet([\n", "    {from: 1, to: 3},\n", "    {from: 1, to: 2},\n", "    {from: 2, to: 4},\n", "    {from: 2, to: 5},\n", "    {from: 3, to: 3}\n", "  ]);\n", "\n", "  // create a network\n", "  var data = {\n", "    nodes: nodes,\n", "    edges: edges\n", "  };\n", "  var options = {};\n", "  var container = document.getElementById('M7af9233382d24ed8a6cd651528741792');\n", "  var network = new vis.Network(container, data, options);\n", " });\n", "\n", "</script>\n", "\n"]}], "source": ["print(jr._repr_html_())"]}, {"cell_type": "markdown", "metadata": {}, "source": ["## More complex example"]}, {"cell_type": "code", "execution_count": 4, "metadata": {}, "outputs": [{"data": {"text/html": ["<div id=\"M0cf52fbdc869438793c3b342839b5c7a-css\"><link rel=\"stylesheet\" href=\"http://www.xavierdupre.fr/js/visjs/vis-network.min.css\" type=\"text/css\" /><div id=\"M0cf52fbdc869438793c3b342839b5c7a\" style=\"width: 400px; height: 400px; border: 1px solid lightgray;\"></div></div>\n", "<script>\n", "require.config({\n", "paths:{\n", "'vis':'http://www.xavierdupre.fr/js/visjs/vis.min',\n", "},\n", "});\n", "\n", "require(['vis'], function(vis) { \n", "var nodes = null;\n", "var edges = null;\n", "var network = null;\n", "\n", "function draw() {\n", "  // create people.\n", "  // value corresponds with the age of the person\n", "  nodes = [\n", "    {id: 1,  value: 2,  label: 'Algie' },\n", "    {id: 2,  value: 31, label: 'Alston'},\n", "    {id: 3,  value: 12, label: 'Barney'},\n", "    {id: 4,  value: 16, label: 'Coley' },\n", "    {id: 5,  value: 17, label: 'Grant' },\n", "    {id: 6,  value: 15, label: 'Langdon'},\n", "    {id: 7,  value: 6,  label: 'Lee'},\n", "    {id: 8,  value: 5,  label: 'Merlin'},\n", "    {id: 9,  value: 30, label: 'Mick'},\n", "    {id: 10, value: 18, label: 'Tod'},\n", "  ];\n", "\n", "  // create connections between people\n", "  // value corresponds with the amount of contact between two people\n", "  edges = [\n", "    {from: 2, to: 8, value: 3, title: '3 emails per week'},\n", "    {from: 2, to: 9, value: 5, title: '5 emails per week'},\n", "    {from: 2, to: 10,value: 1, title: '1 emails per week'},\n", "    {from: 4, to: 6, value: 8, title: '8 emails per week'},\n", "    {from: 5, to: 7, value: 2, title: '2 emails per week'},\n", "    {from: 4, to: 5, value: 1, title: '1 emails per week'},\n", "    {from: 9, to: 10,value: 2, title: '2 emails per week'},\n", "    {from: 2, to: 3, value: 6, title: '6 emails per week'},\n", "    {from: 3, to: 9, value: 4, title: '4 emails per week'},\n", "    {from: 5, to: 3, value: 1, title: '1 emails per week'},\n", "    {from: 2, to: 7, value: 4, title: '4 emails per week'}\n", "  ];\n", "\n", "  // Instantiate our network object.\n", "  var container = document.getElementById('M0cf52fbdc869438793c3b342839b5c7a');\n", "  var data = {\n", "    nodes: nodes,\n", "    edges: edges\n", "  };\n", "  var options = {\n", "    nodes: {\n", "      shape: 'dot',\n", "      scaling:{\n", "        label: {\n", "          min:8,\n", "          max:20\n", "        }\n", "      }\n", "    }\n", "  };\n", "  network = new vis.Network(container, data, options);\n", "}\n", "draw();\n", " });\n", "\n", "</script>\n"], "text/plain": ["<jyquickhelper.jspy.render_nb_js.RenderJS at 0x208a6d3e208>"]}, "execution_count": 5, "metadata": {}, "output_type": "execute_result"}], "source": ["from jyquickhelper import RenderJS\n", "css = ['http://www.xavierdupre.fr/js/visjs/vis-network.min.css']\n", "libs = [dict(path='http://www.xavierdupre.fr/js/visjs/vis.min.js', name='vis')]\n", "script = \"\"\"\n", "var nodes = null;\n", "var edges = null;\n", "var network = null;\n", "\n", "function draw() {\n", "  // create people.\n", "  // value corresponds with the age of the person\n", "  nodes = [\n", "    {id: 1,  value: 2,  label: 'Algie' },\n", "    {id: 2,  value: 31, label: 'Alston'},\n", "    {id: 3,  value: 12, label: 'Barney'},\n", "    {id: 4,  value: 16, label: 'Coley' },\n", "    {id: 5,  value: 17, label: 'Grant' },\n", "    {id: 6,  value: 15, label: 'Langdon'},\n", "    {id: 7,  value: 6,  label: 'Lee'},\n", "    {id: 8,  value: 5,  label: 'Merlin'},\n", "    {id: 9,  value: 30, label: 'Mick'},\n", "    {id: 10, value: 18, label: 'Tod'},\n", "  ];\n", "\n", "  // create connections between people\n", "  // value corresponds with the amount of contact between two people\n", "  edges = [\n", "    {from: 2, to: 8, value: 3, title: '3 emails per week'},\n", "    {from: 2, to: 9, value: 5, title: '5 emails per week'},\n", "    {from: 2, to: 10,value: 1, title: '1 emails per week'},\n", "    {from: 4, to: 6, value: 8, title: '8 emails per week'},\n", "    {from: 5, to: 7, value: 2, title: '2 emails per week'},\n", "    {from: 4, to: 5, value: 1, title: '1 emails per week'},\n", "    {from: 9, to: 10,value: 2, title: '2 emails per week'},\n", "    {from: 2, to: 3, value: 6, title: '6 emails per week'},\n", "    {from: 3, to: 9, value: 4, title: '4 emails per week'},\n", "    {from: 5, to: 3, value: 1, title: '1 emails per week'},\n", "    {from: 2, to: 7, value: 4, title: '4 emails per week'}\n", "  ];\n", "\n", "  // Instantiate our network object.\n", "  var container = document.getElementById('__ID__');\n", "  var data = {\n", "    nodes: nodes,\n", "    edges: edges\n", "  };\n", "  var options = {\n", "    nodes: {\n", "      shape: 'dot',\n", "      scaling:{\n", "        label: {\n", "          min:8,\n", "          max:20\n", "        }\n", "      }\n", "    }\n", "  };\n", "  network = new vis.Network(container, data, options);\n", "}\n", "draw();\n", "\"\"\"\n", "jr = RenderJS(script, css=css, libs=libs, style=\"width: 400px; height: 400px; border: 1px solid lightgray;\")\n", "jr"]}, {"cell_type": "code", "execution_count": 5, "metadata": {}, "outputs": [{"name": "stdout", "output_type": "stream", "text": ["<div id=\"M0cf52fbdc869438793c3b342839b5c7a-css\"><link rel=\"stylesheet\" href=\"http://www.xavierdupre.fr/js/visjs/vis-network.min.css\" type=\"text/css\" /><div id=\"M0cf52fbdc869438793c3b342839b5c7a\" style=\"width: 400px; height: 400px; border: 1px solid lightgray;\"></div></div>\n", "<script>\n", "require.config({\n", "paths:{\n", "'vis':'http://www.xavierdupre.fr/js/visjs/vis.min',\n", "},\n", "});\n", "\n", "require(['vis'], function(vis) { \n", "var nodes = null;\n", "var edges = null;\n", "var network = null;\n", "\n", "function draw() {\n", "  // create people.\n", "  // value corresponds with the age of the person\n", "  nodes = [\n", "    {id: 1,  value: 2,  label: 'Algie' },\n", "    {id: 2,  value: 31, label: 'Alston'},\n", "    {id: 3,  value: 12, label: 'Barney'},\n", "    {id: 4,  value: 16, label: 'Coley' },\n", "    {id: 5,  value: 17, label: 'Grant' },\n", "    {id: 6,  value: 15, label: 'Langdon'},\n", "    {id: 7,  value: 6,  label: 'Lee'},\n", "    {id: 8,  value: 5,  label: 'Merlin'},\n", "    {id: 9,  value: 30, label: 'Mick'},\n", "    {id: 10, value: 18, label: 'Tod'},\n", "  ];\n", "\n", "  // create connections between people\n", "  // value corresponds with the amount of contact between two people\n", "  edges = [\n", "    {from: 2, to: 8, value: 3, title: '3 emails per week'},\n", "    {from: 2, to: 9, value: 5, title: '5 emails per week'},\n", "    {from: 2, to: 10,value: 1, title: '1 emails per week'},\n", "    {from: 4, to: 6, value: 8, title: '8 emails per week'},\n", "    {from: 5, to: 7, value: 2, title: '2 emails per week'},\n", "    {from: 4, to: 5, value: 1, title: '1 emails per week'},\n", "    {from: 9, to: 10,value: 2, title: '2 emails per week'},\n", "    {from: 2, to: 3, value: 6, title: '6 emails per week'},\n", "    {from: 3, to: 9, value: 4, title: '4 emails per week'},\n", "    {from: 5, to: 3, value: 1, title: '1 emails per week'},\n", "    {from: 2, to: 7, value: 4, title: '4 emails per week'}\n", "  ];\n", "\n", "  // Instantiate our network object.\n", "  var container = document.getElementById('M0cf52fbdc869438793c3b342839b5c7a');\n", "  var data = {\n", "    nodes: nodes,\n", "    edges: edges\n", "  };\n", "  var options = {\n", "    nodes: {\n", "      shape: 'dot',\n", "      scaling:{\n", "        label: {\n", "          min:8,\n", "          max:20\n", "        }\n", "      }\n", "    }\n", "  };\n", "  network = new vis.Network(container, data, options);\n", "}\n", "draw();\n", " });\n", "\n", "</script>\n", "\n"]}], "source": ["print(jr._repr_html_())"]}, {"cell_type": "markdown", "metadata": {}, "source": ["## With the DOT language"]}, {"cell_type": "code", "execution_count": 6, "metadata": {}, "outputs": [{"data": {"text/html": ["<div id=\"M58bcfa511f434b0abc342c7dd3238a24-css\"><link rel=\"stylesheet\" href=\"http://www.xavierdupre.fr/js/visjs/vis.min.css\" type=\"text/css\" /><div id=\"M58bcfa511f434b0abc342c7dd3238a24\" style=\"width:100%;height:100%;\"></div></div>\n", "<script>\n", "require.config({\n", "paths:{\n", "'vis':'http://www.xavierdupre.fr/js/visjs/vis.min',\n", "},\n", "});\n", "\n", "require(['vis'], function(vis) { \n", "var DOTstring = 'digraph {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';\n", "var parsedData = vis.network.convertDot(DOTstring);\n", "var container = document.getElementById('M58bcfa511f434b0abc342c7dd3238a24');\n", "var network = new vis.Network(container, parsedData, parsedData.options);\n", " });\n", "\n", "</script>\n"], "text/plain": ["<jyquickhelper.jspy.render_nb_js.RenderJS at 0x208a6d3e9e8>"]}, "execution_count": 7, "metadata": {}, "output_type": "execute_result"}], "source": ["from jyquickhelper import RenderJS\n", "css = ['http://www.xavierdupre.fr/js/visjs/vis.min.css']\n", "libs = [dict(path='http://www.xavierdupre.fr/js/visjs/vis.min.js', name='vis')]\n", "script = \"\"\"\n", "var DOTstring = 'digraph {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';\n", "var parsedData = vis.network.convertDot(DOTstring);\n", "var container = document.getElementById('__ID__');\n", "var network = new vis.Network(container, parsedData, parsedData.options);\n", "\"\"\"\n", "jr = RenderJS(script, css=css, libs=libs)\n", "jr"]}, {"cell_type": "code", "execution_count": 7, "metadata": {}, "outputs": [{"data": {"text/html": ["<div id=\"Me0e5ed855a0e4fcf9b3dbdcdfbf0cbab-css\"><link rel=\"stylesheet\" href=\"http://www.xavierdupre.fr/js/visjs/vis.min.css\" type=\"text/css\" /><div id=\"Me0e5ed855a0e4fcf9b3dbdcdfbf0cbab\" style=\"width:100%;height:100%;\"></div></div>\n", "<script>\n", "require.config({\n", "paths:{\n", "'vis':'http://www.xavierdupre.fr/js/visjs/vis.min',\n", "},\n", "});\n", "\n", "require(['vis'], function(vis) { \n", "var DOTstring = 'digraph { d[label=\"longer label\"]; a -> b -> c; b -> d; }';\n", "var parsedData = vis.network.convertDot(DOTstring);\n", "var container = document.getElementById('Me0e5ed855a0e4fcf9b3dbdcdfbf0cbab');\n", "var network = new vis.Network(container, parsedData, parsedData.options);\n", " });\n", "\n", "</script>\n"], "text/plain": ["<jyquickhelper.jspy.render_nb_js.RenderJS at 0x208a6d3edd8>"]}, "execution_count": 8, "metadata": {}, "output_type": "execute_result"}], "source": ["from jyquickhelper import RenderJS\n", "css = ['http://www.xavierdupre.fr/js/visjs/vis.min.css']\n", "libs = [dict(path='http://www.xavierdupre.fr/js/visjs/vis.min.js', name='vis')]\n", "script = \"\"\"\n", "var DOTstring = 'digraph { d[label=\"longer label\"]; a -> b -> c; b -> d; }';\n", "var parsedData = vis.network.convertDot(DOTstring);\n", "var container = document.getElementById('__ID__');\n", "var network = new vis.Network(container, parsedData, parsedData.options);\n", "\"\"\"\n", "jr = RenderJS(script, css=css, libs=libs)\n", "jr"]}, {"cell_type": "code", "execution_count": 8, "metadata": {}, "outputs": [{"name": "stdout", "output_type": "stream", "text": ["<div id=\"Me0e5ed855a0e4fcf9b3dbdcdfbf0cbab-css\"><link rel=\"stylesheet\" href=\"http://www.xavierdupre.fr/js/visjs/vis.min.css\" type=\"text/css\" /><div id=\"Me0e5ed855a0e4fcf9b3dbdcdfbf0cbab\" style=\"width:100%;height:100%;\"></div></div>\n", "<script>\n", "require.config({\n", "paths:{\n", "'vis':'http://www.xavierdupre.fr/js/visjs/vis.min',\n", "},\n", "});\n", "\n", "require(['vis'], function(vis) { \n", "var DOTstring = 'digraph { d[label=\"longer label\"]; a -> b -> c; b -> d; }';\n", "var parsedData = vis.network.convertDot(DOTstring);\n", "var container = document.getElementById('Me0e5ed855a0e4fcf9b3dbdcdfbf0cbab');\n", "var network = new vis.Network(container, parsedData, parsedData.options);\n", " });\n", "\n", "</script>\n", "\n"]}], "source": ["print(jr._repr_html_())"]}, {"cell_type": "code", "execution_count": 9, "metadata": {}, "outputs": [{"data": {"text/html": ["<div id=\"M3f83c302550647499fbd05c2d34fc7f9-css\"><link rel=\"stylesheet\" href=\"http://www.xavierdupre.fr/js/visjs/vis.min.css\" type=\"text/css\" /><div id=\"M3f83c302550647499fbd05c2d34fc7f9\" style=\"width:100%;height:200px;\"></div></div>\n", "<script>\n", "require.config({\n", "paths:{\n", "'vis':'http://www.xavierdupre.fr/js/visjs/vis.min',\n", "},\n", "});\n", "\n", "require(['vis'], function(vis) { \n", "var DOTstring = 'digraph { d[label=\"longer label\"]; a -> b -> c; b -> d; }';\n", "var parsedData = vis.network.convertDot(DOTstring);\n", "var container = document.getElementById('M3f83c302550647499fbd05c2d34fc7f9');\n", "var options =  parsedData.options;\n", "var options = {\n", "        layout: {\n", "            hierarchical: {\n", "                direction: \"UD\",\n", "                sortMethod: \"directed\"\n", "            }\n", "        }\n", "        };\n", "var network = new vis.Network(container, parsedData, options);\n", " });\n", "\n", "</script>\n"], "text/plain": ["<jyquickhelper.jspy.render_nb_js.RenderJS at 0x208a6d496d8>"]}, "execution_count": 10, "metadata": {}, "output_type": "execute_result"}], "source": ["from jyquickhelper import RenderJS\n", "css = ['http://www.xavierdupre.fr/js/visjs/vis.min.css']\n", "libs = [dict(path='http://www.xavierdupre.fr/js/visjs/vis.min.js', name='vis')]\n", "script = \"\"\"\n", "var DOTstring = 'digraph { d[label=\"longer label\"]; a -> b -> c; b -> d; }';\n", "var parsedData = vis.network.convertDot(DOTstring);\n", "var container = document.getElementById('__ID__');\n", "var options =  parsedData.options;\n", "var options = {\n", "        layout: {\n", "            hierarchical: {\n", "                direction: \"UD\",\n", "                sortMethod: \"directed\"\n", "            }\n", "        }\n", "        };\n", "var network = new vis.Network(container, parsedData, options);\n", "\"\"\"\n", "jr = RenderJS(script, css=css, libs=libs, height=\"200px\")\n", "jr"]}, {"cell_type": "code", "execution_count": 10, "metadata": {}, "outputs": [], "source": []}], "metadata": {"kernelspec": {"display_name": "Python 3", "language": "python", "name": "python3"}, "language_info": {"codemirror_mode": {"name": "ipython", "version": 3}, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.7.2"}}, "nbformat": 4, "nbformat_minor": 2}