Darw graphs with branca

Darw graphs with branca.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "*(visualize this notebook [here](http://nbviewer.jupyter.org/gist/BibMartin/d5d3a4a4f497e742cea0baa928bdeb71))*\n",
    "# Draw graphs with branca\n",
    "\n",
    "[Branca](https://github.com/python-visualization/branca) is a library built to refactor [folium](https://github.com/python-visualization/folium)'s code that's not specific to drawing maps.\n",
    "\n",
    "Here, We show how one can draw simple graphs based on branca and [meermaid](https://github.com/knsv/mermaid)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Create a Meermaid class\n",
    "\n",
    "The first thing to do : create a class that inherits from `branca.element.Figure`, that will enable to draw Meemaid graphs."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "import branca.element as be\n",
    "\n",
    "class Meermaid(be.Figure):\n",
    "    def __init__(self, meermaid_code, **kwargs):\n",
    "        # Initialize the Figure correctly\n",
    "        super(Meermaid, self).__init__(self, **kwargs)\n",
    "        \n",
    "        # Import meermaid's Css\n",
    "        self.header.add_child(be.CssLink(\n",
    "            \"https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.0.0/mermaid.css\"))\n",
    "\n",
    "        # Import meermaid's Javascript\n",
    "        self.header.add_child(be.JavascriptLink(\n",
    "            \"https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.0.0/mermaid.min.js\"))\n",
    "\n",
    "        # Create the minimal script\n",
    "        self.header.add_child(be.Element(\n",
    "            '<script>mermaid.initialize({startOnLoad:true, theme: \"forest\"});</script>'))\n",
    "\n",
    "        # Draw the graph\n",
    "        self.html.add_child(be.Element(\n",
    "            '<div class=\"mermaid\">\\n' + meermaid_code + '\\n</div>'))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now one can draw a meermaid graph simply:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<iframe src=\"data:text/html;base64,PCFET0NUWVBFIGh0bWw+CjxoZWFkPiAgICAKICAgIDxtZXRhIGh0dHAtZXF1aXY9ImNvbnRlbnQtdHlwZSIgY29udGVudD0idGV4dC9odG1sOyBjaGFyc2V0PVVURi04IiAvPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJodHRwczovL2NkbmpzLmNsb3VkZmxhcmUuY29tL2FqYXgvbGlicy9tZXJtYWlkLzcuMC4wL21lcm1haWQuY3NzIiAvPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuanMuY2xvdWRmbGFyZS5jb20vYWpheC9saWJzL21lcm1haWQvNy4wLjAvbWVybWFpZC5taW4uanMiPjwvc2NyaXB0PgogICAgPHNjcmlwdD5tZXJtYWlkLmluaXRpYWxpemUoe3N0YXJ0T25Mb2FkOnRydWUsIHRoZW1lOiAiZm9yZXN0In0pOzwvc2NyaXB0Pgo8L2hlYWQ+Cjxib2R5PiAgICAKICAgIDxkaXYgY2xhc3M9Im1lcm1haWQiPgoKZ3JhcGggVEIKICAgIGMxLS0+YTIKICAgIHN1YmdyYXBoIG9uZQogICAgYTEtLT5hMgogICAgZW5kCiAgICBzdWJncmFwaCB0d28KICAgIGIxLS0+YjIKICAgIGVuZAogICAgc3ViZ3JhcGggdGhyZWUKICAgIGMxLS0+YzIKICAgIGVuZAoKPC9kaXY+CjwvYm9keT4KPHNjcmlwdD4gICAgCjwvc2NyaXB0Pg==\" width=\"<__main__.Meermaid object at 0x7fd3263df4e0>\" height=\"200\"></iframe>"
      ],
      "text/plain": [
       "<__main__.Meermaid at 0x7fd3263df4e0>"
      ]
     },
     "execution_count": 22,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "code = \"\"\"\n",
    "graph TB\n",
    "    c1-->a2\n",
    "    subgraph one\n",
    "    a1-->a2\n",
    "    end\n",
    "    subgraph two\n",
    "    b1-->b2\n",
    "    end\n",
    "    subgraph three\n",
    "    c1-->c2\n",
    "    end\n",
    "\"\"\"\n",
    "\n",
    "Meermaid(code, height=200)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Create a shortcut for plotting graphs"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 25,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<iframe src=\"data:text/html;base64,PCFET0NUWVBFIGh0bWw+CjxoZWFkPiAgICAKICAgIDxtZXRhIGh0dHAtZXF1aXY9ImNvbnRlbnQtdHlwZSIgY29udGVudD0idGV4dC9odG1sOyBjaGFyc2V0PVVURi04IiAvPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJodHRwczovL2NkbmpzLmNsb3VkZmxhcmUuY29tL2FqYXgvbGlicy9tZXJtYWlkLzcuMC4wL21lcm1haWQuY3NzIiAvPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuanMuY2xvdWRmbGFyZS5jb20vYWpheC9saWJzL21lcm1haWQvNy4wLjAvbWVybWFpZC5taW4uanMiPjwvc2NyaXB0PgogICAgPHNjcmlwdD5tZXJtYWlkLmluaXRpYWxpemUoe3N0YXJ0T25Mb2FkOnRydWUsIHRoZW1lOiAiZm9yZXN0In0pOzwvc2NyaXB0Pgo8L2hlYWQ+Cjxib2R5PiAgICAKICAgIDxkaXYgY2xhc3M9Im1lcm1haWQiPgpncmFwaCBURDsKICAgIEEgLS0+IEIKICAgIEIgLS0+IEQKICAgIEMgLS0+IEQKICAgIEQgLS0+IEUKICAgIEMgLS0+IEUKPC9kaXY+CjwvYm9keT4KPHNjcmlwdD4gICAgCjwvc2NyaXB0Pg==\" width=\"<__main__.Meermaid object at 0x7fd3263f7cf8>\" height=\"350\"></iframe>"
      ],
      "text/plain": [
       "<__main__.Meermaid at 0x7fd3263f7cf8>"
      ]
     },
     "execution_count": 25,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "def edges_to_meermaid(edges, **kwargs):\n",
    "    return Meermaid(\"graph TD;\\n\"\n",
    "            + '\\n'.join(['    {} --> {}'.format(*edge) for edge in edges]), **kwargs)\n",
    "\n",
    "edges_to_meermaid([\n",
    "    ('A', 'B'),\n",
    "    ('B', 'D'),\n",
    "    ('C', 'D'),\n",
    "    ('D', 'E'),\n",
    "    ('C', 'E'),\n",
    "    ], height=350)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "dev2",
   "language": "python",
   "name": "dev2"
  },
  "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": 0
}