table-update.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from coffeetools import coffee\n",
    "import IPython\n",
    "from bokeh.sampledata import iris\n",
    "%reload_ext coffeetools"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "window.iris={\"columns\":[\"sepal_length\",\"sepal_width\",\"petal_length\",\"petal_width\",\"species\"],\"index\":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149],\"data\":[[5.1,3.5,1.4,0.2,\"setosa\"],[4.9,3.0,1.4,0.2,\"setosa\"],[4.7,3.2,1.3,0.2,\"setosa\"],[4.6,3.1,1.5,0.2,\"setosa\"],[5.0,3.6,1.4,0.2,\"setosa\"],[5.4,3.9,1.7,0.4,\"setosa\"],[4.6,3.4,1.4,0.3,\"setosa\"],[5.0,3.4,1.5,0.2,\"setosa\"],[4.4,2.9,1.4,0.2,\"setosa\"],[4.9,3.1,1.5,0.1,\"setosa\"],[5.4,3.7,1.5,0.2,\"setosa\"],[4.8,3.4,1.6,0.2,\"setosa\"],[4.8,3.0,1.4,0.1,\"setosa\"],[4.3,3.0,1.1,0.1,\"setosa\"],[5.8,4.0,1.2,0.2,\"setosa\"],[5.7,4.4,1.5,0.4,\"setosa\"],[5.4,3.9,1.3,0.4,\"setosa\"],[5.1,3.5,1.4,0.3,\"setosa\"],[5.7,3.8,1.7,0.3,\"setosa\"],[5.1,3.8,1.5,0.3,\"setosa\"],[5.4,3.4,1.7,0.2,\"setosa\"],[5.1,3.7,1.5,0.4,\"setosa\"],[4.6,3.6,1.0,0.2,\"setosa\"],[5.1,3.3,1.7,0.5,\"setosa\"],[4.8,3.4,1.9,0.2,\"setosa\"],[5.0,3.0,1.6,0.2,\"setosa\"],[5.0,3.4,1.6,0.4,\"setosa\"],[5.2,3.5,1.5,0.2,\"setosa\"],[5.2,3.4,1.4,0.2,\"setosa\"],[4.7,3.2,1.6,0.2,\"setosa\"],[4.8,3.1,1.6,0.2,\"setosa\"],[5.4,3.4,1.5,0.4,\"setosa\"],[5.2,4.1,1.5,0.1,\"setosa\"],[5.5,4.2,1.4,0.2,\"setosa\"],[4.9,3.1,1.5,0.2,\"setosa\"],[5.0,3.2,1.2,0.2,\"setosa\"],[5.5,3.5,1.3,0.2,\"setosa\"],[4.9,3.6,1.4,0.1,\"setosa\"],[4.4,3.0,1.3,0.2,\"setosa\"],[5.1,3.4,1.5,0.2,\"setosa\"],[5.0,3.5,1.3,0.3,\"setosa\"],[4.5,2.3,1.3,0.3,\"setosa\"],[4.4,3.2,1.3,0.2,\"setosa\"],[5.0,3.5,1.6,0.6,\"setosa\"],[5.1,3.8,1.9,0.4,\"setosa\"],[4.8,3.0,1.4,0.3,\"setosa\"],[5.1,3.8,1.6,0.2,\"setosa\"],[4.6,3.2,1.4,0.2,\"setosa\"],[5.3,3.7,1.5,0.2,\"setosa\"],[5.0,3.3,1.4,0.2,\"setosa\"],[7.0,3.2,4.7,1.4,\"versicolor\"],[6.4,3.2,4.5,1.5,\"versicolor\"],[6.9,3.1,4.9,1.5,\"versicolor\"],[5.5,2.3,4.0,1.3,\"versicolor\"],[6.5,2.8,4.6,1.5,\"versicolor\"],[5.7,2.8,4.5,1.3,\"versicolor\"],[6.3,3.3,4.7,1.6,\"versicolor\"],[4.9,2.4,3.3,1.0,\"versicolor\"],[6.6,2.9,4.6,1.3,\"versicolor\"],[5.2,2.7,3.9,1.4,\"versicolor\"],[5.0,2.0,3.5,1.0,\"versicolor\"],[5.9,3.0,4.2,1.5,\"versicolor\"],[6.0,2.2,4.0,1.0,\"versicolor\"],[6.1,2.9,4.7,1.4,\"versicolor\"],[5.6,2.9,3.6,1.3,\"versicolor\"],[6.7,3.1,4.4,1.4,\"versicolor\"],[5.6,3.0,4.5,1.5,\"versicolor\"],[5.8,2.7,4.1,1.0,\"versicolor\"],[6.2,2.2,4.5,1.5,\"versicolor\"],[5.6,2.5,3.9,1.1,\"versicolor\"],[5.9,3.2,4.8,1.8,\"versicolor\"],[6.1,2.8,4.0,1.3,\"versicolor\"],[6.3,2.5,4.9,1.5,\"versicolor\"],[6.1,2.8,4.7,1.2,\"versicolor\"],[6.4,2.9,4.3,1.3,\"versicolor\"],[6.6,3.0,4.4,1.4,\"versicolor\"],[6.8,2.8,4.8,1.4,\"versicolor\"],[6.7,3.0,5.0,1.7,\"versicolor\"],[6.0,2.9,4.5,1.5,\"versicolor\"],[5.7,2.6,3.5,1.0,\"versicolor\"],[5.5,2.4,3.8,1.1,\"versicolor\"],[5.5,2.4,3.7,1.0,\"versicolor\"],[5.8,2.7,3.9,1.2,\"versicolor\"],[6.0,2.7,5.1,1.6,\"versicolor\"],[5.4,3.0,4.5,1.5,\"versicolor\"],[6.0,3.4,4.5,1.6,\"versicolor\"],[6.7,3.1,4.7,1.5,\"versicolor\"],[6.3,2.3,4.4,1.3,\"versicolor\"],[5.6,3.0,4.1,1.3,\"versicolor\"],[5.5,2.5,4.0,1.3,\"versicolor\"],[5.5,2.6,4.4,1.2,\"versicolor\"],[6.1,3.0,4.6,1.4,\"versicolor\"],[5.8,2.6,4.0,1.2,\"versicolor\"],[5.0,2.3,3.3,1.0,\"versicolor\"],[5.6,2.7,4.2,1.3,\"versicolor\"],[5.7,3.0,4.2,1.2,\"versicolor\"],[5.7,2.9,4.2,1.3,\"versicolor\"],[6.2,2.9,4.3,1.3,\"versicolor\"],[5.1,2.5,3.0,1.1,\"versicolor\"],[5.7,2.8,4.1,1.3,\"versicolor\"],[6.3,3.3,6.0,2.5,\"virginica\"],[5.8,2.7,5.1,1.9,\"virginica\"],[7.1,3.0,5.9,2.1,\"virginica\"],[6.3,2.9,5.6,1.8,\"virginica\"],[6.5,3.0,5.8,2.2,\"virginica\"],[7.6,3.0,6.6,2.1,\"virginica\"],[4.9,2.5,4.5,1.7,\"virginica\"],[7.3,2.9,6.3,1.8,\"virginica\"],[6.7,2.5,5.8,1.8,\"virginica\"],[7.2,3.6,6.1,2.5,\"virginica\"],[6.5,3.2,5.1,2.0,\"virginica\"],[6.4,2.7,5.3,1.9,\"virginica\"],[6.8,3.0,5.5,2.1,\"virginica\"],[5.7,2.5,5.0,2.0,\"virginica\"],[5.8,2.8,5.1,2.4,\"virginica\"],[6.4,3.2,5.3,2.3,\"virginica\"],[6.5,3.0,5.5,1.8,\"virginica\"],[7.7,3.8,6.7,2.2,\"virginica\"],[7.7,2.6,6.9,2.3,\"virginica\"],[6.0,2.2,5.0,1.5,\"virginica\"],[6.9,3.2,5.7,2.3,\"virginica\"],[5.6,2.8,4.9,2.0,\"virginica\"],[7.7,2.8,6.7,2.0,\"virginica\"],[6.3,2.7,4.9,1.8,\"virginica\"],[6.7,3.3,5.7,2.1,\"virginica\"],[7.2,3.2,6.0,1.8,\"virginica\"],[6.2,2.8,4.8,1.8,\"virginica\"],[6.1,3.0,4.9,1.8,\"virginica\"],[6.4,2.8,5.6,2.1,\"virginica\"],[7.2,3.0,5.8,1.6,\"virginica\"],[7.4,2.8,6.1,1.9,\"virginica\"],[7.9,3.8,6.4,2.0,\"virginica\"],[6.4,2.8,5.6,2.2,\"virginica\"],[6.3,2.8,5.1,1.5,\"virginica\"],[6.1,2.6,5.6,1.4,\"virginica\"],[7.7,3.0,6.1,2.3,\"virginica\"],[6.3,3.4,5.6,2.4,\"virginica\"],[6.4,3.1,5.5,1.8,\"virginica\"],[6.0,3.0,4.8,1.8,\"virginica\"],[6.9,3.1,5.4,2.1,\"virginica\"],[6.7,3.1,5.6,2.4,\"virginica\"],[6.9,3.1,5.1,2.3,\"virginica\"],[5.8,2.7,5.1,1.9,\"virginica\"],[6.8,3.2,5.9,2.3,\"virginica\"],[6.7,3.3,5.7,2.5,\"virginica\"],[6.7,3.0,5.2,2.3,\"virginica\"],[6.3,2.5,5.0,1.9,\"virginica\"],[6.5,3.0,5.2,2.0,\"virginica\"],[6.2,3.4,5.4,2.3,\"virginica\"],[5.9,3.0,5.1,1.8,\"virginica\"]]}"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "IPython.display.Javascript(\"window.iris=\"+iris.flowers.to_json(orient='split'))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"hi\"></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html \n",
    "<div id=\"hi\"></div>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "// Generated by CoffeeScript 1.10.0\n",
       "(function() {\n",
       "  var slice = [].slice;\n",
       "\n",
       "  require([\"//d3js.org/d3.v3.min.js\"], function(d3) {\n",
       "    var Table;\n",
       "    d3.selection.prototype.create = function(arg) {\n",
       "      var c, classes, data, handler, id, j, len, ref, ref1, ref2, ref3, ref4, selection, tag;\n",
       "      tag = (ref = arg.tag) != null ? ref : 'div', classes = (ref1 = arg.classes) != null ? ref1 : [], id = (ref2 = arg.id) != null ? ref2 : '', data = (ref3 = arg.data) != null ? ref3 : [[]], handler = (ref4 = arg.handler) != null ? ref4 : function() {};\n",
       "      selection = this.selectAll(tag).data(data);\n",
       "      selection.enter().append(tag);\n",
       "      if (classes) {\n",
       "        for (j = 0, len = classes.length; j < len; j++) {\n",
       "          c = classes[j];\n",
       "          selection.classed(c, true);\n",
       "        }\n",
       "      }\n",
       "      if (id) {\n",
       "        selection.attr('id', id);\n",
       "      }\n",
       "      selection.each(handler);\n",
       "      selection.exit().remove();\n",
       "      return selection;\n",
       "    };\n",
       "    Table = (function() {\n",
       "      function Table(selection1, data1, columns, index1) {\n",
       "        var j, len, part, ref;\n",
       "        this.selection = selection1;\n",
       "        this.data = data1;\n",
       "        this.columns = columns;\n",
       "        this.index = index1;\n",
       "        if (this.shape == null) {\n",
       "          this.shape = [10, 5];\n",
       "        }\n",
       "        if (this.iloc == null) {\n",
       "          this.iloc = 0;\n",
       "        }\n",
       "        this.table = this.selection.create({\n",
       "          tag: 'table',\n",
       "          data: [\n",
       "            {\n",
       "              index: this.index,\n",
       "              columns: this.columns,\n",
       "              data: this.data\n",
       "            }\n",
       "          ]\n",
       "        });\n",
       "        ref = ['head', 'body'];\n",
       "        for (j = 0, len = ref.length; j < len; j++) {\n",
       "          part = ref[j];\n",
       "          this[part] = this.table.create({\n",
       "            tag: \"t\" + part,\n",
       "            data: [null]\n",
       "          });\n",
       "        }\n",
       "        this.head.create({\n",
       "          tag: 'th',\n",
       "          data: [null].concat(slice.call(this.columns)),\n",
       "          handler: function(d) {\n",
       "            return this.innerText = d;\n",
       "          }\n",
       "        });\n",
       "        this.update(this.iloc);\n",
       "      }\n",
       "\n",
       "      Table.prototype.update = function(iloc1) {\n",
       "        var iloc, index, ref;\n",
       "        this.iloc = iloc1;\n",
       "        ref = [this.iloc, this.index], iloc = ref[0], index = ref[1];\n",
       "        return this.body.create({\n",
       "          tag: 'tr',\n",
       "          data: this.table.datum()['data'].slice(this.iloc, +(this.iloc + this.shape[0]) + 1 || 9e9),\n",
       "          handler: function(d, i) {\n",
       "            d3.select(this).create({\n",
       "              tag: 'th',\n",
       "              data: [index[iloc + i]],\n",
       "              handler: function(d) {\n",
       "                return this.innerText = d;\n",
       "              }\n",
       "            });\n",
       "            return d3.select(this).create({\n",
       "              tag: 'td',\n",
       "              data: d,\n",
       "              handler: function(d) {\n",
       "                return this.innerText = d;\n",
       "              }\n",
       "            });\n",
       "          }\n",
       "        });\n",
       "      };\n",
       "\n",
       "      Table.prototype.reshape = function(shape) {\n",
       "        this.shape = shape;\n",
       "        return this.update(this.iloc);\n",
       "      };\n",
       "\n",
       "      return Table;\n",
       "\n",
       "    })();\n",
       "    return window.tab = new Table(d3.select('#hi'), iris.data, iris.columns, iris.index);\n",
       "  });\n",
       "\n",
       "}).call(this);\n"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%coffeescript\n",
    "require [\"//d3js.org/d3.v3.min.js\"], (d3)->\n",
    "    d3.selection::create = ({tag='div', classes=[], id='', data=[[]], handler=->})->\n",
    "        selection = @selectAll tag\n",
    "            .data data\n",
    "        selection.enter().append tag\n",
    "        if classes\n",
    "            for c in classes\n",
    "                selection.classed c, true\n",
    "        if id \n",
    "            selection.attr 'id', id\n",
    "        selection.each handler\n",
    "        selection.exit().remove()\n",
    "        selection\n",
    "\n",
    "    class Table \n",
    "        constructor: (@selection, @data, @columns, @index)->\n",
    "            @shape ?= [10,5]\n",
    "            @iloc ?= 0\n",
    "            @table = @selection.create \n",
    "                tag: 'table'\n",
    "                data: [{\n",
    "                        index: @index\n",
    "                        columns: @columns\n",
    "                        data: @data\n",
    "                    }]\n",
    "            for part in ['head','body']\n",
    "                @[part] = @table.create\n",
    "                    tag: \"t#{part}\"\n",
    "                    data: [null]\n",
    "            @head.create\n",
    "                tag: 'th'\n",
    "                data: [null, @columns...]\n",
    "                handler: (d)->@innerText = d\n",
    "            @update @iloc\n",
    "\n",
    "        update: (@iloc)->\n",
    "            [iloc,index] = [@iloc,@index]\n",
    "            @body.create \n",
    "                tag: 'tr'\n",
    "                data: @table.datum()['data'][@iloc..@iloc+@shape[0]]\n",
    "                handler: (d,i)->\n",
    "                    d3.select(@).create \n",
    "                        tag: 'th'\n",
    "                        data: [index[iloc + i]]\n",
    "                        handler: (d)-> @innerText = d\n",
    "                    d3.select(@).create \n",
    "                        tag: 'td'\n",
    "                        data: d\n",
    "                        handler: (d)-> @innerText = d\n",
    "        reshape: (@shape)-> @update @iloc\n",
    "\n",
    "    window.tab = new Table d3.select('#hi'), iris.data, iris.columns, iris.index"
   ]
  }
 ],
 "metadata": {
  "anaconda-cloud": {},
  "kernelspec": {
   "display_name": "Python [Root]",
   "language": "python",
   "name": "Python [Root]"
  },
  "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.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}