How_to_make_(convoluted)_pop-ups_with_Jupyter.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script type=\"text/Javascript\">var win = window.open(\"\", \"Title\", \"toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=780, height=200, top=\"+(screen.height-400)+\", left=\"+(screen.width-840));win.document.body.innerHTML = '<table border=\"1\" class=\"dataframe\">\\  <thead>\\    <tr style=\"text-align: right;\">\\      <th></th>\\      <th>A</th>\\      <th>B</th>\\      <th>C</th>\\      <th>D</th>\\    </tr>\\  </thead>\\  <tbody>\\    <tr>\\      <th>0</th>\\      <td>-0.780537</td>\\      <td>-0.895544</td>\\      <td>-0.638017</td>\\      <td>-0.465770</td>\\    </tr>\\    <tr>\\      <th>1</th>\\      <td>-0.910575</td>\\      <td>0.283187</td>\\      <td>0.373841</td>\\      <td>-0.977076</td>\\    </tr>\\    <tr>\\      <th>2</th>\\      <td>0.960541</td>\\      <td>1.234127</td>\\      <td>0.314177</td>\\      <td>-0.225052</td>\\    </tr>\\    <tr>\\      <th>3</th>\\      <td>0.656747</td>\\      <td>0.939493</td>\\      <td>1.566399</td>\\      <td>-0.053187</td>\\    </tr>\\    <tr>\\      <th>4</th>\\      <td>0.689250</td>\\      <td>-0.161518</td>\\      <td>-1.048447</td>\\      <td>0.856335</td>\\    </tr>\\    <tr>\\      <th>5</th>\\      <td>-1.154763</td>\\      <td>-0.856292</td>\\      <td>0.683777</td>\\      <td>-0.861411</td>\\    </tr>\\  </tbody>\\</table>';</script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 10,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import pandas as pd\n",
    "import numpy as np\n",
    "df = pd.DataFrame(np.random.randn(6,4),columns=list('ABCD'))\n",
    "# Show in Jupyter\n",
    "df\n",
    "\n",
    "from IPython.display import HTML\n",
    "s  = '<script type=\"text/Javascript\">'\n",
    "s += 'var win = window.open(\"\", \"Title\", \"toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=780, height=200, top=\"+(screen.height-400)+\", left=\"+(screen.width-840));'\n",
    "s += 'win.document.body.innerHTML = \\'' + df.to_html().replace(\"\\n\",'\\\\') + '\\';'\n",
    "s += '</script>'\n",
    "\n",
    "# Show in new Window\n",
    "HTML(s)\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script type=\"text/Javascript\">win.document.body.innerHTML = '<table border=\"1\" class=\"dataframe\">\\  <thead>\\    <tr style=\"text-align: right;\">\\      <th></th>\\      <th>A</th>\\      <th>B</th>\\      <th>C</th>\\      <th>D</th>\\    </tr>\\  </thead>\\  <tbody>\\    <tr>\\      <th>0</th>\\      <td>-0.390269</td>\\      <td>-0.447772</td>\\      <td>-0.319008</td>\\      <td>-0.232885</td>\\    </tr>\\    <tr>\\      <th>1</th>\\      <td>-0.455288</td>\\      <td>0.141593</td>\\      <td>0.186920</td>\\      <td>-0.488538</td>\\    </tr>\\    <tr>\\      <th>2</th>\\      <td>0.480271</td>\\      <td>0.617064</td>\\      <td>0.157088</td>\\      <td>-0.112526</td>\\    </tr>\\    <tr>\\      <th>3</th>\\      <td>0.328374</td>\\      <td>0.469746</td>\\      <td>0.783199</td>\\      <td>-0.026593</td>\\    </tr>\\    <tr>\\      <th>4</th>\\      <td>0.344625</td>\\      <td>-0.080759</td>\\      <td>-0.524224</td>\\      <td>0.428168</td>\\    </tr>\\    <tr>\\      <th>5</th>\\      <td>-0.577381</td>\\      <td>-0.428146</td>\\      <td>0.341889</td>\\      <td>-0.430705</td>\\    </tr>\\  </tbody>\\</table>';</script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 11,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# This changes the values in the dataframe and instantly updates the other window.\n",
    "\n",
    "df /= 2\n",
    "s  = '<script type=\"text/Javascript\">'\n",
    "s += 'win.document.body.innerHTML = \\'' + df.to_html().replace(\"\\n\",'\\\\') + '\\';'\n",
    "s += '</script>'\n",
    "HTML(s)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [],
   "source": [
    "# This may also work.\n",
    "\n",
    "def View(df):\n",
    "    css = \"\"\"<style>\n",
    "    table { border-collapse: collapse; border: 3px solid #eee; }\n",
    "    table tr th:first-child { background-color: #eeeeee; color: #333; font-weight: bold }\n",
    "    table thead th { background-color: #eee; color: #000; }\n",
    "    tr, th, td { border: 1px solid #ccc; border-width: 1px 0 0 1px; border-collapse: collapse;\n",
    "    padding: 3px; font-family: monospace; font-size: 10px }</style>\n",
    "    \"\"\"\n",
    "    s  = '<script type=\"text/Javascript\">'\n",
    "    s += 'var win = window.open(\"\", \"Title\", \"toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=780, height=200, top=\"+(screen.height-400)+\", left=\"+(screen.width-840));'\n",
    "    s += 'win.document.body.innerHTML = \\'' + (df.to_html() + css).replace(\"\\n\",'\\\\') + '\\';'\n",
    "    s += '</script>'\n",
    "\n",
    "    return(HTML(s+css))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script type=\"text/Javascript\">var win = window.open(\"\", \"Title\", \"toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=780, height=200, top=\"+(screen.height-400)+\", left=\"+(screen.width-840));win.document.body.innerHTML = '<table border=\"1\" class=\"dataframe\">\\  <thead>\\    <tr style=\"text-align: right;\">\\      <th></th>\\      <th>A</th>\\      <th>B</th>\\      <th>C</th>\\      <th>D</th>\\    </tr>\\  </thead>\\  <tbody>\\    <tr>\\      <th>0</th>\\      <td>-0.390269</td>\\      <td>-0.447772</td>\\      <td>-0.319008</td>\\      <td>-0.232885</td>\\    </tr>\\    <tr>\\      <th>1</th>\\      <td>-0.455288</td>\\      <td>0.141593</td>\\      <td>0.186920</td>\\      <td>-0.488538</td>\\    </tr>\\    <tr>\\      <th>2</th>\\      <td>0.480271</td>\\      <td>0.617064</td>\\      <td>0.157088</td>\\      <td>-0.112526</td>\\    </tr>\\    <tr>\\      <th>3</th>\\      <td>0.328374</td>\\      <td>0.469746</td>\\      <td>0.783199</td>\\      <td>-0.026593</td>\\    </tr>\\    <tr>\\      <th>4</th>\\      <td>0.344625</td>\\      <td>-0.080759</td>\\      <td>-0.524224</td>\\      <td>0.428168</td>\\    </tr>\\    <tr>\\      <th>5</th>\\      <td>-0.577381</td>\\      <td>-0.428146</td>\\      <td>0.341889</td>\\      <td>-0.430705</td>\\    </tr>\\  </tbody>\\</table><style>\\    table { border-collapse: collapse; border: 3px solid #eee; }\\    table tr th:first-child { background-color: #eeeeee; color: #333; font-weight: bold }\\    table thead th { background-color: #eee; color: #000; }\\    tr, th, td { border: 1px solid #ccc; border-width: 1px 0 0 1px; border-collapse: collapse;\\    padding: 3px; font-family: monospace; font-size: 10px }</style>\\    ';</script><style>\n",
       "    table { border-collapse: collapse; border: 3px solid #eee; }\n",
       "    table tr th:first-child { background-color: #eeeeee; color: #333; font-weight: bold }\n",
       "    table thead th { background-color: #eee; color: #000; }\n",
       "    tr, th, td { border: 1px solid #ccc; border-width: 1px 0 0 1px; border-collapse: collapse;\n",
       "    padding: 3px; font-family: monospace; font-size: 10px }</style>\n",
       "    "
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 14,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "View(df)"
   ]
  }
 ],
 "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.6.5"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}