Adding animated tables to your IPython presentations

ipython-presentations-build-tables.ipynb

{
 "metadata": {
  "name": ""
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Available as a [github gist](https://gist.github.com/mgymrek/8404670)\n",
      "\n",
      "A couple weeks ago, I made a small class to [create animated build figures for IPython presentations](http://melissagymrek.com/python/2013/12/13/ipython-presentations-build-figures.html). This a short addendum to that post, this time with animated tables instead of figures. These draw on the [formatted IPython tables](http://melissagymrek.com/python/2014/01/12/ipython-tables.html) that I posted yesterday.\n",
      "\n",
      "The idea here is same with the figures: often when you are presenting a figure or table, using animation to slowly build it up helps you tell the story in a more organized way. Powerpoint is full of options to do this, but I would like to do it programatically in Python.\n",
      "\n",
      "The goal of the animated tables is to make a widget that takes in a formatted table and a list of functions to apply to the table With each click, it applies the next function in succession. This is best illustrated with a short example:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "import pandas as pd\n",
      "from ipywidgets import *\n",
      "\n",
      "# Create a data frame that we will make into a table\n",
      "df = pd.DataFrame({\"x\":[1,2,3], \"y\": [9,8,7], \"x\": [0.1,0.2,0.3]})\n",
      "df.index = [\"row1\", \"row2\", \"row3\"]\n",
      "\n",
      "# Make a PrettyTable out of it\n",
      "pt = PrettyTable(df, tstyle=TableStyle(theme=\"theme1\"), center=True, header_col=True, header_row=True)\n",
      "\n",
      "#### Functions for animation ###\n",
      "# Highlight second row\n",
      "def f1(pt):\n",
      "    pt.update_cell_style(rows=[1], background_color=\"yellow\", font_weight=\"bold\")\n",
      "\n",
      "# Make the font in the top right corner red\n",
      "def f2(pt):\n",
      "    pt.update_cell_style(rows=[0], cols=[1], color=\"red\")\n",
      "    \n",
      "# Make a ststic build table\n",
      "# pass it the PrettyTable, and the list of functions to apply\n",
      "StaticBuildTable(pt, [f1, f2])"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "\n",
        "    <style>\n",
        "    *:focus {\n",
        "     outline:none;\n",
        "    }\n",
        "    </style>\n",
        "    <script type=\"text/javascript\">\n",
        "    function ProgressForward(div){\n",
        "    var control = div.getElementsByTagName(\"input\")[0];\n",
        "    var outputs = div.getElementsByTagName(\"div\");\n",
        "    control.value = parseInt(control.value) + 1;\n",
        "    if (control.value >= outputs.length - 1) {\n",
        "        control.value = outputs.length - 2;\n",
        "    }\n",
        "    for(i=0; i<outputs.length; i++){\n",
        "        var name = outputs[i].getAttribute(\"name\");\n",
        "        if(name == \"name\" + control.value){\n",
        "            outputs[i].style.display = 'block';\n",
        "        } else if (name != \"control\"){\n",
        "            outputs[i].style.display = 'none'\n",
        "        }\n",
        "    }\n",
        "    }\n",
        "    \n",
        "    function ProgressBackward(div){\n",
        "    var control = div.getElementsByTagName(\"input\")[0];\n",
        "    var outputs = div.getElementsByTagName(\"div\");\n",
        "    control.value = parseInt(control.value) - 1;\n",
        "    if (control.value <= 0) {\n",
        "        control.value=0;\n",
        "    }\n",
        "    for(i=0; i<outputs.length; i++){\n",
        "        var name = outputs[i].getAttribute(\"name\");\n",
        "        if(name == \"name\" + control.value){\n",
        "            outputs[i].style.display = 'block';\n",
        "        } else if (name != \"control\"){\n",
        "            outputs[i].style.display = 'none'\n",
        "        }\n",
        "    }\n",
        "    }\n",
        "    \n",
        "    // Use \"a\" to go forward, \"r\" to go back. Or click to progress\n",
        "    function HandleKey(div){\n",
        "    var key = window.event.keyCode;\n",
        "    if (key == 65) {\n",
        "       ProgressForward(div);\n",
        "    }\n",
        "    if (key == 82) {\n",
        "       ProgressBackward(div);\n",
        "    }\n",
        "    }\n",
        "    </script>\n",
        "    <div name=\"control\" onclick=\"ProgressForward(this.parentNode);return false;\" onkeyup=\"HandleKey(this.parentNode);\" tabindex=\"0\">\n",
        "      \n",
        "    <div name=\"name0\" style=\"display:block\">\n",
        "      <center><table style=\"color: black;border: 1px solid black;\"><tr style=\"color: black;border: 1px solid black;\"><td style=\"\"></td><td style=\"color: black;font-weight: bold;background-color: lightgray;\">x</td><td style=\"color: black;font-weight: bold;background-color: lightgray;\">y</td></tr><tr style=\"color: black;border: 1px solid black;\"><td style=\"color: black;font_weight: bold;background-color: lightgray;\">row1</td><td style=\"color: black;border: 1px solid black;\">0.1</td><td style=\"color: black;border: 1px solid black;\">9.0</td></tr><tr style=\"color: black;border: 1px solid black;\"><td style=\"color: black;font_weight: bold;background-color: lightgray;\">row2</td><td style=\"color: black;border: 1px solid black;\">0.2</td><td style=\"color: black;border: 1px solid black;\">8.0</td></tr><tr style=\"color: black;border: 1px solid black;\"><td style=\"color: black;font_weight: bold;background-color: lightgray;\">row3</td><td style=\"color: black;border: 1px solid black;\">0.3</td><td style=\"color: black;border: 1px solid black;\">7.0</td></tr></table></center>\n",
        "    </div>\n",
        "    \n",
        "    <div name=\"name1\" style=\"display:none\">\n",
        "      <center><table style=\"color: black;border: 1px solid black;\"><tr style=\"color: black;border: 1px solid black;\"><td style=\"\"></td><td style=\"color: black;font-weight: bold;background-color: lightgray;\">x</td><td style=\"color: black;font-weight: bold;background-color: lightgray;\">y</td></tr><tr style=\"color: black;border: 1px solid black;\"><td style=\"color: black;font_weight: bold;background-color: lightgray;\">row1</td><td style=\"color: black;border: 1px solid black;\">0.1</td><td style=\"color: black;border: 1px solid black;\">9.0</td></tr><tr style=\"color: black;border: 1px solid black;\"><td style=\"color: black;font_weight: bold;background-color: lightgray;\">row2</td><td style=\"color: black;font-weight: bold;border: 1px solid black;background-color: yellow;\">0.2</td><td style=\"color: black;font-weight: bold;border: 1px solid black;background-color: yellow;\">8.0</td></tr><tr style=\"color: black;border: 1px solid black;\"><td style=\"color: black;font_weight: bold;background-color: lightgray;\">row3</td><td style=\"color: black;border: 1px solid black;\">0.3</td><td style=\"color: black;border: 1px solid black;\">7.0</td></tr></table></center>\n",
        "    </div>\n",
        "    \n",
        "    <div name=\"name2\" style=\"display:none\">\n",
        "      <center><table style=\"color: black;border: 1px solid black;\"><tr style=\"color: black;border: 1px solid black;\"><td style=\"\"></td><td style=\"color: black;font-weight: bold;background-color: lightgray;\">x</td><td style=\"color: black;font-weight: bold;background-color: lightgray;\">y</td></tr><tr style=\"color: black;border: 1px solid black;\"><td style=\"color: black;font_weight: bold;background-color: lightgray;\">row1</td><td style=\"color: black;border: 1px solid black;\">0.1</td><td style=\"color: red;border: 1px solid black;\">9.0</td></tr><tr style=\"color: black;border: 1px solid black;\"><td style=\"color: black;font_weight: bold;background-color: lightgray;\">row2</td><td style=\"color: black;font-weight: bold;border: 1px solid black;background-color: yellow;\">0.2</td><td style=\"color: black;font-weight: bold;border: 1px solid black;background-color: yellow;\">8.0</td></tr><tr style=\"color: black;border: 1px solid black;\"><td style=\"color: black;font_weight: bold;background-color: lightgray;\">row3</td><td style=\"color: black;border: 1px solid black;\">0.3</td><td style=\"color: black;border: 1px solid black;\">7.0</td></tr></table></center>\n",
        "    </div>\n",
        "    \n",
        "      <input type=\"none\" value=\"0\" style=\"display:none;\">\n",
        "    </div>\n",
        "    "
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 6,
       "text": [
        "<ipywidgets.interact.StaticBuildTable at 0x3f01950>"
       ]
      }
     ],
     "prompt_number": 6
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Try clicking on the above table to walk through the animation. You can also use \"a\" and \"r\" to \"(a)dvance\" and \"(r)everse\" the animation.\n",
      "\n",
      "You can get these in [my forked ipywidgets repository](https://github.com/mgymrek/ipywidgets). You can see more about fun resources for IPython presentations [here](http://melissagymrek.com/ipython_presentation_resources.html). Finally, to see how this works, you can check out [my post on how to do this for figures](http://melissagymrek.com/python/2013/12/13/ipython-presentations-build-figures.html)."
     ]
    }
   ],
   "metadata": {}
  }
 ]
}