{"cells": [{"cell_type": "markdown", "metadata": {}, "source": ["# treant-js\n", "\n", "[treant-js](http://fperucic.github.io/treant-js/) is a javascript library to plot diagram and trees. The goal is to wrap it as a library for python."]}, {"cell_type": "markdown", "metadata": {}, "source": ["[documentation](http://fperucic.github.io/treant-js/) [source](https://github.com/fperucic/treant-js) [tutorial](http://help.plot.ly/tutorials/) [gallery](http://fperucic.github.io/treant-js/#orgchart-examples)"]}, {"cell_type": "code", "execution_count": 1, "metadata": {"collapsed": false}, "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", "    }\n", "    return a;\n", "}\n", "var update_menu_string = function(begin, lfirst, llast, sformat, send, keep_item) {\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", "    for (i = 0; i <= llast; i++) {\n", "        tags.push(\"h\" + i);\n", "    }\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;\").replace(\">\", \"&gt;\").replace(\"&\", \"&amp;\")\n", "        }\n", "\n", "        if (title.length == 0) {\n", "            continue;\n", "        }\n", "\n", "        while (level < memo_level) {\n", "            text_menu += \"</ul>\\n\";\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) + sformat.replace(\"__HREF__\", href).replace(\"__TITLE__\", title);\n", "    }\n", "    while (1 < memo_level) {\n", "        text_menu += \"</ul>\\n\";\n", "        memo_level -= 1;\n", "    }\n", "    text_menu += send;\n", "    //text_menu += \"\\n\" + text_memo;\n", "    return text_menu;\n", "};\n", "var update_menu = function() {\n", "    var sbegin = \"\";\n", "    var sformat = '<li><a href=\"#__HREF__\">__TITLE__</a></li>';\n", "    var send = \"\";\n", "    var keep_item = -1;\n", "    var text_menu = update_menu_string(sbegin, 2, 4, sformat, send, keep_item);\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": ["## Javacript in the notebook\n", "\n", "Let's take one of the example and look at the source: [tennis draw](http://fperucic.github.io/treant-js/examples/tennis-draw/). I took the source of the example and I changed relative to absolute paths. There are two parts:\n", "\n", "* HTML: defines styles, references external script, new HTML and section div\n", "* Javascript: defines a tree structure as Json and calls *treant-js* to convert it into SVG."]}, {"cell_type": "code", "execution_count": 2, "metadata": {"collapsed": false}, "outputs": [{"data": {"text/html": ["\n", "<style>\n", ".chart { height: 600px; width: 900px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; }\n", "\n", ".tennis-draw {\n", "    font-size: 10px;\n", "    width: 100px;\n", "}\n", "\n", ".tennis-draw.winner { height: 38px; }\n", ".tennis-draw.winner:hover { background: url('http://fperucic.github.io/treant-js/examples/tennis-draw/trophy.png') right 0 no-repeat; }\n", ".tennis-draw.winner .node-name { padding-left: 10px; margin-top: 1px; display: block; }\n", "\n", ".tennis-draw .node-name { padding: 2px; white-space: pre; color: #00AFF0; }\n", ".tennis-draw .node-desc { padding: 2px; color: #999; }\n", "\n", ".tennis-draw.first-draw .node-title,\n", ".tennis-draw.first-draw .node-name,\n", ".tennis-draw.first-draw img { position: absolute; top: -8px; }\n", ".tennis-draw.first-draw:hover img { width: 20px; top: -12px; }\n", "\n", ".tennis-draw.first-draw { width: 165px; height: 20px; }\n", ".tennis-draw.first-draw img { margin: 3px 4px 0 0; left: 25px; }\n", ".tennis-draw.first-draw .node-title { margin-top: 3px; }\n", ".tennis-draw.first-draw .node-name { width: 113px; padding-left: 50px; }\n", ".tennis-draw.first-draw.bye .node-name { color: #999; }\n", "</style>\n", "\n", "<link rel=\"stylesheet\" href=\"http://fperucic.github.io/treant-js/Treant.css\">\n", "<script src=\"http://fperucic.github.io/treant-js/vendor/raphael.js\"></script>\n", "<script src=\"http://fperucic.github.io/treant-js/Treant.js\"></script>\n", "<div class=\"chart\" id=\"OrganiseChart6\"></div>"], "text/plain": ["<IPython.core.display.HTML object>"]}, "metadata": {}, "output_type": "display_data"}], "source": ["%%html\n", "\n", "<style>\n", ".chart { height: 600px; width: 900px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; }\n", "\n", ".tennis-draw {\n", "    font-size: 10px;\n", "    width: 100px;\n", "}\n", "\n", ".tennis-draw.winner { height: 38px; }\n", ".tennis-draw.winner:hover { background: url('http://fperucic.github.io/treant-js/examples/tennis-draw/trophy.png') right 0 no-repeat; }\n", ".tennis-draw.winner .node-name { padding-left: 10px; margin-top: 1px; display: block; }\n", "\n", ".tennis-draw .node-name { padding: 2px; white-space: pre; color: #00AFF0; }\n", ".tennis-draw .node-desc { padding: 2px; color: #999; }\n", "\n", ".tennis-draw.first-draw .node-title,\n", ".tennis-draw.first-draw .node-name,\n", ".tennis-draw.first-draw img { position: absolute; top: -8px; }\n", ".tennis-draw.first-draw:hover img { width: 20px; top: -12px; }\n", "\n", ".tennis-draw.first-draw { width: 165px; height: 20px; }\n", ".tennis-draw.first-draw img { margin: 3px 4px 0 0; left: 25px; }\n", ".tennis-draw.first-draw .node-title { margin-top: 3px; }\n", ".tennis-draw.first-draw .node-name { width: 113px; padding-left: 50px; }\n", ".tennis-draw.first-draw.bye .node-name { color: #999; }\n", "</style>\n", "\n", "<link rel=\"stylesheet\" href=\"http://fperucic.github.io/treant-js/Treant.css\">\n", "<script src=\"http://fperucic.github.io/treant-js/vendor/raphael.js\"></script>\n", "<script src=\"http://fperucic.github.io/treant-js/Treant.js\"></script>\n", "<div class=\"chart\" id=\"OrganiseChart6\"></div>"]}, {"cell_type": "code", "execution_count": 3, "metadata": {"collapsed": false}, "outputs": [{"data": {"application/javascript": ["\n", "// source: \n", "// http://www.atpworldtour.com/Share/Event-Draws.aspx?EventId=410&Year=2013\n", "\n", "var tree_structure = {\n", "    chart: {\n", "        container: \"#OrganiseChart6\",\n", "        levelSeparation:    20,\n", "        siblingSeparation:  15,\n", "        subTeeSeparation:   15,\n", "        rootOrientation: \"EAST\",\n", "\n", "        node: {\n", "            HTMLclass: \"tennis-draw\",\n", "            drawLineThrough: true\n", "        },\n", "        connectors: {\n", "            type: \"straight\",\n", "            style: {\n", "                \"stroke-width\": 2,\n", "                \"stroke\": \"#ccc\"\n", "            }\n", "        }\n", "    },\n", "    \n", "    nodeStructure: {\n", "        text: {\n", "            name: {val: \"Djokovic, Novak\", \n", "                   href: \"http://www.atpworldtour.com/Tennis/Players/Top-Players/Novak-Djokovic.aspx\"}\n", "        },\n", "        HTMLclass: \"winner\",\n", "        children: [\n", "            {\n", "                text: {\n", "                    name: \"Djokovic, Novak\",\n", "                    desc: \"4-6, 6-2, 6-2\"\n", "                },\n", "                children: [\n", "                    {\n", "                        text: {\n", "                            name: \"Djokovic, Novak\",\n", "                            desc: \"4-6, 6-1, 6-4\"\n", "                        },\n", "                        children: [\n", "                            {\n", "                                text: {\n", "                                    name: \"Djokovic, Novak\",\n", "                                    desc: \"4-6, 6-1, 6-4\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Djokovic, Novak\",\n", "                                            title: 1\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/srb.jpg\",\n", "                                        HTMLclass: \"first-draw\",\n", "                                    },\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Bye\",\n", "                                            title: 2\n", "                                        },\n", "                                        HTMLclass: \"first-draw bye\"\n", "                                    }\n", "                                ]\n", "                            },\n", "                            {\n", "                                text: {\n", "                                    name: \"Youzhny, Mikhail\",\n", "                                    desc: \"6-4, 6-0\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Youzhny, Mikhail\",\n", "                                            title: 3\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/rus.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    },\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Gimeno-Traver, Daniel\",\n", "                                            title: 4\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/esp.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            }\n", "                        ]\n", "                    },\n", "                    {\n", "                        text: {\n", "                            name: \"Monaco, Juan\",\n", "                            desc: \"6-0, 3-6, 6-3\"\n", "                        },\n", "                        children: [\n", "                            {\n", "                                text: {\n", "                                    name: \"Gulbis, Ernests\",\n", "                                    desc: \"4-6, 6-2, 6-3\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: {\n", "                                         name: \"Gulbis, Ernests\",\n", "                                         title: 5\n", "                                     },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/lat.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    },\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Isner, John\",\n", "                                            title: 6\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/usa.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            },\n", "                            {\n", "                                text: {\n", "                                    name: \"Monaco, Juan\",\n", "                                    desc: \"6-4, 6-0\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Klizan, Martin\",\n", "                                            title: 7\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/slo.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    },\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Monaco, Juan\",\n", "                                            title: 8\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/arg.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            }\n", "                        ]\n", "                    }\n", "                ]\n", "            },\n", "            {\n", "                text: {\n", "                    name: \"Nieminen, Jarkko\",\n", "                    desc: \"6-3, 1-6, 7-6(3)\"\n", "                },\n", "                children: [\n", "                    {\n", "                        text: {\n", "                            name: \"Nieminen, Jarkko\",\n", "                            desc: \"4-6, 6-1, 6-4\"\n", "                        },\n", "                        children: [\n", "                            {\n", "                                text: {\n", "                                    name: \"Raonic, Milos\",\n", "                                    desc: \"6-1, 6-4\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Raonic, Milos\",\n", "                                            title: 9\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/can.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    },\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Benneteau, Julien\",\n", "                                            title: 10\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/fra.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            },\n", "                            {\n", "                                text: {\n", "                                    name: \"Nieminen, Jarkko\",\n", "                                    desc: \"6-1, 6-2\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Nieminen, Jarkko\",\n", "                                            title: 11\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/fin.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    },\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Troicki, Viktor\",\n", "                                            title: 12\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/srb.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            }\n", "                        ]\n", "                    },\n", "                    {\n", "                        text: {\n", "                            name: \"Del Potro, Juan Martin\",\n", "                            desc: \"6-2, 6-4\"\n", "                        },\n", "                        children: [\n", "                            {\n", "                                text: {\n", "                                    name: \"Dolgopolov, Alexandr\",\n", "                                    desc: \"4-6, 6-2, 6-3\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Dolgopolov, Alexandr\",\n", "                                            title: 13\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/ukr.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    },\n", "                                    {\n", "                                        text: {\n", "                                            name: \"Tomic, Bernard\",\n", "                                            title: 14\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/aus.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            },\n", "                            {\n", "                                text: {\n", "                                    name: \"Del Potro, Juan Martin\",\n", "                                    desc: \"6-4, 6-0\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: {\n", "                                            name: \"Bye\",\n", "                                            title: 15\n", "                                        },\n", "                                        HTMLclass: \"first-draw bye\"\n", "                                    },\n", "                                    {\n", "                                        text: {\n", "                                            name: \"Del Potro, Juan Martin\",\n", "                                            title: 16\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/arg.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            }\n", "                        ]\n", "                    }\n", "                ]\n", "            }\n", "        ]\n", "    }\n", "};\n", "\n", "new Treant( tree_structure );"], "text/plain": ["<IPython.core.display.Javascript object>"]}, "metadata": {}, "output_type": "display_data"}], "source": ["%%javascript\n", "\n", "// source: \n", "// http://www.atpworldtour.com/Share/Event-Draws.aspx?EventId=410&Year=2013\n", "\n", "var tree_structure = {\n", "    chart: {\n", "        container: \"#OrganiseChart6\",\n", "        levelSeparation:    20,\n", "        siblingSeparation:  15,\n", "        subTeeSeparation:   15,\n", "        rootOrientation: \"EAST\",\n", "\n", "        node: {\n", "            HTMLclass: \"tennis-draw\",\n", "            drawLineThrough: true\n", "        },\n", "        connectors: {\n", "            type: \"straight\",\n", "            style: {\n", "                \"stroke-width\": 2,\n", "                \"stroke\": \"#ccc\"\n", "            }\n", "        }\n", "    },\n", "    \n", "    nodeStructure: {\n", "        text: {\n", "            name: {val: \"Djokovic, Novak\", \n", "                   href: \"http://www.atpworldtour.com/Tennis/Players/Top-Players/Novak-Djokovic.aspx\"}\n", "        },\n", "        HTMLclass: \"winner\",\n", "        children: [\n", "            {\n", "                text: {\n", "                    name: \"Djokovic, Novak\",\n", "                    desc: \"4-6, 6-2, 6-2\"\n", "                },\n", "                children: [\n", "                    {\n", "                        text: {\n", "                            name: \"Djokovic, Novak\",\n", "                            desc: \"4-6, 6-1, 6-4\"\n", "                        },\n", "                        children: [\n", "                            {\n", "                                text: {\n", "                                    name: \"Djokovic, Novak\",\n", "                                    desc: \"4-6, 6-1, 6-4\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Djokovic, Novak\",\n", "                                            title: 1\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/srb.jpg\",\n", "                                        HTMLclass: \"first-draw\",\n", "                                    },\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Bye\",\n", "                                            title: 2\n", "                                        },\n", "                                        HTMLclass: \"first-draw bye\"\n", "                                    }\n", "                                ]\n", "                            },\n", "                            {\n", "                                text: {\n", "                                    name: \"Youzhny, Mikhail\",\n", "                                    desc: \"6-4, 6-0\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Youzhny, Mikhail\",\n", "                                            title: 3\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/rus.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    },\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Gimeno-Traver, Daniel\",\n", "                                            title: 4\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/esp.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            }\n", "                        ]\n", "                    },\n", "                    {\n", "                        text: {\n", "                            name: \"Monaco, Juan\",\n", "                            desc: \"6-0, 3-6, 6-3\"\n", "                        },\n", "                        children: [\n", "                            {\n", "                                text: {\n", "                                    name: \"Gulbis, Ernests\",\n", "                                    desc: \"4-6, 6-2, 6-3\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: {\n", "                                         name: \"Gulbis, Ernests\",\n", "                                         title: 5\n", "                                     },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/lat.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    },\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Isner, John\",\n", "                                            title: 6\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/usa.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            },\n", "                            {\n", "                                text: {\n", "                                    name: \"Monaco, Juan\",\n", "                                    desc: \"6-4, 6-0\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Klizan, Martin\",\n", "                                            title: 7\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/slo.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    },\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Monaco, Juan\",\n", "                                            title: 8\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/arg.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            }\n", "                        ]\n", "                    }\n", "                ]\n", "            },\n", "            {\n", "                text: {\n", "                    name: \"Nieminen, Jarkko\",\n", "                    desc: \"6-3, 1-6, 7-6(3)\"\n", "                },\n", "                children: [\n", "                    {\n", "                        text: {\n", "                            name: \"Nieminen, Jarkko\",\n", "                            desc: \"4-6, 6-1, 6-4\"\n", "                        },\n", "                        children: [\n", "                            {\n", "                                text: {\n", "                                    name: \"Raonic, Milos\",\n", "                                    desc: \"6-1, 6-4\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Raonic, Milos\",\n", "                                            title: 9\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/can.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    },\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Benneteau, Julien\",\n", "                                            title: 10\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/fra.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            },\n", "                            {\n", "                                text: {\n", "                                    name: \"Nieminen, Jarkko\",\n", "                                    desc: \"6-1, 6-2\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Nieminen, Jarkko\",\n", "                                            title: 11\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/fin.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    },\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Troicki, Viktor\",\n", "                                            title: 12\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/srb.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            }\n", "                        ]\n", "                    },\n", "                    {\n", "                        text: {\n", "                            name: \"Del Potro, Juan Martin\",\n", "                            desc: \"6-2, 6-4\"\n", "                        },\n", "                        children: [\n", "                            {\n", "                                text: {\n", "                                    name: \"Dolgopolov, Alexandr\",\n", "                                    desc: \"4-6, 6-2, 6-3\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Dolgopolov, Alexandr\",\n", "                                            title: 13\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/ukr.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    },\n", "                                    {\n", "                                        text: {\n", "                                            name: \"Tomic, Bernard\",\n", "                                            title: 14\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/aus.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            },\n", "                            {\n", "                                text: {\n", "                                    name: \"Del Potro, Juan Martin\",\n", "                                    desc: \"6-4, 6-0\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: {\n", "                                            name: \"Bye\",\n", "                                            title: 15\n", "                                        },\n", "                                        HTMLclass: \"first-draw bye\"\n", "                                    },\n", "                                    {\n", "                                        text: {\n", "                                            name: \"Del Potro, Juan Martin\",\n", "                                            title: 16\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/arg.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            }\n", "                        ]\n", "                    }\n", "                ]\n", "            }\n", "        ]\n", "    }\n", "};\n", "\n", "new Treant( tree_structure );"]}, {"cell_type": "markdown", "metadata": {"collapsed": true}, "source": ["## Wrap treant-js into a Python library\n", "\n", "We would to produce a function with the following signature:"]}, {"cell_type": "code", "execution_count": 4, "metadata": {"collapsed": true}, "outputs": [], "source": ["def display_treant(json, css):\n", "    pass"]}, {"cell_type": "markdown", "metadata": {}, "source": ["First issue: the javascript is hosted on a website which means the notebook will not work offline unless we import the javascript at a specific location. See [Jupyter notebook extensions](https://github.com/ipython-contrib/IPython-notebook-extensions) to see where to place them."]}, {"cell_type": "code", "execution_count": 5, "metadata": {"collapsed": true}, "outputs": [], "source": ["css = \"\"\"\n", ".chart { height: 600px; width: 900px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; }\n", "\n", ".tennis-draw {\n", "    font-size: 10px;\n", "    width: 100px;\n", "}\n", "\n", ".tennis-draw.winner { height: 38px; }\n", ".tennis-draw.winner:hover { \n", "    background: url('http://fperucic.github.io/treant-js/examples/tennis-draw/trophy.png') right 0 no-repeat; \n", "}\n", ".tennis-draw.winner .node-name { padding-left: 10px; margin-top: 1px; display: block; }\n", "\n", ".tennis-draw .node-name { padding: 2px; white-space: pre; color: #00AFF0; }\n", ".tennis-draw .node-desc { padding: 2px; color: #999; }\n", "\n", ".tennis-draw.first-draw .node-title,\n", ".tennis-draw.first-draw .node-name,\n", ".tennis-draw.first-draw img { position: absolute; top: -8px; }\n", ".tennis-draw.first-draw:hover img { width: 20px; top: -12px; }\n", "\n", ".tennis-draw.first-draw { width: 165px; height: 20px; }\n", ".tennis-draw.first-draw img { margin: 3px 4px 0 0; left: 25px; }\n", ".tennis-draw.first-draw .node-title { margin-top: 3px; }\n", ".tennis-draw.first-draw .node-name { width: 113px; padding-left: 50px; }\n", ".tennis-draw.first-draw.bye .node-name { color: #999; }\n", "\"\"\"\n", "\n", "classname = \"chart\"\n", "\n", "# this part should be part of a nice API (to avoid trick like this __DIVID__)\n", "json_tree = \"\"\"{\n", "        container: \"#__DIVID__\",\n", "        levelSeparation:    20,\n", "        siblingSeparation:  15,\n", "        subTeeSeparation:   15,\n", "        rootOrientation: \"EAST\",\n", "\n", "        node: {\n", "            HTMLclass: \"tennis-draw\",\n", "            drawLineThrough: true\n", "        },\n", "        connectors: {\n", "            type: \"straight\",\n", "            style: {\n", "                \"stroke-width\": 2,\n", "                \"stroke\": \"#ccc\"\n", "            }\n", "        }\n", "    }\"\"\"\n", "\n", "# there should a nice API to define that\n", "json_data = \"\"\"{\n", "        text: {\n", "            name: {val: \"Djokovic, Novak\", \n", "                   href: \"http://www.atpworldtour.com/Tennis/Players/Top-Players/Novak-Djokovic.aspx\"}\n", "        },\n", "        HTMLclass: \"winner\",\n", "        children: [\n", "            {\n", "                text: {\n", "                    name: \"Djokovic, Novak\",\n", "                    desc: \"4-6, 6-2, 6-2\"\n", "                },\n", "                children: [\n", "                    {\n", "                        text: {\n", "                            name: \"Djokovic, Novak\",\n", "                            desc: \"4-6, 6-1, 6-4\"\n", "                        },\n", "                        children: [\n", "                            {\n", "                                text: {\n", "                                    name: \"Djokovic, Novak\",\n", "                                    desc: \"4-6, 6-1, 6-4\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Djokovic, Novak\",\n", "                                            title: 1\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/srb.jpg\",\n", "                                        HTMLclass: \"first-draw\",\n", "                                    },\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Bye\",\n", "                                            title: 2\n", "                                        },\n", "                                        HTMLclass: \"first-draw bye\"\n", "                                    }\n", "                                ]\n", "                            },\n", "                            {\n", "                                text: {\n", "                                    name: \"Youzhny, Mikhail\",\n", "                                    desc: \"6-4, 6-0\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Youzhny, Mikhail\",\n", "                                            title: 3\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/rus.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    },\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Gimeno-Traver, Daniel\",\n", "                                            title: 4\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/esp.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            }\n", "                        ]\n", "                    },\n", "                    {\n", "                        text: {\n", "                            name: \"Monaco, Juan\",\n", "                            desc: \"6-0, 3-6, 6-3\"\n", "                        },\n", "                        children: [\n", "                            {\n", "                                text: {\n", "                                    name: \"Gulbis, Ernests\",\n", "                                    desc: \"4-6, 6-2, 6-3\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: {\n", "                                         name: \"Gulbis, Ernests\",\n", "                                         title: 5\n", "                                     },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/lat.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    },\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Isner, John\",\n", "                                            title: 6\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/usa.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            },\n", "                            {\n", "                                text: {\n", "                                    name: \"Monaco, Juan\",\n", "                                    desc: \"6-4, 6-0\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Klizan, Martin\",\n", "                                            title: 7\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/slo.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    },\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Monaco, Juan\",\n", "                                            title: 8\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/arg.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            }\n", "                        ]\n", "                    }\n", "                ]\n", "            },\n", "            {\n", "                text: {\n", "                    name: \"Nieminen, Jarkko\",\n", "                    desc: \"6-3, 1-6, 7-6(3)\"\n", "                },\n", "                children: [\n", "                    {\n", "                        text: {\n", "                            name: \"Nieminen, Jarkko\",\n", "                            desc: \"4-6, 6-1, 6-4\"\n", "                        },\n", "                        children: [\n", "                            {\n", "                                text: {\n", "                                    name: \"Raonic, Milos\",\n", "                                    desc: \"6-1, 6-4\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Raonic, Milos\",\n", "                                            title: 9\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/can.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    },\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Benneteau, Julien\",\n", "                                            title: 10\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/fra.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            },\n", "                            {\n", "                                text: {\n", "                                    name: \"Nieminen, Jarkko\",\n", "                                    desc: \"6-1, 6-2\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Nieminen, Jarkko\",\n", "                                            title: 11\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/fin.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    },\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Troicki, Viktor\",\n", "                                            title: 12\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/srb.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            }\n", "                        ]\n", "                    },\n", "                    {\n", "                        text: {\n", "                            name: \"Del Potro, Juan Martin\",\n", "                            desc: \"6-2, 6-4\"\n", "                        },\n", "                        children: [\n", "                            {\n", "                                text: {\n", "                                    name: \"Dolgopolov, Alexandr\",\n", "                                    desc: \"4-6, 6-2, 6-3\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Dolgopolov, Alexandr\",\n", "                                            title: 13\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/ukr.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    },\n", "                                    {\n", "                                        text: {\n", "                                            name: \"Tomic, Bernard\",\n", "                                            title: 14\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/aus.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            },\n", "                            {\n", "                                text: {\n", "                                    name: \"Del Potro, Juan Martin\",\n", "                                    desc: \"6-4, 6-0\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: {\n", "                                            name: \"Bye\",\n", "                                            title: 15\n", "                                        },\n", "                                        HTMLclass: \"first-draw bye\"\n", "                                    },\n", "                                    {\n", "                                        text: {\n", "                                            name: \"Del Potro, Juan Martin\",\n", "                                            title: 16\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/arg.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            }\n", "                        ]\n", "                    }\n", "                ]\n", "            }\n", "        ]\n", "    }\"\"\""]}, {"cell_type": "code", "execution_count": 6, "metadata": {"collapsed": false}, "outputs": [{"data": {"text/html": ["\n", "<style>\n", "\n", ".chart { height: 600px; width: 900px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; }\n", "\n", ".tennis-draw {\n", "    font-size: 10px;\n", "    width: 100px;\n", "}\n", "\n", ".tennis-draw.winner { height: 38px; }\n", ".tennis-draw.winner:hover { \n", "    background: url('http://fperucic.github.io/treant-js/examples/tennis-draw/trophy.png') right 0 no-repeat; \n", "}\n", ".tennis-draw.winner .node-name { padding-left: 10px; margin-top: 1px; display: block; }\n", "\n", ".tennis-draw .node-name { padding: 2px; white-space: pre; color: #00AFF0; }\n", ".tennis-draw .node-desc { padding: 2px; color: #999; }\n", "\n", ".tennis-draw.first-draw .node-title,\n", ".tennis-draw.first-draw .node-name,\n", ".tennis-draw.first-draw img { position: absolute; top: -8px; }\n", ".tennis-draw.first-draw:hover img { width: 20px; top: -12px; }\n", "\n", ".tennis-draw.first-draw { width: 165px; height: 20px; }\n", ".tennis-draw.first-draw img { margin: 3px 4px 0 0; left: 25px; }\n", ".tennis-draw.first-draw .node-title { margin-top: 3px; }\n", ".tennis-draw.first-draw .node-name { width: 113px; padding-left: 50px; }\n", ".tennis-draw.first-draw.bye .node-name { color: #999; }\n", "\n", "</style>\n", "\n", "<link rel=\"stylesheet\" href=\"http://fperucic.github.io/treant-js/Treant.css\">\n", "<script src=\"http://fperucic.github.io/treant-js/vendor/raphael.js\"></script>\n", "<script src=\"http://fperucic.github.io/treant-js/Treant.js\"></script>\n", "<div class=\"chart\" id=\"id_2339297590784\"></div>\n", "<script>\n", "var tree_structureid_2339297590784 = {\n", "    chart: {\n", "        container: \"#id_2339297590784\",\n", "        levelSeparation:    20,\n", "        siblingSeparation:  15,\n", "        subTeeSeparation:   15,\n", "        rootOrientation: \"EAST\",\n", "\n", "        node: {\n", "            HTMLclass: \"tennis-draw\",\n", "            drawLineThrough: true\n", "        },\n", "        connectors: {\n", "            type: \"straight\",\n", "            style: {\n", "                \"stroke-width\": 2,\n", "                \"stroke\": \"#ccc\"\n", "            }\n", "        }\n", "    },\n", "    nodeStructure: {\n", "        text: {\n", "            name: {val: \"Djokovic, Novak\", \n", "                   href: \"http://www.atpworldtour.com/Tennis/Players/Top-Players/Novak-Djokovic.aspx\"}\n", "        },\n", "        HTMLclass: \"winner\",\n", "        children: [\n", "            {\n", "                text: {\n", "                    name: \"Djokovic, Novak\",\n", "                    desc: \"4-6, 6-2, 6-2\"\n", "                },\n", "                children: [\n", "                    {\n", "                        text: {\n", "                            name: \"Djokovic, Novak\",\n", "                            desc: \"4-6, 6-1, 6-4\"\n", "                        },\n", "                        children: [\n", "                            {\n", "                                text: {\n", "                                    name: \"Djokovic, Novak\",\n", "                                    desc: \"4-6, 6-1, 6-4\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Djokovic, Novak\",\n", "                                            title: 1\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/srb.jpg\",\n", "                                        HTMLclass: \"first-draw\",\n", "                                    },\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Bye\",\n", "                                            title: 2\n", "                                        },\n", "                                        HTMLclass: \"first-draw bye\"\n", "                                    }\n", "                                ]\n", "                            },\n", "                            {\n", "                                text: {\n", "                                    name: \"Youzhny, Mikhail\",\n", "                                    desc: \"6-4, 6-0\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Youzhny, Mikhail\",\n", "                                            title: 3\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/rus.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    },\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Gimeno-Traver, Daniel\",\n", "                                            title: 4\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/esp.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            }\n", "                        ]\n", "                    },\n", "                    {\n", "                        text: {\n", "                            name: \"Monaco, Juan\",\n", "                            desc: \"6-0, 3-6, 6-3\"\n", "                        },\n", "                        children: [\n", "                            {\n", "                                text: {\n", "                                    name: \"Gulbis, Ernests\",\n", "                                    desc: \"4-6, 6-2, 6-3\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: {\n", "                                         name: \"Gulbis, Ernests\",\n", "                                         title: 5\n", "                                     },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/lat.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    },\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Isner, John\",\n", "                                            title: 6\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/usa.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            },\n", "                            {\n", "                                text: {\n", "                                    name: \"Monaco, Juan\",\n", "                                    desc: \"6-4, 6-0\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Klizan, Martin\",\n", "                                            title: 7\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/slo.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    },\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Monaco, Juan\",\n", "                                            title: 8\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/arg.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            }\n", "                        ]\n", "                    }\n", "                ]\n", "            },\n", "            {\n", "                text: {\n", "                    name: \"Nieminen, Jarkko\",\n", "                    desc: \"6-3, 1-6, 7-6(3)\"\n", "                },\n", "                children: [\n", "                    {\n", "                        text: {\n", "                            name: \"Nieminen, Jarkko\",\n", "                            desc: \"4-6, 6-1, 6-4\"\n", "                        },\n", "                        children: [\n", "                            {\n", "                                text: {\n", "                                    name: \"Raonic, Milos\",\n", "                                    desc: \"6-1, 6-4\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Raonic, Milos\",\n", "                                            title: 9\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/can.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    },\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Benneteau, Julien\",\n", "                                            title: 10\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/fra.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            },\n", "                            {\n", "                                text: {\n", "                                    name: \"Nieminen, Jarkko\",\n", "                                    desc: \"6-1, 6-2\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Nieminen, Jarkko\",\n", "                                            title: 11\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/fin.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    },\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Troicki, Viktor\",\n", "                                            title: 12\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/srb.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            }\n", "                        ]\n", "                    },\n", "                    {\n", "                        text: {\n", "                            name: \"Del Potro, Juan Martin\",\n", "                            desc: \"6-2, 6-4\"\n", "                        },\n", "                        children: [\n", "                            {\n", "                                text: {\n", "                                    name: \"Dolgopolov, Alexandr\",\n", "                                    desc: \"4-6, 6-2, 6-3\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: { \n", "                                            name: \"Dolgopolov, Alexandr\",\n", "                                            title: 13\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/ukr.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    },\n", "                                    {\n", "                                        text: {\n", "                                            name: \"Tomic, Bernard\",\n", "                                            title: 14\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/aus.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            },\n", "                            {\n", "                                text: {\n", "                                    name: \"Del Potro, Juan Martin\",\n", "                                    desc: \"6-4, 6-0\"\n", "                                },\n", "                                children: [\n", "                                    {\n", "                                        text: {\n", "                                            name: \"Bye\",\n", "                                            title: 15\n", "                                        },\n", "                                        HTMLclass: \"first-draw bye\"\n", "                                    },\n", "                                    {\n", "                                        text: {\n", "                                            name: \"Del Potro, Juan Martin\",\n", "                                            title: 16\n", "                                        },\n", "                                        image: \"http://fperucic.github.io/treant-js/examples/tennis-draw/flags/arg.jpg\",\n", "                                        HTMLclass: \"first-draw\"\n", "                                    }\n", "                                ]\n", "                            }\n", "                        ]\n", "                    }\n", "                ]\n", "            }\n", "        ]\n", "    }\n", "};\n", "new Treant( tree_structureid_2339297590784 );\n", "</script>"], "text/plain": ["<IPython.core.display.HTML object>"]}, "metadata": {}, "output_type": "display_data"}], "source": ["from jupytalk.talk_examples.treant_wrapper import display_treant\n", "from IPython.core.display import display\n", "display(display_treant(json_tree, json_data, css, classname))"]}, {"cell_type": "markdown", "metadata": {}, "source": ["## What's next?\n", "\n", "* Add local support\n", "* Make the graph stick when the notebook is display again (reload dependencies)\n", "* Change parameter ``json_tree`` for a dictionary with options\n", "* Create an API to create the data in Python and not in Json."]}, {"cell_type": "code", "execution_count": 7, "metadata": {"collapsed": true}, "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.5.2"}}, "nbformat": 4, "nbformat_minor": 2}