Scipy 2016 demo - Hijack notebook.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Flexx demo - Hijacking the notebook"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from flexx import app, event, ui\n",
    "app.init_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Create a dock panel and attach to ``<body>``"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "dock = ui.DockPanel(container='body')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from flexx.ui.examples.twente import Twente\n",
    "twente = Twente(parent=dock, title='Temperature')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from flexx.ui.examples.splines import Splines\n",
    "splines = Splines(parent=dock, title='Splines')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now the hijack ...."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "class JupyterContainer(ui.Widget):\n",
    "    \n",
    "    class JS:\n",
    "        \n",
    "        def init(self):\n",
    "            for name in ('header', 'site'):\n",
    "                el = document.getElementById(name)\n",
    "                self.node.appendChild(el)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "notebook = JupyterContainer(parent=dock, title='Notebook')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "splines.closed.checked = True"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Add Bokeh plot"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from bokeh.models import Range1d, WMTSTileSource, ColumnDataSource, HoverTool\n",
    "from bokeh.plotting import figure\n",
    "from bokeh.sampledata.airports import data as airports\n",
    "\n",
    "title = \"US Airports: Field Elevation > 1500m\"\n",
    "\n",
    "points_source = ColumnDataSource(airports)\n",
    "tile_source = WMTSTileSource(url='http://otile2.mqcdn.com/tiles/1.0.0/sat/{Z}/{X}/{Y}.png')\n",
    "\n",
    "x_range = Range1d(start=airports['x'].min() - 10000, end=airports['x'].max() + 10000, bounds=None)\n",
    "y_range = Range1d(start=airports['y'].min() - 10000, end=airports['y'].max() + 10000, bounds=None)\n",
    "\n",
    "p = figure(tools='wheel_zoom,pan', x_range=x_range, y_range=y_range, title=title)\n",
    "p.axis.visible = False\n",
    "hover_tool = HoverTool(tooltips=[(\"Name\", \"@name\"), (\"Elevation\", \"@elevation (m)\")])\n",
    "p.add_tools(hover_tool)\n",
    "p.add_tile(tile_source)\n",
    "p.circle(x='x', y='y', size=9, fill_color=\"#60ACA1\", line_color=\"#D2C4C1\", line_width=1.5, source=points_source)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "bw1 = ui.BokehWidget(plot=p, title='Airports', style='height:400px')\n",
    "bw1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "bw1.parent = dock"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "import numpy as np\n",
    "from bokeh.plotting import figure \n",
    "\n",
    "N = 10000\n",
    "x = np.random.normal(0, np.pi, N)\n",
    "y = np.sin(x) + np.random.normal(0, 0.2, N)\n",
    "\n",
    "TOOLS = \"pan,wheel_zoom,box_zoom,reset,save,box_select\"\n",
    "p = figure(tools=TOOLS, webgl=True)\n",
    "\n",
    "p.circle(x, y, alpha=0.1, nonselection_alpha=0.01)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "bw2 = ui.BokehWidget(plot=p, title='10K points', style='height:400px')\n",
    "bw2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "bw2.parent = dock"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "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.5.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}