{
 "metadata": {
  "name": ""
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "###Conditional Formatting and CSS support for HTML in pandas\n",
      "\n",
      "This is a preview of functionality planned for inclusion in pandas 0.14.\n",
      "\n",
      "####Overview\n",
      "\n",
      "* We render HTML output using a template engine, Jinja2.\n",
      "* The template engine renders a data object using the specified template. \n",
      "* The data object (\"context\") we pass in contains a structured representation of the dataframe and, importantly, the css class names to attach to any given cell.\n",
      "* The classes attached to any given cell are the union of two sources:\n",
      "  1. *Required classes* are attached to table cells by default, as part of the standard context object constructed by pandas for a specific dataframe. Examples of classes are: \"col_heading\"/\"row_heading\"/\"data\", \"row0\",\"col3\". etc\n",
      "  2. An additional nested dict (`cell_context`, provisional name) is passed in which can optionally attach classes to specific cells. e.g. `{data:{0:{2:[\"foo\"]}` will attach the class \"foo\" to the the data cell at df.iloc[0,2].\n",
      "* since `cell_context` is constructed dynamically, we can construct \"styler\" functions that inspect the dataframe and attach arbitrary classes to various table cells by whatever logic we can express in code (i.e. anything).\n",
      "* The actual styling is done using inline css which is included in the rendered HTML. The template context contains a style property, also produced dynamically by code, which can specify any selector + css property/value pair to be included in the inline `<style>` tag.\n",
      "* By namespacing all css for a table under a UUID attached to the `<table>` element, we can isolate the styles of tables which share a single IPython Notebook \"page\".\n",
      "\n",
      "Taken together, this solution provides a flexible, open-ended way\n",
      "to style the output with lots of control, with python code.\n",
      "\n",
      "By identifying common patterns (See included examples for: top-k heatmap, highlight columns/rowrow/col and zebra table) and \n",
      "packaging the \"styler\" functions under a pandas namespace we\n",
      "can offer a higher level API to the users for performing common tasks, but the power of the lower-level API is still available.\n",
      "These styler function should be composable to a large degree, meaning\n",
      "you can apply them after the other to incrementally reach the final\n",
      "desired result (with caveats).\n",
      "\n",
      "Feedback welcome,\n",
      "\n",
      "@y-p\n"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from jinja2 import Template"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 2
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "# The baseline jinja2 template for HTML output.\n",
      "t=Template(\"\"\"\n",
      "<style  type=\"text/css\" >\n",
      "#T_{{uuid}} tr {\n",
      "border: none;\n",
      "}\n",
      "#T_{{uuid}} {\n",
      "border: none;\n",
      "}\n",
      "#T_{{uuid}} th.blank {\n",
      "border: none;\n",
      "}\n",
      "\n",
      "\n",
      "{% for s in style %}\n",
      "#T_{{uuid}} {{s.selector}} {  \n",
      "{% for p,val in s.props %}\n",
      "    {{p}}: {{val}};\n",
      "{% endfor %}\n",
      "  }\n",
      "{% endfor %}\n",
      "</style>\n",
      "<table id=\"T_{{uuid}}\">\n",
      "{% if caption %}\n",
      "<caption>\n",
      "{{caption}}\n",
      "</caption>\n",
      "{% endif %}\n",
      "\n",
      "  <thead>\n",
      "{% for r in head %}\n",
      "    <tr>\n",
      "  {% for c in r %}    \n",
      "      <{{c.type}} class=\"{{c.class}}\">{{c.value}}</th>\n",
      "  {% endfor %}\n",
      "    </tr>\n",
      "{% endfor %}\n",
      "  </thead>\n",
      "  <tbody>\n",
      " {% for r in body %}\n",
      "    <tr>\n",
      "  {% for c in r %}    \n",
      "      <{{c.type}} class=\"{{c.class}}\">{{c.value}}</th>\n",
      "  {% endfor %}\n",
      "    </tr>\n",
      "{% endfor %}\n",
      "  </tbody>\n",
      "\n",
      "</table>\n",
      "\n",
      "\"\"\")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 3
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "# the implementation code. very small.\n",
      "ROW_HEADING_CLASS=\"row_heading\"\n",
      "COL_HEADING_CLASS=\"col_heading\"\n",
      "DATA_CLASS=\"data\"\n",
      "BLANK_CLASS=\"blank\"\n",
      "BLANK_VALUE=\"\"\n",
      "def translate(df,cell_context=None):\n",
      "    import uuid\n",
      "    cell_context = cell_context or dict()\n",
      "\n",
      "    n_rlvls =df.index.nlevels\n",
      "    n_clvls =df.columns.nlevels\n",
      "    rlabels=df.index.tolist()\n",
      "    clabels=df.columns.tolist()\n",
      "    if n_rlvls == 1:\n",
      "        rlabels = [[x] for x in rlabels]\n",
      "    if n_clvls == 1:\n",
      "        clabels = [[x] for x in clabels]\n",
      "    clabels=zip(*clabels)        \n",
      "    head=[]\n",
      "    for r in range(n_clvls):    \n",
      "        row_es = [{\"type\":\"th\",\"value\":BLANK_VALUE ,\"class\": \" \".join([BLANK_CLASS])}]*n_rlvls\n",
      "        for c in range(len(clabels[0])):\n",
      "            cs = [COL_HEADING_CLASS,\"level%s\" % r,\"col%s\" %c]\n",
      "            cs.extend(cell_context.get(\"col_headings\",{}).get(r,{}).get(c,[]))\n",
      "            row_es.append({\"type\":\"th\",\"value\": clabels[r][c],\"class\": \" \".join(cs)})\n",
      "        head.append(row_es)\n",
      "    body=[]\n",
      "    for r in range(len(df)):    \n",
      "        cs = [ROW_HEADING_CLASS,\"level%s\" % c,\"row%s\" % r]\n",
      "        cs.extend(cell_context.get(\"row_headings\",{}).get(r,{}).get(c,[]))\n",
      "        row_es = [{\"type\":\"th\",\"value\": rlabels[r][c],\"class\": \" \".join(cs)} \n",
      "                  for c in range(len(rlabels[r]))]\n",
      "        for c in range(len(df.columns)):\n",
      "            cs = [DATA_CLASS,\"row%s\" % r,\"col%s\" %c]\n",
      "            cs.extend(cell_context.get(\"data\",{}).get(r,{}).get(c,[]))\n",
      "            row_es.append({\"type\":\"td\",\"value\": df.iloc[r][c],\"class\": \" \".join(cs)})\n",
      "        body.append(row_es)\n",
      "\n",
      "    # uuid required to isolate table styling from others \n",
      "    # in same notebook in ipnb\n",
      "    u = str(uuid.uuid1()).replace(\"-\",\"_\")\n",
      "    return dict(head=head, body=body,uuid=u)\n"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 4
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "##Examples"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "# first, vanilla\n",
      "df=mkdf(10,5,r_idx_nlevels=3,c_idx_nlevels=2)\n",
      "from IPython.display import HTML,display\n",
      "ctx= translate(df)\n",
      "ctx['caption']=\"Just a table, but rendered using a template with lots of classes to style against\"\n",
      "display(HTML(t.render(**ctx)))\n"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "\n",
        "<style  type=\"text/css\" >\n",
        "#T_17e7e48e_6aa7_11e3_bffd_001a4d511830 tr {\n",
        "border: none;\n",
        "}\n",
        "#T_17e7e48e_6aa7_11e3_bffd_001a4d511830 {\n",
        "border: none;\n",
        "}\n",
        "#T_17e7e48e_6aa7_11e3_bffd_001a4d511830 th.blank {\n",
        "border: none;\n",
        "}\n",
        "\n",
        "\n",
        "\n",
        "</style>\n",
        "<table id=\"T_17e7e48e_6aa7_11e3_bffd_001a4d511830\">\n",
        "\n",
        "<caption>\n",
        "Just a table, but rendered using a template with lots of classes to style against\n",
        "</caption>\n",
        "\n",
        "\n",
        "  <thead>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col0\">C_l0_g0</th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col1\">C_l0_g1</th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col2\">C_l0_g2</th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col3\">C_l0_g3</th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col4\">C_l0_g4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"col_heading level1 col0\">C_l1_g0</th>\n",
        "      \n",
        "      <th class=\"col_heading level1 col1\">C_l1_g1</th>\n",
        "      \n",
        "      <th class=\"col_heading level1 col2\">C_l1_g2</th>\n",
        "      \n",
        "      <th class=\"col_heading level1 col3\">C_l1_g3</th>\n",
        "      \n",
        "      <th class=\"col_heading level1 col4\">C_l1_g4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "  </thead>\n",
        "  <tbody>\n",
        " \n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row0\">R_l0_g0</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row0\">R_l1_g0</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row0\">R_l2_g0</th>\n",
        "      \n",
        "      <td class=\"data row0 col0\">R0C0</th>\n",
        "      \n",
        "      <td class=\"data row0 col1\">R0C1</th>\n",
        "      \n",
        "      <td class=\"data row0 col2\">R0C2</th>\n",
        "      \n",
        "      <td class=\"data row0 col3\">R0C3</th>\n",
        "      \n",
        "      <td class=\"data row0 col4\">R0C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row1\">R_l0_g1</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row1\">R_l1_g1</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row1\">R_l2_g1</th>\n",
        "      \n",
        "      <td class=\"data row1 col0\">R1C0</th>\n",
        "      \n",
        "      <td class=\"data row1 col1\">R1C1</th>\n",
        "      \n",
        "      <td class=\"data row1 col2\">R1C2</th>\n",
        "      \n",
        "      <td class=\"data row1 col3\">R1C3</th>\n",
        "      \n",
        "      <td class=\"data row1 col4\">R1C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row2\">R_l0_g2</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row2\">R_l1_g2</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row2\">R_l2_g2</th>\n",
        "      \n",
        "      <td class=\"data row2 col0\">R2C0</th>\n",
        "      \n",
        "      <td class=\"data row2 col1\">R2C1</th>\n",
        "      \n",
        "      <td class=\"data row2 col2\">R2C2</th>\n",
        "      \n",
        "      <td class=\"data row2 col3\">R2C3</th>\n",
        "      \n",
        "      <td class=\"data row2 col4\">R2C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row3\">R_l0_g3</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row3\">R_l1_g3</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row3\">R_l2_g3</th>\n",
        "      \n",
        "      <td class=\"data row3 col0\">R3C0</th>\n",
        "      \n",
        "      <td class=\"data row3 col1\">R3C1</th>\n",
        "      \n",
        "      <td class=\"data row3 col2\">R3C2</th>\n",
        "      \n",
        "      <td class=\"data row3 col3\">R3C3</th>\n",
        "      \n",
        "      <td class=\"data row3 col4\">R3C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row4\">R_l0_g4</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row4\">R_l1_g4</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row4\">R_l2_g4</th>\n",
        "      \n",
        "      <td class=\"data row4 col0\">R4C0</th>\n",
        "      \n",
        "      <td class=\"data row4 col1\">R4C1</th>\n",
        "      \n",
        "      <td class=\"data row4 col2\">R4C2</th>\n",
        "      \n",
        "      <td class=\"data row4 col3\">R4C3</th>\n",
        "      \n",
        "      <td class=\"data row4 col4\">R4C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row5\">R_l0_g5</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row5\">R_l1_g5</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row5\">R_l2_g5</th>\n",
        "      \n",
        "      <td class=\"data row5 col0\">R5C0</th>\n",
        "      \n",
        "      <td class=\"data row5 col1\">R5C1</th>\n",
        "      \n",
        "      <td class=\"data row5 col2\">R5C2</th>\n",
        "      \n",
        "      <td class=\"data row5 col3\">R5C3</th>\n",
        "      \n",
        "      <td class=\"data row5 col4\">R5C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row6\">R_l0_g6</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row6\">R_l1_g6</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row6\">R_l2_g6</th>\n",
        "      \n",
        "      <td class=\"data row6 col0\">R6C0</th>\n",
        "      \n",
        "      <td class=\"data row6 col1\">R6C1</th>\n",
        "      \n",
        "      <td class=\"data row6 col2\">R6C2</th>\n",
        "      \n",
        "      <td class=\"data row6 col3\">R6C3</th>\n",
        "      \n",
        "      <td class=\"data row6 col4\">R6C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row7\">R_l0_g7</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row7\">R_l1_g7</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row7\">R_l2_g7</th>\n",
        "      \n",
        "      <td class=\"data row7 col0\">R7C0</th>\n",
        "      \n",
        "      <td class=\"data row7 col1\">R7C1</th>\n",
        "      \n",
        "      <td class=\"data row7 col2\">R7C2</th>\n",
        "      \n",
        "      <td class=\"data row7 col3\">R7C3</th>\n",
        "      \n",
        "      <td class=\"data row7 col4\">R7C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row8\">R_l0_g8</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row8\">R_l1_g8</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row8\">R_l2_g8</th>\n",
        "      \n",
        "      <td class=\"data row8 col0\">R8C0</th>\n",
        "      \n",
        "      <td class=\"data row8 col1\">R8C1</th>\n",
        "      \n",
        "      <td class=\"data row8 col2\">R8C2</th>\n",
        "      \n",
        "      <td class=\"data row8 col3\">R8C3</th>\n",
        "      \n",
        "      <td class=\"data row8 col4\">R8C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row9\">R_l0_g9</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row9\">R_l1_g9</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row9\">R_l2_g9</th>\n",
        "      \n",
        "      <td class=\"data row9 col0\">R9C0</th>\n",
        "      \n",
        "      <td class=\"data row9 col1\">R9C1</th>\n",
        "      \n",
        "      <td class=\"data row9 col2\">R9C2</th>\n",
        "      \n",
        "      <td class=\"data row9 col3\">R9C3</th>\n",
        "      \n",
        "      <td class=\"data row9 col4\">R9C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "  </tbody>\n",
        "\n",
        "</table>\n"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x42a4550>"
       ]
      }
     ],
     "prompt_number": 5
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "def zebra(color1, color2):\n",
      "    return [dict(selector=\"td.data:nth-child(2n)\" ,\n",
      "                props=[(\"background-color\",color1)]),\n",
      "            dict(selector=\"td.data:nth-child(2n+1)\" ,\n",
      "                props=[(\"background-color\",color2)])]\n",
      "\n",
      "ctx= translate(df)\n",
      "style=[]\n",
      "style.extend(zebra(\"#aaa\",\"#ddd\"))\n",
      "ctx['style']=style\n",
      "ctx['caption']=\"A zebra table\"\n",
      "display(HTML(t.render(**ctx)))\n"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "\n",
        "<style  type=\"text/css\" >\n",
        "#T_1bc45290_6aa7_11e3_bffd_001a4d511830 tr {\n",
        "border: none;\n",
        "}\n",
        "#T_1bc45290_6aa7_11e3_bffd_001a4d511830 {\n",
        "border: none;\n",
        "}\n",
        "#T_1bc45290_6aa7_11e3_bffd_001a4d511830 th.blank {\n",
        "border: none;\n",
        "}\n",
        "\n",
        "\n",
        "\n",
        "#T_1bc45290_6aa7_11e3_bffd_001a4d511830 td.data:nth-child(2n) {  \n",
        "\n",
        "    background-color: #aaa;\n",
        "\n",
        "  }\n",
        "\n",
        "#T_1bc45290_6aa7_11e3_bffd_001a4d511830 td.data:nth-child(2n+1) {  \n",
        "\n",
        "    background-color: #ddd;\n",
        "\n",
        "  }\n",
        "\n",
        "</style>\n",
        "<table id=\"T_1bc45290_6aa7_11e3_bffd_001a4d511830\">\n",
        "\n",
        "<caption>\n",
        "A zebra table\n",
        "</caption>\n",
        "\n",
        "\n",
        "  <thead>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col0\">C_l0_g0</th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col1\">C_l0_g1</th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col2\">C_l0_g2</th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col3\">C_l0_g3</th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col4\">C_l0_g4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"col_heading level1 col0\">C_l1_g0</th>\n",
        "      \n",
        "      <th class=\"col_heading level1 col1\">C_l1_g1</th>\n",
        "      \n",
        "      <th class=\"col_heading level1 col2\">C_l1_g2</th>\n",
        "      \n",
        "      <th class=\"col_heading level1 col3\">C_l1_g3</th>\n",
        "      \n",
        "      <th class=\"col_heading level1 col4\">C_l1_g4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "  </thead>\n",
        "  <tbody>\n",
        " \n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row0\">R_l0_g0</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row0\">R_l1_g0</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row0\">R_l2_g0</th>\n",
        "      \n",
        "      <td class=\"data row0 col0\">R0C0</th>\n",
        "      \n",
        "      <td class=\"data row0 col1\">R0C1</th>\n",
        "      \n",
        "      <td class=\"data row0 col2\">R0C2</th>\n",
        "      \n",
        "      <td class=\"data row0 col3\">R0C3</th>\n",
        "      \n",
        "      <td class=\"data row0 col4\">R0C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row1\">R_l0_g1</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row1\">R_l1_g1</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row1\">R_l2_g1</th>\n",
        "      \n",
        "      <td class=\"data row1 col0\">R1C0</th>\n",
        "      \n",
        "      <td class=\"data row1 col1\">R1C1</th>\n",
        "      \n",
        "      <td class=\"data row1 col2\">R1C2</th>\n",
        "      \n",
        "      <td class=\"data row1 col3\">R1C3</th>\n",
        "      \n",
        "      <td class=\"data row1 col4\">R1C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row2\">R_l0_g2</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row2\">R_l1_g2</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row2\">R_l2_g2</th>\n",
        "      \n",
        "      <td class=\"data row2 col0\">R2C0</th>\n",
        "      \n",
        "      <td class=\"data row2 col1\">R2C1</th>\n",
        "      \n",
        "      <td class=\"data row2 col2\">R2C2</th>\n",
        "      \n",
        "      <td class=\"data row2 col3\">R2C3</th>\n",
        "      \n",
        "      <td class=\"data row2 col4\">R2C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row3\">R_l0_g3</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row3\">R_l1_g3</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row3\">R_l2_g3</th>\n",
        "      \n",
        "      <td class=\"data row3 col0\">R3C0</th>\n",
        "      \n",
        "      <td class=\"data row3 col1\">R3C1</th>\n",
        "      \n",
        "      <td class=\"data row3 col2\">R3C2</th>\n",
        "      \n",
        "      <td class=\"data row3 col3\">R3C3</th>\n",
        "      \n",
        "      <td class=\"data row3 col4\">R3C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row4\">R_l0_g4</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row4\">R_l1_g4</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row4\">R_l2_g4</th>\n",
        "      \n",
        "      <td class=\"data row4 col0\">R4C0</th>\n",
        "      \n",
        "      <td class=\"data row4 col1\">R4C1</th>\n",
        "      \n",
        "      <td class=\"data row4 col2\">R4C2</th>\n",
        "      \n",
        "      <td class=\"data row4 col3\">R4C3</th>\n",
        "      \n",
        "      <td class=\"data row4 col4\">R4C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row5\">R_l0_g5</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row5\">R_l1_g5</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row5\">R_l2_g5</th>\n",
        "      \n",
        "      <td class=\"data row5 col0\">R5C0</th>\n",
        "      \n",
        "      <td class=\"data row5 col1\">R5C1</th>\n",
        "      \n",
        "      <td class=\"data row5 col2\">R5C2</th>\n",
        "      \n",
        "      <td class=\"data row5 col3\">R5C3</th>\n",
        "      \n",
        "      <td class=\"data row5 col4\">R5C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row6\">R_l0_g6</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row6\">R_l1_g6</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row6\">R_l2_g6</th>\n",
        "      \n",
        "      <td class=\"data row6 col0\">R6C0</th>\n",
        "      \n",
        "      <td class=\"data row6 col1\">R6C1</th>\n",
        "      \n",
        "      <td class=\"data row6 col2\">R6C2</th>\n",
        "      \n",
        "      <td class=\"data row6 col3\">R6C3</th>\n",
        "      \n",
        "      <td class=\"data row6 col4\">R6C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row7\">R_l0_g7</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row7\">R_l1_g7</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row7\">R_l2_g7</th>\n",
        "      \n",
        "      <td class=\"data row7 col0\">R7C0</th>\n",
        "      \n",
        "      <td class=\"data row7 col1\">R7C1</th>\n",
        "      \n",
        "      <td class=\"data row7 col2\">R7C2</th>\n",
        "      \n",
        "      <td class=\"data row7 col3\">R7C3</th>\n",
        "      \n",
        "      <td class=\"data row7 col4\">R7C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row8\">R_l0_g8</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row8\">R_l1_g8</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row8\">R_l2_g8</th>\n",
        "      \n",
        "      <td class=\"data row8 col0\">R8C0</th>\n",
        "      \n",
        "      <td class=\"data row8 col1\">R8C1</th>\n",
        "      \n",
        "      <td class=\"data row8 col2\">R8C2</th>\n",
        "      \n",
        "      <td class=\"data row8 col3\">R8C3</th>\n",
        "      \n",
        "      <td class=\"data row8 col4\">R8C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row9\">R_l0_g9</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row9\">R_l1_g9</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row9\">R_l2_g9</th>\n",
        "      \n",
        "      <td class=\"data row9 col0\">R9C0</th>\n",
        "      \n",
        "      <td class=\"data row9 col1\">R9C1</th>\n",
        "      \n",
        "      <td class=\"data row9 col2\">R9C2</th>\n",
        "      \n",
        "      <td class=\"data row9 col3\">R9C3</th>\n",
        "      \n",
        "      <td class=\"data row9 col4\">R9C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "  </tbody>\n",
        "\n",
        "</table>\n"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x4492710>"
       ]
      }
     ],
     "prompt_number": 6
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "def tag_col(n,c=\"grey10\", with_headings=False):\n",
      "    selector=\"td.col%d\" % n\n",
      "    if not with_headings:\n",
      "        selector+=\".data\"\n",
      "    return [dict(selector=selector,\n",
      "                props=[(\"background-color\",c)])]\n",
      "\n",
      "def tag_row(n,c=\"grey10\", with_headings=False):\n",
      "    selector=\"td.row%d\" % n\n",
      "    if not with_headings:\n",
      "        selector+=\".data\"\n",
      "    return [dict(selector=selector,\n",
      "                props=[(\"background-color\",c)])]\n",
      "\n",
      "ctx= translate(df)\n",
      "style=[]\n",
      "style.extend(tag_col(2,\"beige\"))\n",
      "style.extend(tag_row(3,\"purple\"))\n",
      "ctx['style']=style\n",
      "ctx['caption']=\"Highlight rows/cols by index\"\n",
      "display(HTML(t.render(**ctx)))\n"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "\n",
        "<style  type=\"text/css\" >\n",
        "#T_1f2d5ef4_6aa7_11e3_bffd_001a4d511830 tr {\n",
        "border: none;\n",
        "}\n",
        "#T_1f2d5ef4_6aa7_11e3_bffd_001a4d511830 {\n",
        "border: none;\n",
        "}\n",
        "#T_1f2d5ef4_6aa7_11e3_bffd_001a4d511830 th.blank {\n",
        "border: none;\n",
        "}\n",
        "\n",
        "\n",
        "\n",
        "#T_1f2d5ef4_6aa7_11e3_bffd_001a4d511830 td.col2.data {  \n",
        "\n",
        "    background-color: beige;\n",
        "\n",
        "  }\n",
        "\n",
        "#T_1f2d5ef4_6aa7_11e3_bffd_001a4d511830 td.row3.data {  \n",
        "\n",
        "    background-color: purple;\n",
        "\n",
        "  }\n",
        "\n",
        "</style>\n",
        "<table id=\"T_1f2d5ef4_6aa7_11e3_bffd_001a4d511830\">\n",
        "\n",
        "<caption>\n",
        "Highlight rows/cols by index\n",
        "</caption>\n",
        "\n",
        "\n",
        "  <thead>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col0\">C_l0_g0</th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col1\">C_l0_g1</th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col2\">C_l0_g2</th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col3\">C_l0_g3</th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col4\">C_l0_g4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"col_heading level1 col0\">C_l1_g0</th>\n",
        "      \n",
        "      <th class=\"col_heading level1 col1\">C_l1_g1</th>\n",
        "      \n",
        "      <th class=\"col_heading level1 col2\">C_l1_g2</th>\n",
        "      \n",
        "      <th class=\"col_heading level1 col3\">C_l1_g3</th>\n",
        "      \n",
        "      <th class=\"col_heading level1 col4\">C_l1_g4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "  </thead>\n",
        "  <tbody>\n",
        " \n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row0\">R_l0_g0</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row0\">R_l1_g0</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row0\">R_l2_g0</th>\n",
        "      \n",
        "      <td class=\"data row0 col0\">R0C0</th>\n",
        "      \n",
        "      <td class=\"data row0 col1\">R0C1</th>\n",
        "      \n",
        "      <td class=\"data row0 col2\">R0C2</th>\n",
        "      \n",
        "      <td class=\"data row0 col3\">R0C3</th>\n",
        "      \n",
        "      <td class=\"data row0 col4\">R0C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row1\">R_l0_g1</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row1\">R_l1_g1</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row1\">R_l2_g1</th>\n",
        "      \n",
        "      <td class=\"data row1 col0\">R1C0</th>\n",
        "      \n",
        "      <td class=\"data row1 col1\">R1C1</th>\n",
        "      \n",
        "      <td class=\"data row1 col2\">R1C2</th>\n",
        "      \n",
        "      <td class=\"data row1 col3\">R1C3</th>\n",
        "      \n",
        "      <td class=\"data row1 col4\">R1C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row2\">R_l0_g2</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row2\">R_l1_g2</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row2\">R_l2_g2</th>\n",
        "      \n",
        "      <td class=\"data row2 col0\">R2C0</th>\n",
        "      \n",
        "      <td class=\"data row2 col1\">R2C1</th>\n",
        "      \n",
        "      <td class=\"data row2 col2\">R2C2</th>\n",
        "      \n",
        "      <td class=\"data row2 col3\">R2C3</th>\n",
        "      \n",
        "      <td class=\"data row2 col4\">R2C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row3\">R_l0_g3</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row3\">R_l1_g3</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row3\">R_l2_g3</th>\n",
        "      \n",
        "      <td class=\"data row3 col0\">R3C0</th>\n",
        "      \n",
        "      <td class=\"data row3 col1\">R3C1</th>\n",
        "      \n",
        "      <td class=\"data row3 col2\">R3C2</th>\n",
        "      \n",
        "      <td class=\"data row3 col3\">R3C3</th>\n",
        "      \n",
        "      <td class=\"data row3 col4\">R3C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row4\">R_l0_g4</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row4\">R_l1_g4</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row4\">R_l2_g4</th>\n",
        "      \n",
        "      <td class=\"data row4 col0\">R4C0</th>\n",
        "      \n",
        "      <td class=\"data row4 col1\">R4C1</th>\n",
        "      \n",
        "      <td class=\"data row4 col2\">R4C2</th>\n",
        "      \n",
        "      <td class=\"data row4 col3\">R4C3</th>\n",
        "      \n",
        "      <td class=\"data row4 col4\">R4C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row5\">R_l0_g5</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row5\">R_l1_g5</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row5\">R_l2_g5</th>\n",
        "      \n",
        "      <td class=\"data row5 col0\">R5C0</th>\n",
        "      \n",
        "      <td class=\"data row5 col1\">R5C1</th>\n",
        "      \n",
        "      <td class=\"data row5 col2\">R5C2</th>\n",
        "      \n",
        "      <td class=\"data row5 col3\">R5C3</th>\n",
        "      \n",
        "      <td class=\"data row5 col4\">R5C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row6\">R_l0_g6</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row6\">R_l1_g6</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row6\">R_l2_g6</th>\n",
        "      \n",
        "      <td class=\"data row6 col0\">R6C0</th>\n",
        "      \n",
        "      <td class=\"data row6 col1\">R6C1</th>\n",
        "      \n",
        "      <td class=\"data row6 col2\">R6C2</th>\n",
        "      \n",
        "      <td class=\"data row6 col3\">R6C3</th>\n",
        "      \n",
        "      <td class=\"data row6 col4\">R6C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row7\">R_l0_g7</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row7\">R_l1_g7</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row7\">R_l2_g7</th>\n",
        "      \n",
        "      <td class=\"data row7 col0\">R7C0</th>\n",
        "      \n",
        "      <td class=\"data row7 col1\">R7C1</th>\n",
        "      \n",
        "      <td class=\"data row7 col2\">R7C2</th>\n",
        "      \n",
        "      <td class=\"data row7 col3\">R7C3</th>\n",
        "      \n",
        "      <td class=\"data row7 col4\">R7C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row8\">R_l0_g8</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row8\">R_l1_g8</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row8\">R_l2_g8</th>\n",
        "      \n",
        "      <td class=\"data row8 col0\">R8C0</th>\n",
        "      \n",
        "      <td class=\"data row8 col1\">R8C1</th>\n",
        "      \n",
        "      <td class=\"data row8 col2\">R8C2</th>\n",
        "      \n",
        "      <td class=\"data row8 col3\">R8C3</th>\n",
        "      \n",
        "      <td class=\"data row8 col4\">R8C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row9\">R_l0_g9</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row9\">R_l1_g9</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row9\">R_l2_g9</th>\n",
        "      \n",
        "      <td class=\"data row9 col0\">R9C0</th>\n",
        "      \n",
        "      <td class=\"data row9 col1\">R9C1</th>\n",
        "      \n",
        "      <td class=\"data row9 col2\">R9C2</th>\n",
        "      \n",
        "      <td class=\"data row9 col3\">R9C3</th>\n",
        "      \n",
        "      <td class=\"data row9 col4\">R9C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "  </tbody>\n",
        "\n",
        "</table>\n"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x44f4cd0>"
       ]
      }
     ],
     "prompt_number": 7
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "def round_corners(radius):\n",
      "    props_bl=[ \n",
      "    (\"-moz-border-radius-bottomleft\", \"%dpx\" % radius ),\n",
      "    (\"-webkit-border-bottom-left-radius\", \"%dpx\" % radius ),\n",
      "    (\"border-bottom-left-radius\", \"%dpx\" % radius )\n",
      "    ]\n",
      "    props_br=[ \n",
      "    (\"-moz-border-radius-bottomright\", \"%dpx\" % radius ),\n",
      "    (\"-webkit-border-bottom-right-radius\", \"%dpx\" % radius ),\n",
      "    (\"border-bottom-right-radius\", \"%dpx\" % radius )\n",
      "    ]\n",
      "    props_tl=[ \n",
      "    (\"-moz-border-radius-topleft\", \"%dpx\" % radius ),\n",
      "    (\"-webkit-border-top-left-radius\", \"%dpx\" % radius ),\n",
      "    (\"border-top-left-radius\", \"%dpx\" % radius )\n",
      "    ]\n",
      "    props_tr=[ \n",
      "    (\"-moz-border-radius-topright\", \"%dpx\" % radius ),\n",
      "    (\"-webkit-border-top-right-radius\", \"%dpx\" % radius ),\n",
      "    (\"border-top-right-radius\", \"%dpx\" % radius )\n",
      "    ]    \n",
      " \n",
      "    \n",
      "    return [dict(selector=\"td\",\n",
      "                props=[(\"border-width\",\"1px\")]),\n",
      "            dict(selector=\"\",\n",
      "                props=[(\"border-collapse\",\"separate\")]),\n",
      "            dict(selector=\"tr:last-child th:first-child\",\n",
      "                props=props_bl),\n",
      "            dict(selector=\"tr:last-child td:last-child\",\n",
      "                props=props_br),\n",
      "            dict(selector=\"tr:first-child th.col0\",\n",
      "                props=props_tl),\n",
      "            dict(selector=\"tr:first-child th.row0:first-child\",\n",
      "                props=props_tl),            \n",
      "            dict(selector=\"tr:first-child th:last-child\",\n",
      "                props=props_tr),\n",
      "            ]\n",
      "      \n",
      "ctx= translate(df)\n",
      "style=[]\n",
      "style.extend(round_corners(5))\n",
      "\n",
      "ctx['caption']=\"Rounded corners. CSS skills beginning to fail.\"\n",
      "ctx['style']=style\n",
      "display(HTML(t.render(**ctx)))\n"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "\n",
        "<style  type=\"text/css\" >\n",
        "#T_20f772ec_6aa7_11e3_bffd_001a4d511830 tr {\n",
        "border: none;\n",
        "}\n",
        "#T_20f772ec_6aa7_11e3_bffd_001a4d511830 {\n",
        "border: none;\n",
        "}\n",
        "#T_20f772ec_6aa7_11e3_bffd_001a4d511830 th.blank {\n",
        "border: none;\n",
        "}\n",
        "\n",
        "\n",
        "\n",
        "#T_20f772ec_6aa7_11e3_bffd_001a4d511830 td {  \n",
        "\n",
        "    border-width: 1px;\n",
        "\n",
        "  }\n",
        "\n",
        "#T_20f772ec_6aa7_11e3_bffd_001a4d511830  {  \n",
        "\n",
        "    border-collapse: separate;\n",
        "\n",
        "  }\n",
        "\n",
        "#T_20f772ec_6aa7_11e3_bffd_001a4d511830 tr:last-child th:first-child {  \n",
        "\n",
        "    -moz-border-radius-bottomleft: 5px;\n",
        "\n",
        "    -webkit-border-bottom-left-radius: 5px;\n",
        "\n",
        "    border-bottom-left-radius: 5px;\n",
        "\n",
        "  }\n",
        "\n",
        "#T_20f772ec_6aa7_11e3_bffd_001a4d511830 tr:last-child td:last-child {  \n",
        "\n",
        "    -moz-border-radius-bottomright: 5px;\n",
        "\n",
        "    -webkit-border-bottom-right-radius: 5px;\n",
        "\n",
        "    border-bottom-right-radius: 5px;\n",
        "\n",
        "  }\n",
        "\n",
        "#T_20f772ec_6aa7_11e3_bffd_001a4d511830 tr:first-child th.col0 {  \n",
        "\n",
        "    -moz-border-radius-topleft: 5px;\n",
        "\n",
        "    -webkit-border-top-left-radius: 5px;\n",
        "\n",
        "    border-top-left-radius: 5px;\n",
        "\n",
        "  }\n",
        "\n",
        "#T_20f772ec_6aa7_11e3_bffd_001a4d511830 tr:first-child th.row0:first-child {  \n",
        "\n",
        "    -moz-border-radius-topleft: 5px;\n",
        "\n",
        "    -webkit-border-top-left-radius: 5px;\n",
        "\n",
        "    border-top-left-radius: 5px;\n",
        "\n",
        "  }\n",
        "\n",
        "#T_20f772ec_6aa7_11e3_bffd_001a4d511830 tr:first-child th:last-child {  \n",
        "\n",
        "    -moz-border-radius-topright: 5px;\n",
        "\n",
        "    -webkit-border-top-right-radius: 5px;\n",
        "\n",
        "    border-top-right-radius: 5px;\n",
        "\n",
        "  }\n",
        "\n",
        "</style>\n",
        "<table id=\"T_20f772ec_6aa7_11e3_bffd_001a4d511830\">\n",
        "\n",
        "<caption>\n",
        "Rounded corners. CSS skills beginning to fail.\n",
        "</caption>\n",
        "\n",
        "\n",
        "  <thead>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col0\">C_l0_g0</th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col1\">C_l0_g1</th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col2\">C_l0_g2</th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col3\">C_l0_g3</th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col4\">C_l0_g4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"col_heading level1 col0\">C_l1_g0</th>\n",
        "      \n",
        "      <th class=\"col_heading level1 col1\">C_l1_g1</th>\n",
        "      \n",
        "      <th class=\"col_heading level1 col2\">C_l1_g2</th>\n",
        "      \n",
        "      <th class=\"col_heading level1 col3\">C_l1_g3</th>\n",
        "      \n",
        "      <th class=\"col_heading level1 col4\">C_l1_g4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "  </thead>\n",
        "  <tbody>\n",
        " \n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row0\">R_l0_g0</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row0\">R_l1_g0</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row0\">R_l2_g0</th>\n",
        "      \n",
        "      <td class=\"data row0 col0\">R0C0</th>\n",
        "      \n",
        "      <td class=\"data row0 col1\">R0C1</th>\n",
        "      \n",
        "      <td class=\"data row0 col2\">R0C2</th>\n",
        "      \n",
        "      <td class=\"data row0 col3\">R0C3</th>\n",
        "      \n",
        "      <td class=\"data row0 col4\">R0C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row1\">R_l0_g1</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row1\">R_l1_g1</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row1\">R_l2_g1</th>\n",
        "      \n",
        "      <td class=\"data row1 col0\">R1C0</th>\n",
        "      \n",
        "      <td class=\"data row1 col1\">R1C1</th>\n",
        "      \n",
        "      <td class=\"data row1 col2\">R1C2</th>\n",
        "      \n",
        "      <td class=\"data row1 col3\">R1C3</th>\n",
        "      \n",
        "      <td class=\"data row1 col4\">R1C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row2\">R_l0_g2</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row2\">R_l1_g2</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row2\">R_l2_g2</th>\n",
        "      \n",
        "      <td class=\"data row2 col0\">R2C0</th>\n",
        "      \n",
        "      <td class=\"data row2 col1\">R2C1</th>\n",
        "      \n",
        "      <td class=\"data row2 col2\">R2C2</th>\n",
        "      \n",
        "      <td class=\"data row2 col3\">R2C3</th>\n",
        "      \n",
        "      <td class=\"data row2 col4\">R2C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row3\">R_l0_g3</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row3\">R_l1_g3</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row3\">R_l2_g3</th>\n",
        "      \n",
        "      <td class=\"data row3 col0\">R3C0</th>\n",
        "      \n",
        "      <td class=\"data row3 col1\">R3C1</th>\n",
        "      \n",
        "      <td class=\"data row3 col2\">R3C2</th>\n",
        "      \n",
        "      <td class=\"data row3 col3\">R3C3</th>\n",
        "      \n",
        "      <td class=\"data row3 col4\">R3C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row4\">R_l0_g4</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row4\">R_l1_g4</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row4\">R_l2_g4</th>\n",
        "      \n",
        "      <td class=\"data row4 col0\">R4C0</th>\n",
        "      \n",
        "      <td class=\"data row4 col1\">R4C1</th>\n",
        "      \n",
        "      <td class=\"data row4 col2\">R4C2</th>\n",
        "      \n",
        "      <td class=\"data row4 col3\">R4C3</th>\n",
        "      \n",
        "      <td class=\"data row4 col4\">R4C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row5\">R_l0_g5</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row5\">R_l1_g5</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row5\">R_l2_g5</th>\n",
        "      \n",
        "      <td class=\"data row5 col0\">R5C0</th>\n",
        "      \n",
        "      <td class=\"data row5 col1\">R5C1</th>\n",
        "      \n",
        "      <td class=\"data row5 col2\">R5C2</th>\n",
        "      \n",
        "      <td class=\"data row5 col3\">R5C3</th>\n",
        "      \n",
        "      <td class=\"data row5 col4\">R5C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row6\">R_l0_g6</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row6\">R_l1_g6</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row6\">R_l2_g6</th>\n",
        "      \n",
        "      <td class=\"data row6 col0\">R6C0</th>\n",
        "      \n",
        "      <td class=\"data row6 col1\">R6C1</th>\n",
        "      \n",
        "      <td class=\"data row6 col2\">R6C2</th>\n",
        "      \n",
        "      <td class=\"data row6 col3\">R6C3</th>\n",
        "      \n",
        "      <td class=\"data row6 col4\">R6C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row7\">R_l0_g7</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row7\">R_l1_g7</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row7\">R_l2_g7</th>\n",
        "      \n",
        "      <td class=\"data row7 col0\">R7C0</th>\n",
        "      \n",
        "      <td class=\"data row7 col1\">R7C1</th>\n",
        "      \n",
        "      <td class=\"data row7 col2\">R7C2</th>\n",
        "      \n",
        "      <td class=\"data row7 col3\">R7C3</th>\n",
        "      \n",
        "      <td class=\"data row7 col4\">R7C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row8\">R_l0_g8</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row8\">R_l1_g8</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row8\">R_l2_g8</th>\n",
        "      \n",
        "      <td class=\"data row8 col0\">R8C0</th>\n",
        "      \n",
        "      <td class=\"data row8 col1\">R8C1</th>\n",
        "      \n",
        "      <td class=\"data row8 col2\">R8C2</th>\n",
        "      \n",
        "      <td class=\"data row8 col3\">R8C3</th>\n",
        "      \n",
        "      <td class=\"data row8 col4\">R8C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row9\">R_l0_g9</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row9\">R_l1_g9</th>\n",
        "      \n",
        "      <th class=\"row_heading level4 row9\">R_l2_g9</th>\n",
        "      \n",
        "      <td class=\"data row9 col0\">R9C0</th>\n",
        "      \n",
        "      <td class=\"data row9 col1\">R9C1</th>\n",
        "      \n",
        "      <td class=\"data row9 col2\">R9C2</th>\n",
        "      \n",
        "      <td class=\"data row9 col3\">R9C3</th>\n",
        "      \n",
        "      <td class=\"data row9 col4\">R9C4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "  </tbody>\n",
        "\n",
        "</table>\n"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x44d9750>"
       ]
      }
     ],
     "prompt_number": 8
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "def color_class(cls, color):\n",
      "    return [dict(selector=\"td.%s\" % cls ,\n",
      "                props=[(\"background-color\",color)])]\n",
      "def rank_col(n,ranking,u):\n",
      "    data = {i: {n: [\"%s-%s\" % (u,ranking[i])]} for i in range(len(ranking))}\n",
      "    return {\"data\": data}\n",
      "\n",
      "import uuid\n",
      "u = \"U\"+str(uuid.uuid1()).replace(\"-\",\"_\")\n",
      "df=mkdf(9,5,data_gen_f=lambda r,c:np.random.random())\n",
      "\n",
      "ranking=df.iloc[:,1].argsort().tolist()\n",
      "cell_context=rank_col(1, ranking, u)\n",
      "\n",
      "ctx= translate(df,cell_context)\n",
      "style=[]\n",
      "# http://colorbrewer2.org/\n",
      "color_scale=[\"#fff7ec\",\"#fee8c8\",\"#fdd49e\",\"#fdbb84\",\"#fc8d59\",\"#ef6548\",\"#d7301f\",\"#b30000\",\"#7f0000\"]\n",
      "for intensity in range(9):\n",
      "    style.extend(color_class(\"%s-%s\" % (u,intensity),color_scale[intensity]))\n",
      "    \n",
      "ctx['style']=style\n",
      "ctx['caption']=\"And finally, a heatmap based on values\"\n",
      "display(HTML(t.render(**ctx)))\n",
      " "
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "\n",
        "<style  type=\"text/css\" >\n",
        "#T_23627d9c_6aa7_11e3_bffd_001a4d511830 tr {\n",
        "border: none;\n",
        "}\n",
        "#T_23627d9c_6aa7_11e3_bffd_001a4d511830 {\n",
        "border: none;\n",
        "}\n",
        "#T_23627d9c_6aa7_11e3_bffd_001a4d511830 th.blank {\n",
        "border: none;\n",
        "}\n",
        "\n",
        "\n",
        "\n",
        "#T_23627d9c_6aa7_11e3_bffd_001a4d511830 td.U2360ee96_6aa7_11e3_bffd_001a4d511830-0 {  \n",
        "\n",
        "    background-color: #fff7ec;\n",
        "\n",
        "  }\n",
        "\n",
        "#T_23627d9c_6aa7_11e3_bffd_001a4d511830 td.U2360ee96_6aa7_11e3_bffd_001a4d511830-1 {  \n",
        "\n",
        "    background-color: #fee8c8;\n",
        "\n",
        "  }\n",
        "\n",
        "#T_23627d9c_6aa7_11e3_bffd_001a4d511830 td.U2360ee96_6aa7_11e3_bffd_001a4d511830-2 {  \n",
        "\n",
        "    background-color: #fdd49e;\n",
        "\n",
        "  }\n",
        "\n",
        "#T_23627d9c_6aa7_11e3_bffd_001a4d511830 td.U2360ee96_6aa7_11e3_bffd_001a4d511830-3 {  \n",
        "\n",
        "    background-color: #fdbb84;\n",
        "\n",
        "  }\n",
        "\n",
        "#T_23627d9c_6aa7_11e3_bffd_001a4d511830 td.U2360ee96_6aa7_11e3_bffd_001a4d511830-4 {  \n",
        "\n",
        "    background-color: #fc8d59;\n",
        "\n",
        "  }\n",
        "\n",
        "#T_23627d9c_6aa7_11e3_bffd_001a4d511830 td.U2360ee96_6aa7_11e3_bffd_001a4d511830-5 {  \n",
        "\n",
        "    background-color: #ef6548;\n",
        "\n",
        "  }\n",
        "\n",
        "#T_23627d9c_6aa7_11e3_bffd_001a4d511830 td.U2360ee96_6aa7_11e3_bffd_001a4d511830-6 {  \n",
        "\n",
        "    background-color: #d7301f;\n",
        "\n",
        "  }\n",
        "\n",
        "#T_23627d9c_6aa7_11e3_bffd_001a4d511830 td.U2360ee96_6aa7_11e3_bffd_001a4d511830-7 {  \n",
        "\n",
        "    background-color: #b30000;\n",
        "\n",
        "  }\n",
        "\n",
        "#T_23627d9c_6aa7_11e3_bffd_001a4d511830 td.U2360ee96_6aa7_11e3_bffd_001a4d511830-8 {  \n",
        "\n",
        "    background-color: #7f0000;\n",
        "\n",
        "  }\n",
        "\n",
        "</style>\n",
        "<table id=\"T_23627d9c_6aa7_11e3_bffd_001a4d511830\">\n",
        "\n",
        "<caption>\n",
        "And finally, a heatmap based on values\n",
        "</caption>\n",
        "\n",
        "\n",
        "  <thead>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"blank\"></th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col0\">C_l0_g0</th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col1\">C_l0_g1</th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col2\">C_l0_g2</th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col3\">C_l0_g3</th>\n",
        "      \n",
        "      <th class=\"col_heading level0 col4\">C_l0_g4</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "  </thead>\n",
        "  <tbody>\n",
        " \n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row0\">R_l0_g0</th>\n",
        "      \n",
        "      <td class=\"data row0 col0\">0.211801747127</th>\n",
        "      \n",
        "      <td class=\"data row0 col1 U2360ee96_6aa7_11e3_bffd_001a4d511830-4\">0.208803651856</th>\n",
        "      \n",
        "      <td class=\"data row0 col2\">0.743716623422</th>\n",
        "      \n",
        "      <td class=\"data row0 col3\">0.962017341688</th>\n",
        "      \n",
        "      <td class=\"data row0 col4\">0.176015213664</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row1\">R_l0_g1</th>\n",
        "      \n",
        "      <td class=\"data row1 col0\">0.745491761131</th>\n",
        "      \n",
        "      <td class=\"data row1 col1 U2360ee96_6aa7_11e3_bffd_001a4d511830-5\">0.820494510091</th>\n",
        "      \n",
        "      <td class=\"data row1 col2\">0.503137612941</th>\n",
        "      \n",
        "      <td class=\"data row1 col3\">0.238019828149</th>\n",
        "      \n",
        "      <td class=\"data row1 col4\">0.634250742128</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row2\">R_l0_g2</th>\n",
        "      \n",
        "      <td class=\"data row2 col0\">0.569301755126</th>\n",
        "      \n",
        "      <td class=\"data row2 col1 U2360ee96_6aa7_11e3_bffd_001a4d511830-0\">0.507672767903</th>\n",
        "      \n",
        "      <td class=\"data row2 col2\">0.309202712181</th>\n",
        "      \n",
        "      <td class=\"data row2 col3\">0.830732729127</th>\n",
        "      \n",
        "      <td class=\"data row2 col4\">0.617108870585</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row3\">R_l0_g3</th>\n",
        "      \n",
        "      <td class=\"data row3 col0\">0.685515863149</th>\n",
        "      \n",
        "      <td class=\"data row3 col1 U2360ee96_6aa7_11e3_bffd_001a4d511830-7\">0.985786341696</th>\n",
        "      \n",
        "      <td class=\"data row3 col2\">0.534988628544</th>\n",
        "      \n",
        "      <td class=\"data row3 col3\">0.900187936559</th>\n",
        "      \n",
        "      <td class=\"data row3 col4\">0.602678947775</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row4\">R_l0_g4</th>\n",
        "      \n",
        "      <td class=\"data row4 col0\">0.521370083872</th>\n",
        "      \n",
        "      <td class=\"data row4 col1 U2360ee96_6aa7_11e3_bffd_001a4d511830-2\">0.0110884722823</th>\n",
        "      \n",
        "      <td class=\"data row4 col2\">0.752014325914</th>\n",
        "      \n",
        "      <td class=\"data row4 col3\">0.520270090798</th>\n",
        "      \n",
        "      <td class=\"data row4 col4\">0.0095252937789</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row5\">R_l0_g5</th>\n",
        "      \n",
        "      <td class=\"data row5 col0\">0.29865049643</th>\n",
        "      \n",
        "      <td class=\"data row5 col1 U2360ee96_6aa7_11e3_bffd_001a4d511830-1\">0.1156016189</th>\n",
        "      \n",
        "      <td class=\"data row5 col2\">0.16250389458</th>\n",
        "      \n",
        "      <td class=\"data row5 col3\">0.1162681165</th>\n",
        "      \n",
        "      <td class=\"data row5 col4\">0.0624890733322</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row6\">R_l0_g6</th>\n",
        "      \n",
        "      <td class=\"data row6 col0\">0.24039917756</th>\n",
        "      \n",
        "      <td class=\"data row6 col1 U2360ee96_6aa7_11e3_bffd_001a4d511830-6\">0.831887982065</th>\n",
        "      \n",
        "      <td class=\"data row6 col2\">0.139444606684</th>\n",
        "      \n",
        "      <td class=\"data row6 col3\">0.87434203059</th>\n",
        "      \n",
        "      <td class=\"data row6 col4\">0.214273512954</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row7\">R_l0_g7</th>\n",
        "      \n",
        "      <td class=\"data row7 col0\">0.0066042287924</th>\n",
        "      \n",
        "      <td class=\"data row7 col1 U2360ee96_6aa7_11e3_bffd_001a4d511830-3\">0.333568312336</th>\n",
        "      \n",
        "      <td class=\"data row7 col2\">0.860660066709</th>\n",
        "      \n",
        "      <td class=\"data row7 col3\">0.273793599297</th>\n",
        "      \n",
        "      <td class=\"data row7 col4\">0.0247286858822</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "    <tr>\n",
        "      \n",
        "      <th class=\"row_heading level4 row8\">R_l0_g8</th>\n",
        "      \n",
        "      <td class=\"data row8 col0\">0.0372715722521</th>\n",
        "      \n",
        "      <td class=\"data row8 col1 U2360ee96_6aa7_11e3_bffd_001a4d511830-8\">0.996144666822</th>\n",
        "      \n",
        "      <td class=\"data row8 col2\">0.258524096378</th>\n",
        "      \n",
        "      <td class=\"data row8 col3\">0.0665443054498</th>\n",
        "      \n",
        "      <td class=\"data row8 col4\">0.993389023817</th>\n",
        "  \n",
        "    </tr>\n",
        "\n",
        "  </tbody>\n",
        "\n",
        "</table>\n"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x44e4890>"
       ]
      }
     ],
     "prompt_number": 9
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}