Static_Bokeh_from_a_template.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "---\n",
    "# Pre-requisites:"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Imports for this notebook:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "    <div class=\"bk-root\">\n",
       "        <a href=\"https://bokeh.pydata.org\" target=\"_blank\" class=\"bk-logo bk-logo-small bk-logo-notebook\"></a>\n",
       "        <span id=\"7a12b7ae-4af1-44c6-984c-7efc52a689eb\">Loading BokehJS ...</span>\n",
       "    </div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "(function(root) {\n",
       "  function now() {\n",
       "    return new Date();\n",
       "  }\n",
       "\n",
       "  var force = true;\n",
       "\n",
       "  if (typeof (root._bokeh_onload_callbacks) === \"undefined\" || force === true) {\n",
       "    root._bokeh_onload_callbacks = [];\n",
       "    root._bokeh_is_loading = undefined;\n",
       "  }\n",
       "\n",
       "  var JS_MIME_TYPE = 'application/javascript';\n",
       "  var HTML_MIME_TYPE = 'text/html';\n",
       "  var EXEC_MIME_TYPE = 'application/vnd.bokehjs_exec.v0+json';\n",
       "  var CLASS_NAME = 'output_bokeh rendered_html';\n",
       "\n",
       "  /**\n",
       "   * Render data to the DOM node\n",
       "   */\n",
       "  function render(props, node) {\n",
       "    var script = document.createElement(\"script\");\n",
       "    node.appendChild(script);\n",
       "  }\n",
       "\n",
       "  /**\n",
       "   * Handle when an output is cleared or removed\n",
       "   */\n",
       "  function handleClearOutput(event, handle) {\n",
       "    var cell = handle.cell;\n",
       "\n",
       "    var id = cell.output_area._bokeh_element_id;\n",
       "    var server_id = cell.output_area._bokeh_server_id;\n",
       "    // Clean up Bokeh references\n",
       "    if (id != null && id in Bokeh.index) {\n",
       "      Bokeh.index[id].model.document.clear();\n",
       "      delete Bokeh.index[id];\n",
       "    }\n",
       "\n",
       "    if (server_id !== undefined) {\n",
       "      // Clean up Bokeh references\n",
       "      var cmd = \"from bokeh.io.state import curstate; print(curstate().uuid_to_server['\" + server_id + \"'].get_sessions()[0].document.roots[0]._id)\";\n",
       "      cell.notebook.kernel.execute(cmd, {\n",
       "        iopub: {\n",
       "          output: function(msg) {\n",
       "            var id = msg.content.text.trim();\n",
       "            if (id in Bokeh.index) {\n",
       "              Bokeh.index[id].model.document.clear();\n",
       "              delete Bokeh.index[id];\n",
       "            }\n",
       "          }\n",
       "        }\n",
       "      });\n",
       "      // Destroy server and session\n",
       "      var cmd = \"import bokeh.io.notebook as ion; ion.destroy_server('\" + server_id + \"')\";\n",
       "      cell.notebook.kernel.execute(cmd);\n",
       "    }\n",
       "  }\n",
       "\n",
       "  /**\n",
       "   * Handle when a new output is added\n",
       "   */\n",
       "  function handleAddOutput(event, handle) {\n",
       "    var output_area = handle.output_area;\n",
       "    var output = handle.output;\n",
       "\n",
       "    // limit handleAddOutput to display_data with EXEC_MIME_TYPE content only\n",
       "    if ((output.output_type != \"display_data\") || (!output.data.hasOwnProperty(EXEC_MIME_TYPE))) {\n",
       "      return\n",
       "    }\n",
       "\n",
       "    var toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n",
       "\n",
       "    if (output.metadata[EXEC_MIME_TYPE][\"id\"] !== undefined) {\n",
       "      toinsert[toinsert.length - 1].firstChild.textContent = output.data[JS_MIME_TYPE];\n",
       "      // store reference to embed id on output_area\n",
       "      output_area._bokeh_element_id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n",
       "    }\n",
       "    if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n",
       "      var bk_div = document.createElement(\"div\");\n",
       "      bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n",
       "      var script_attrs = bk_div.children[0].attributes;\n",
       "      for (var i = 0; i < script_attrs.length; i++) {\n",
       "        toinsert[toinsert.length - 1].firstChild.setAttribute(script_attrs[i].name, script_attrs[i].value);\n",
       "      }\n",
       "      // store reference to server id on output_area\n",
       "      output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE][\"server_id\"];\n",
       "    }\n",
       "  }\n",
       "\n",
       "  function register_renderer(events, OutputArea) {\n",
       "\n",
       "    function append_mime(data, metadata, element) {\n",
       "      // create a DOM node to render to\n",
       "      var toinsert = this.create_output_subarea(\n",
       "        metadata,\n",
       "        CLASS_NAME,\n",
       "        EXEC_MIME_TYPE\n",
       "      );\n",
       "      this.keyboard_manager.register_events(toinsert);\n",
       "      // Render to node\n",
       "      var props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n",
       "      render(props, toinsert[toinsert.length - 1]);\n",
       "      element.append(toinsert);\n",
       "      return toinsert\n",
       "    }\n",
       "\n",
       "    /* Handle when an output is cleared or removed */\n",
       "    events.on('clear_output.CodeCell', handleClearOutput);\n",
       "    events.on('delete.Cell', handleClearOutput);\n",
       "\n",
       "    /* Handle when a new output is added */\n",
       "    events.on('output_added.OutputArea', handleAddOutput);\n",
       "\n",
       "    /**\n",
       "     * Register the mime type and append_mime function with output_area\n",
       "     */\n",
       "    OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n",
       "      /* Is output safe? */\n",
       "      safe: true,\n",
       "      /* Index of renderer in `output_area.display_order` */\n",
       "      index: 0\n",
       "    });\n",
       "  }\n",
       "\n",
       "  // register the mime type if in Jupyter Notebook environment and previously unregistered\n",
       "  if (root.Jupyter !== undefined) {\n",
       "    var events = require('base/js/events');\n",
       "    var OutputArea = require('notebook/js/outputarea').OutputArea;\n",
       "\n",
       "    if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n",
       "      register_renderer(events, OutputArea);\n",
       "    }\n",
       "  }\n",
       "\n",
       "  \n",
       "  if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n",
       "    root._bokeh_timeout = Date.now() + 5000;\n",
       "    root._bokeh_failed_load = false;\n",
       "  }\n",
       "\n",
       "  var NB_LOAD_WARNING = {'data': {'text/html':\n",
       "     \"<div style='background-color: #fdd'>\\n\"+\n",
       "     \"<p>\\n\"+\n",
       "     \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n",
       "     \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n",
       "     \"</p>\\n\"+\n",
       "     \"<ul>\\n\"+\n",
       "     \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n",
       "     \"<li>use INLINE resources instead, as so:</li>\\n\"+\n",
       "     \"</ul>\\n\"+\n",
       "     \"<code>\\n\"+\n",
       "     \"from bokeh.resources import INLINE\\n\"+\n",
       "     \"output_notebook(resources=INLINE)\\n\"+\n",
       "     \"</code>\\n\"+\n",
       "     \"</div>\"}};\n",
       "\n",
       "  function display_loaded() {\n",
       "    var el = document.getElementById(\"7a12b7ae-4af1-44c6-984c-7efc52a689eb\");\n",
       "    if (el != null) {\n",
       "      el.textContent = \"BokehJS is loading...\";\n",
       "    }\n",
       "    if (root.Bokeh !== undefined) {\n",
       "      if (el != null) {\n",
       "        el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n",
       "      }\n",
       "    } else if (Date.now() < root._bokeh_timeout) {\n",
       "      setTimeout(display_loaded, 100)\n",
       "    }\n",
       "  }\n",
       "\n",
       "\n",
       "  function run_callbacks() {\n",
       "    try {\n",
       "      root._bokeh_onload_callbacks.forEach(function(callback) { callback() });\n",
       "    }\n",
       "    finally {\n",
       "      delete root._bokeh_onload_callbacks\n",
       "    }\n",
       "    console.info(\"Bokeh: all callbacks have finished\");\n",
       "  }\n",
       "\n",
       "  function load_libs(js_urls, callback) {\n",
       "    root._bokeh_onload_callbacks.push(callback);\n",
       "    if (root._bokeh_is_loading > 0) {\n",
       "      console.log(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n",
       "      return null;\n",
       "    }\n",
       "    if (js_urls == null || js_urls.length === 0) {\n",
       "      run_callbacks();\n",
       "      return null;\n",
       "    }\n",
       "    console.log(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n",
       "    root._bokeh_is_loading = js_urls.length;\n",
       "    for (var i = 0; i < js_urls.length; i++) {\n",
       "      var url = js_urls[i];\n",
       "      var s = document.createElement('script');\n",
       "      s.src = url;\n",
       "      s.async = false;\n",
       "      s.onreadystatechange = s.onload = function() {\n",
       "        root._bokeh_is_loading--;\n",
       "        if (root._bokeh_is_loading === 0) {\n",
       "          console.log(\"Bokeh: all BokehJS libraries loaded\");\n",
       "          run_callbacks()\n",
       "        }\n",
       "      };\n",
       "      s.onerror = function() {\n",
       "        console.warn(\"failed to load library \" + url);\n",
       "      };\n",
       "      console.log(\"Bokeh: injecting script tag for BokehJS library: \", url);\n",
       "      document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
       "    }\n",
       "  };var element = document.getElementById(\"7a12b7ae-4af1-44c6-984c-7efc52a689eb\");\n",
       "  if (element == null) {\n",
       "    console.log(\"Bokeh: ERROR: autoload.js configured with elementid '7a12b7ae-4af1-44c6-984c-7efc52a689eb' but no matching script tag was found. \")\n",
       "    return false;\n",
       "  }\n",
       "\n",
       "  var js_urls = [\"https://cdn.pydata.org/bokeh/release/bokeh-0.13.0.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.13.0.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-tables-0.13.0.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-gl-0.13.0.min.js\"];\n",
       "\n",
       "  var inline_js = [\n",
       "    function(Bokeh) {\n",
       "      Bokeh.set_log_level(\"info\");\n",
       "    },\n",
       "    \n",
       "    function(Bokeh) {\n",
       "      \n",
       "    },\n",
       "    function(Bokeh) {\n",
       "      console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-0.13.0.min.css\");\n",
       "      Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-0.13.0.min.css\");\n",
       "      console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.13.0.min.css\");\n",
       "      Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.13.0.min.css\");\n",
       "      console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-tables-0.13.0.min.css\");\n",
       "      Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-tables-0.13.0.min.css\");\n",
       "    }\n",
       "  ];\n",
       "\n",
       "  function run_inline_js() {\n",
       "    \n",
       "    if ((root.Bokeh !== undefined) || (force === true)) {\n",
       "      for (var i = 0; i < inline_js.length; i++) {\n",
       "        inline_js[i].call(root, root.Bokeh);\n",
       "      }if (force === true) {\n",
       "        display_loaded();\n",
       "      }} else if (Date.now() < root._bokeh_timeout) {\n",
       "      setTimeout(run_inline_js, 100);\n",
       "    } else if (!root._bokeh_failed_load) {\n",
       "      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n",
       "      root._bokeh_failed_load = true;\n",
       "    } else if (force !== true) {\n",
       "      var cell = $(document.getElementById(\"7a12b7ae-4af1-44c6-984c-7efc52a689eb\")).parents('.cell').data().cell;\n",
       "      cell.output_area.append_execute_result(NB_LOAD_WARNING)\n",
       "    }\n",
       "\n",
       "  }\n",
       "\n",
       "  if (root._bokeh_is_loading === 0) {\n",
       "    console.log(\"Bokeh: BokehJS loaded, going straight to plotting\");\n",
       "    run_inline_js();\n",
       "  } else {\n",
       "    load_libs(js_urls, function() {\n",
       "      console.log(\"Bokeh: BokehJS plotting callback run at\", now());\n",
       "      run_inline_js();\n",
       "    });\n",
       "  }\n",
       "}(window));"
      ],
      "application/vnd.bokehjs_load.v0+json": "\n(function(root) {\n  function now() {\n    return new Date();\n  }\n\n  var force = true;\n\n  if (typeof (root._bokeh_onload_callbacks) === \"undefined\" || force === true) {\n    root._bokeh_onload_callbacks = [];\n    root._bokeh_is_loading = undefined;\n  }\n\n  \n\n  \n  if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n    root._bokeh_timeout = Date.now() + 5000;\n    root._bokeh_failed_load = false;\n  }\n\n  var NB_LOAD_WARNING = {'data': {'text/html':\n     \"<div style='background-color: #fdd'>\\n\"+\n     \"<p>\\n\"+\n     \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n     \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n     \"</p>\\n\"+\n     \"<ul>\\n\"+\n     \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n     \"<li>use INLINE resources instead, as so:</li>\\n\"+\n     \"</ul>\\n\"+\n     \"<code>\\n\"+\n     \"from bokeh.resources import INLINE\\n\"+\n     \"output_notebook(resources=INLINE)\\n\"+\n     \"</code>\\n\"+\n     \"</div>\"}};\n\n  function display_loaded() {\n    var el = document.getElementById(\"7a12b7ae-4af1-44c6-984c-7efc52a689eb\");\n    if (el != null) {\n      el.textContent = \"BokehJS is loading...\";\n    }\n    if (root.Bokeh !== undefined) {\n      if (el != null) {\n        el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n      }\n    } else if (Date.now() < root._bokeh_timeout) {\n      setTimeout(display_loaded, 100)\n    }\n  }\n\n\n  function run_callbacks() {\n    try {\n      root._bokeh_onload_callbacks.forEach(function(callback) { callback() });\n    }\n    finally {\n      delete root._bokeh_onload_callbacks\n    }\n    console.info(\"Bokeh: all callbacks have finished\");\n  }\n\n  function load_libs(js_urls, callback) {\n    root._bokeh_onload_callbacks.push(callback);\n    if (root._bokeh_is_loading > 0) {\n      console.log(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n      return null;\n    }\n    if (js_urls == null || js_urls.length === 0) {\n      run_callbacks();\n      return null;\n    }\n    console.log(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n    root._bokeh_is_loading = js_urls.length;\n    for (var i = 0; i < js_urls.length; i++) {\n      var url = js_urls[i];\n      var s = document.createElement('script');\n      s.src = url;\n      s.async = false;\n      s.onreadystatechange = s.onload = function() {\n        root._bokeh_is_loading--;\n        if (root._bokeh_is_loading === 0) {\n          console.log(\"Bokeh: all BokehJS libraries loaded\");\n          run_callbacks()\n        }\n      };\n      s.onerror = function() {\n        console.warn(\"failed to load library \" + url);\n      };\n      console.log(\"Bokeh: injecting script tag for BokehJS library: \", url);\n      document.getElementsByTagName(\"head\")[0].appendChild(s);\n    }\n  };var element = document.getElementById(\"7a12b7ae-4af1-44c6-984c-7efc52a689eb\");\n  if (element == null) {\n    console.log(\"Bokeh: ERROR: autoload.js configured with elementid '7a12b7ae-4af1-44c6-984c-7efc52a689eb' but no matching script tag was found. \")\n    return false;\n  }\n\n  var js_urls = [\"https://cdn.pydata.org/bokeh/release/bokeh-0.13.0.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.13.0.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-tables-0.13.0.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-gl-0.13.0.min.js\"];\n\n  var inline_js = [\n    function(Bokeh) {\n      Bokeh.set_log_level(\"info\");\n    },\n    \n    function(Bokeh) {\n      \n    },\n    function(Bokeh) {\n      console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-0.13.0.min.css\");\n      Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-0.13.0.min.css\");\n      console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.13.0.min.css\");\n      Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.13.0.min.css\");\n      console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-tables-0.13.0.min.css\");\n      Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-tables-0.13.0.min.css\");\n    }\n  ];\n\n  function run_inline_js() {\n    \n    if ((root.Bokeh !== undefined) || (force === true)) {\n      for (var i = 0; i < inline_js.length; i++) {\n        inline_js[i].call(root, root.Bokeh);\n      }if (force === true) {\n        display_loaded();\n      }} else if (Date.now() < root._bokeh_timeout) {\n      setTimeout(run_inline_js, 100);\n    } else if (!root._bokeh_failed_load) {\n      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n      root._bokeh_failed_load = true;\n    } else if (force !== true) {\n      var cell = $(document.getElementById(\"7a12b7ae-4af1-44c6-984c-7efc52a689eb\")).parents('.cell').data().cell;\n      cell.output_area.append_execute_result(NB_LOAD_WARNING)\n    }\n\n  }\n\n  if (root._bokeh_is_loading === 0) {\n    console.log(\"Bokeh: BokehJS loaded, going straight to plotting\");\n    run_inline_js();\n  } else {\n    load_libs(js_urls, function() {\n      console.log(\"Bokeh: BokehJS plotting callback run at\", now());\n      run_inline_js();\n    });\n  }\n}(window));"
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import os\n",
    "\n",
    "from bokeh.plotting import (figure, show,\n",
    "                            output_notebook)\n",
    "from bokeh.models import ColumnDataSource, Range1d\n",
    "from bokeh.resources import CDN\n",
    "from bokeh.embed import components\n",
    "\n",
    "from IPython.display import HTML\n",
    "output_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Main requirements (installed libraries):"
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "# %load requirements.txt\n",
    "bokeh=1.0.4\n",
    "python>3.5\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### + One local module, utils:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "import utils #local module\n",
    "\n",
    "# Check notebook environment:\n",
    "lab = utils.is_lab_notebook()\n",
    "if lab:\n",
    "    from IPython.display import Markdown\n",
    "    \n",
    "utils.check_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "---\n",
    "# Example for obtaining a Bokeh output within a `jinja` template"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Plot to embed:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "  <div class=\"bk-root\" id=\"40d0f8ab-0111-4454-a5ab-afd13ab03128\"></div>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "(function(root) {\n",
       "  function embed_document(root) {\n",
       "    \n",
       "  var docs_json = {\"13965074-827b-4c98-ab30-28b4264b6105\":{\"roots\":{\"references\":[{\"attributes\":{\"callback\":null,\"data\":{\"x\":[1,2,3,4,5,-3],\"y\":[1,0,3,0,5,-1]},\"selected\":{\"id\":\"2a600b94-6dd2-4994-8264-397086459864\",\"type\":\"Selection\"},\"selection_policy\":{\"id\":\"de44fb57-0904-492a-941c-7bf10f2d19d6\",\"type\":\"UnionRenderers\"}},\"id\":\"f77ba568-9db7-4cf9-946f-85d66ac5345e\",\"type\":\"ColumnDataSource\"},{\"attributes\":{},\"id\":\"f5b2ef9d-bb58-48bf-9ec0-cfaa0042db52\",\"type\":\"LinearScale\"},{\"attributes\":{},\"id\":\"438e4c99-c46f-41df-892c-4e3808af271b\",\"type\":\"LinearScale\"},{\"attributes\":{\"callback\":null,\"renderers\":\"auto\"},\"id\":\"a7f232d1-d4ee-4408-a2b2-4c90d06f9dfa\",\"type\":\"HoverTool\"},{\"attributes\":{},\"id\":\"de44fb57-0904-492a-941c-7bf10f2d19d6\",\"type\":\"UnionRenderers\"},{\"attributes\":{\"formatter\":{\"id\":\"24b46190-a65b-4c9c-b077-0742a160d05e\",\"type\":\"BasicTickFormatter\"},\"plot\":{\"id\":\"af71ee58-4c01-4610-85b5-0eb5cf8b0f37\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"4bb4fe61-3e42-4520-a74a-115dae16446e\",\"type\":\"BasicTicker\"}},\"id\":\"cbcb1077-17c2-4b6c-bb11-c2b5bf43c391\",\"type\":\"LinearAxis\"},{\"attributes\":{},\"id\":\"a8ab9b0d-44f9-4bb9-a99b-329668987b2d\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{},\"id\":\"4bb4fe61-3e42-4520-a74a-115dae16446e\",\"type\":\"BasicTicker\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"#1f77b4\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"#1f77b4\"},\"size\":{\"units\":\"screen\",\"value\":10},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"8e3baf55-fd88-4ba0-b8ac-c93401a4f8e8\",\"type\":\"Circle\"},{\"attributes\":{},\"id\":\"24b46190-a65b-4c9c-b077-0742a160d05e\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"plot\":{\"id\":\"af71ee58-4c01-4610-85b5-0eb5cf8b0f37\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"4bb4fe61-3e42-4520-a74a-115dae16446e\",\"type\":\"BasicTicker\"}},\"id\":\"bf4135e5-2eff-4753-a330-93ded4cc79cb\",\"type\":\"Grid\"},{\"attributes\":{},\"id\":\"2a600b94-6dd2-4994-8264-397086459864\",\"type\":\"Selection\"},{\"attributes\":{\"formatter\":{\"id\":\"a8ab9b0d-44f9-4bb9-a99b-329668987b2d\",\"type\":\"BasicTickFormatter\"},\"plot\":{\"id\":\"af71ee58-4c01-4610-85b5-0eb5cf8b0f37\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"1009af49-30c1-4530-b255-27ae60bd5b4e\",\"type\":\"BasicTicker\"}},\"id\":\"0e67e750-b118-47b1-a3ff-da30060ad588\",\"type\":\"LinearAxis\"},{\"attributes\":{},\"id\":\"1009af49-30c1-4530-b255-27ae60bd5b4e\",\"type\":\"BasicTicker\"},{\"attributes\":{\"source\":{\"id\":\"f77ba568-9db7-4cf9-946f-85d66ac5345e\",\"type\":\"ColumnDataSource\"}},\"id\":\"1ec9503d-37e0-45ae-965c-02fbcd905ce9\",\"type\":\"CDSView\"},{\"attributes\":{\"dimension\":1,\"plot\":{\"id\":\"af71ee58-4c01-4610-85b5-0eb5cf8b0f37\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"1009af49-30c1-4530-b255-27ae60bd5b4e\",\"type\":\"BasicTicker\"}},\"id\":\"cfbd4b75-2106-4314-b1e0-bdebf4f90980\",\"type\":\"Grid\"},{\"attributes\":{\"callback\":null,\"end\":6,\"start\":-4},\"id\":\"62679582-975f-4252-80e6-d130c19abfde\",\"type\":\"Range1d\"},{\"attributes\":{\"plot\":null,\"text\":\"\"},\"id\":\"16f8b4d0-4a13-4dc8-bd36-55e538eea831\",\"type\":\"Title\"},{\"attributes\":{\"data_source\":{\"id\":\"f77ba568-9db7-4cf9-946f-85d66ac5345e\",\"type\":\"ColumnDataSource\"},\"glyph\":{\"id\":\"50f9b72c-0a62-4904-b273-65023fc37de3\",\"type\":\"Circle\"},\"hover_glyph\":{\"id\":\"ae6e380e-7680-4f4b-8bc5-535004af0d84\",\"type\":\"Circle\"},\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"8e3baf55-fd88-4ba0-b8ac-c93401a4f8e8\",\"type\":\"Circle\"},\"selection_glyph\":null,\"view\":{\"id\":\"1ec9503d-37e0-45ae-965c-02fbcd905ce9\",\"type\":\"CDSView\"}},\"id\":\"8688d82c-e134-42cb-9593-611757032ade\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"fill_color\":{\"value\":\"#1f77b4\"},\"line_color\":{\"value\":\"#1f77b4\"},\"size\":{\"units\":\"screen\",\"value\":10},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"50f9b72c-0a62-4904-b273-65023fc37de3\",\"type\":\"Circle\"},{\"attributes\":{\"below\":[{\"id\":\"cbcb1077-17c2-4b6c-bb11-c2b5bf43c391\",\"type\":\"LinearAxis\"}],\"left\":[{\"id\":\"0e67e750-b118-47b1-a3ff-da30060ad588\",\"type\":\"LinearAxis\"}],\"plot_height\":250,\"plot_width\":250,\"renderers\":[{\"id\":\"cbcb1077-17c2-4b6c-bb11-c2b5bf43c391\",\"type\":\"LinearAxis\"},{\"id\":\"bf4135e5-2eff-4753-a330-93ded4cc79cb\",\"type\":\"Grid\"},{\"id\":\"0e67e750-b118-47b1-a3ff-da30060ad588\",\"type\":\"LinearAxis\"},{\"id\":\"cfbd4b75-2106-4314-b1e0-bdebf4f90980\",\"type\":\"Grid\"},{\"id\":\"8688d82c-e134-42cb-9593-611757032ade\",\"type\":\"GlyphRenderer\"}],\"title\":{\"id\":\"16f8b4d0-4a13-4dc8-bd36-55e538eea831\",\"type\":\"Title\"},\"toolbar\":{\"id\":\"932bf297-16a3-4d7e-b2e5-ed5d288a2012\",\"type\":\"Toolbar\"},\"x_range\":{\"id\":\"8ae12e59-445f-45ec-9ab0-5cb5464e718c\",\"type\":\"Range1d\"},\"x_scale\":{\"id\":\"f5b2ef9d-bb58-48bf-9ec0-cfaa0042db52\",\"type\":\"LinearScale\"},\"y_range\":{\"id\":\"62679582-975f-4252-80e6-d130c19abfde\",\"type\":\"Range1d\"},\"y_scale\":{\"id\":\"438e4c99-c46f-41df-892c-4e3808af271b\",\"type\":\"LinearScale\"}},\"id\":\"af71ee58-4c01-4610-85b5-0eb5cf8b0f37\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{\"callback\":null,\"end\":6,\"start\":-4},\"id\":\"8ae12e59-445f-45ec-9ab0-5cb5464e718c\",\"type\":\"Range1d\"},{\"attributes\":{\"active_drag\":\"auto\",\"active_inspect\":\"auto\",\"active_multi\":null,\"active_scroll\":\"auto\",\"active_tap\":\"auto\",\"tools\":[{\"id\":\"a7f232d1-d4ee-4408-a2b2-4c90d06f9dfa\",\"type\":\"HoverTool\"}]},\"id\":\"932bf297-16a3-4d7e-b2e5-ed5d288a2012\",\"type\":\"Toolbar\"},{\"attributes\":{\"fill_color\":{\"value\":\"orange\"},\"line_color\":{\"value\":\"orange\"},\"size\":{\"units\":\"screen\",\"value\":10},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"ae6e380e-7680-4f4b-8bc5-535004af0d84\",\"type\":\"Circle\"}],\"root_ids\":[\"af71ee58-4c01-4610-85b5-0eb5cf8b0f37\"]},\"title\":\"Bokeh Application\",\"version\":\"0.13.0\"}};\n",
       "  var render_items = [{\"docid\":\"13965074-827b-4c98-ab30-28b4264b6105\",\"roots\":{\"af71ee58-4c01-4610-85b5-0eb5cf8b0f37\":\"40d0f8ab-0111-4454-a5ab-afd13ab03128\"}}];\n",
       "  root.Bokeh.embed.embed_items_notebook(docs_json, render_items);\n",
       "\n",
       "  }\n",
       "  if (root.Bokeh !== undefined) {\n",
       "    embed_document(root);\n",
       "  } else {\n",
       "    var attempts = 0;\n",
       "    var timer = setInterval(function(root) {\n",
       "      if (root.Bokeh !== undefined) {\n",
       "        embed_document(root);\n",
       "        clearInterval(timer);\n",
       "      }\n",
       "      attempts++;\n",
       "      if (attempts > 100) {\n",
       "        console.log(\"Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing\")\n",
       "        clearInterval(timer);\n",
       "      }\n",
       "    }, 10, root)\n",
       "  }\n",
       "})(window);"
      ],
      "application/vnd.bokehjs_exec.v0+json": ""
     },
     "metadata": {
      "application/vnd.bokehjs_exec.v0+json": {
       "id": "af71ee58-4c01-4610-85b5-0eb5cf8b0f37"
      }
     },
     "output_type": "display_data"
    }
   ],
   "source": [
    "p1 = figure(plot_width=250, plot_height=250,tools='hover')\n",
    "\n",
    "p1.x_range= Range1d(-4,6)\n",
    "p1.y_range= Range1d(-4,6)\n",
    "\n",
    "source = ColumnDataSource(data=dict(x=[1, 2, 3, 4, 5, -3],\n",
    "                                    y=[1, 0, 3, 0, 5, -1]))\n",
    "\n",
    "m1 = p1.circle(x=\"x\", y=\"y\",\n",
    "               size=10,\n",
    "               hover_color=\"orange\",\n",
    "               source=source)\n",
    "\n",
    "show(p1)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "# capture the script and plot specs (div);\n",
    "# these are the components to embed:\n",
    "script, div = components(p1)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Template file:\n",
    "### The template, `bokeh_embed.html`, is setup for creating the cdn resources for both css and js script."
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "# %load ./irises/templates/bokeh_embed.html\n",
    "<!DOCTYPE html>\n",
    "<html lang=\"en\">\n",
    "<!--\n",
    "    Variables to pass:\n",
    "    CDN_CSS        #: list of comps css\n",
    "    CDN_JS         #: list of comps js\n",
    "    COMPON_SCRIPT  #::script from components(plot)\n",
    "    PAGE_TITLE\n",
    "    H1_TITLE\n",
    "    COMPON_DIV     #::div from components(plot)\n",
    "    \n",
    "<author catchenal@gmail.com>    \n",
    "-->\n",
    "<head>\n",
    "    <meta charset=\"utf-8\">\n",
    "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n",
    "    \n",
    "    {% for cdnCSS in CDN_CSS %}\n",
    "        <link href=\"{{ cdnCSS }}\"\n",
    "              rel=\"stylesheet\" type=\"text/css\" />\n",
    "    {% endfor %}\n",
    "    \n",
    "    {% for cdnJS in CDN_JS %}\n",
    "        <script src=\"{{ cdnJS }}\"></script>\n",
    "    {% endfor %}\n",
    "    \n",
    "    <!-- INSERT SCRIPT HERE -->\n",
    "    {{ COMPON_SCRIPT }}\n",
    "    \n",
    "    <title>{{ PAGE_TITLE }}</title>\n",
    "\n",
    "</head>\n",
    "    \n",
    "<body>\n",
    "\n",
    "    <h1> {{ H1_TITLE }} </h1>\n",
    "    <p> Below is what the div input creates: </p>\n",
    "       \n",
    "    <!-- INSERT DIVS HERE -->\n",
    "    {{ COMPON_DIV }}\n",
    "\n",
    "</body>\n",
    "</html>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "\n",
    "\n",
    "## We can choose which components to include (uing the appropriate `block` in the template), depending on the models we use.  \n",
    "### The advantage of using `bokeh.resources.CDN`: the version in use in included."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`CDN.css_components`\n",
    "```\n",
    "['bokeh', 'bokeh-widgets', 'bokeh-tables']\n",
    "```\n",
    "\n",
    "`CDN.css_files`\n",
    "```\n",
    "['https://cdn.pydata.org/bokeh/release/bokeh-1.0.4.min.css',\n",
    " 'https://cdn.pydata.org/bokeh/release/bokeh-widgets-1.0.4.min.css',\n",
    " 'https://cdn.pydata.org/bokeh/release/bokeh-tables-1.0.4.min.css']\n",
    "```\n",
    "\n",
    "`CDN.js_components`\n",
    "```\n",
    "['bokeh', 'bokeh-widgets', 'bokeh-tables', 'bokeh-gl']\n",
    "```\n",
    "`CDN.js_files`\n",
    "```\n",
    "['https://cdn.pydata.org/bokeh/release/bokeh-1.0.4.min.js',\n",
    " 'https://cdn.pydata.org/bokeh/release/bokeh-widgets-1.0.4.min.js',\n",
    " 'https://cdn.pydata.org/bokeh/release/bokeh-tables-1.0.4.min.js',\n",
    " 'https://cdn.pydata.org/bokeh/release/bokeh-gl-1.0.4.min.js']\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Identify the file locations:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [],
   "source": [
    "base_dir = os.path.join(os.path.abspath(os.curdir), 'irises')\n",
    "tpl_dir = os.path.join(base_dir, 'templates')\n",
    "tpl_embed = os.path.join(tpl_dir, 'bokeh_embed.html')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Let's put the cdn resources together in one dict for each type:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "['https://cdn.pydata.org/bokeh/release/bokeh-0.13.0.min.css',\n",
       " 'https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.13.0.min.css']"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "CDN_CSS_d = dict(zip(CDN.css_components, CDN.css_files))\n",
    "#print(CDN_CSS_d.keys())\n",
    "\n",
    "CDN_JS_d = dict(zip(CDN.js_components, CDN.js_files))\n",
    "#print(CDN_JS_d.keys())\n",
    "\n",
    "# template placeholders:\n",
    "# ['CDN_CSS','CDN_JS','COMPON_SCRIPT','PAGE_TITLE','H1_TITLE','COMPON_DIV']\n",
    "\n",
    "vars = dict()\n",
    "vars['CDN_CSS'] = [CDN_CSS_d['bokeh'], CDN_CSS_d['bokeh-widgets']]\n",
    "vars['CDN_JS'] = [CDN_JS_d['bokeh'], CDN_JS_d['bokeh-widgets'], CDN_JS_d['bokeh-gl']]\n",
    "vars['COMPON_SCRIPT'] = script\n",
    "vars['PAGE_TITLE'] = \"Embedded Bokeh Exqmple\"\n",
    "vars['H1_TITLE'] = \"Bokeh from template Exqmple\"\n",
    "vars['COMPON_DIV'] = div\n",
    "\n",
    "#example:\n",
    "vars['CDN_CSS']"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Use `jinja2` to load, then render the template:\n",
    "\n",
    "**Note**: `Environment` with `FileSystemLoader` needed; see utils.get_html_tpl."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!DOCTYPE html>\n",
       "<html lang=\"en\">\n",
       "<!--\n",
       "    Variables to pass:\n",
       "    CDN_CSS        #: list of comps css\n",
       "    CDN_JS         #: list of comps js\n",
       "    COMPON_SCRIPT  #::script from components(plot)\n",
       "    PAGE_TITLE\n",
       "    H1_TITLE\n",
       "    COMPON_DIV     #::div from components(plot)\n",
       "    \n",
       "<author catchenal@gmail.com>    \n",
       "-->\n",
       "<head>\n",
       "    <meta charset=\"utf-8\">\n",
       "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n",
       "    \n",
       "            <link href=\"https://cdn.pydata.org/bokeh/release/bokeh-0.13.0.min.css\"\n",
       "              rel=\"stylesheet\" type=\"text/css\" />\n",
       "            <link href=\"https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.13.0.min.css\"\n",
       "              rel=\"stylesheet\" type=\"text/css\" />\n",
       "        \n",
       "            <script src=\"https://cdn.pydata.org/bokeh/release/bokeh-0.13.0.min.js\"></script>\n",
       "            <script src=\"https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.13.0.min.js\"></script>\n",
       "            <script src=\"https://cdn.pydata.org/bokeh/release/bokeh-gl-0.13.0.min.js\"></script>\n",
       "        \n",
       "    <!-- INSERT SCRIPT HERE -->\n",
       "    \n",
       "<script type=\"text/javascript\">\n",
       "  (function() {\n",
       "    var fn = function() {\n",
       "      Bokeh.safely(function() {\n",
       "        (function(root) {\n",
       "          function embed_document(root) {\n",
       "            \n",
       "          var docs_json = '{\"0705a888-11c2-4636-8d74-90ccb4f29bcf\":{\"roots\":{\"references\":[{\"attributes\":{\"callback\":null,\"data\":{\"x\":[1,2,3,4,5,-3],\"y\":[1,0,3,0,5,-1]},\"selected\":{\"id\":\"2a600b94-6dd2-4994-8264-397086459864\",\"type\":\"Selection\"},\"selection_policy\":{\"id\":\"de44fb57-0904-492a-941c-7bf10f2d19d6\",\"type\":\"UnionRenderers\"}},\"id\":\"f77ba568-9db7-4cf9-946f-85d66ac5345e\",\"type\":\"ColumnDataSource\"},{\"attributes\":{},\"id\":\"f5b2ef9d-bb58-48bf-9ec0-cfaa0042db52\",\"type\":\"LinearScale\"},{\"attributes\":{},\"id\":\"438e4c99-c46f-41df-892c-4e3808af271b\",\"type\":\"LinearScale\"},{\"attributes\":{\"callback\":null,\"renderers\":\"auto\"},\"id\":\"a7f232d1-d4ee-4408-a2b2-4c90d06f9dfa\",\"type\":\"HoverTool\"},{\"attributes\":{},\"id\":\"de44fb57-0904-492a-941c-7bf10f2d19d6\",\"type\":\"UnionRenderers\"},{\"attributes\":{\"formatter\":{\"id\":\"24b46190-a65b-4c9c-b077-0742a160d05e\",\"type\":\"BasicTickFormatter\"},\"plot\":{\"id\":\"af71ee58-4c01-4610-85b5-0eb5cf8b0f37\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"4bb4fe61-3e42-4520-a74a-115dae16446e\",\"type\":\"BasicTicker\"}},\"id\":\"cbcb1077-17c2-4b6c-bb11-c2b5bf43c391\",\"type\":\"LinearAxis\"},{\"attributes\":{},\"id\":\"a8ab9b0d-44f9-4bb9-a99b-329668987b2d\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{},\"id\":\"4bb4fe61-3e42-4520-a74a-115dae16446e\",\"type\":\"BasicTicker\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"#1f77b4\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"#1f77b4\"},\"size\":{\"units\":\"screen\",\"value\":10},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"8e3baf55-fd88-4ba0-b8ac-c93401a4f8e8\",\"type\":\"Circle\"},{\"attributes\":{},\"id\":\"24b46190-a65b-4c9c-b077-0742a160d05e\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"plot\":{\"id\":\"af71ee58-4c01-4610-85b5-0eb5cf8b0f37\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"4bb4fe61-3e42-4520-a74a-115dae16446e\",\"type\":\"BasicTicker\"}},\"id\":\"bf4135e5-2eff-4753-a330-93ded4cc79cb\",\"type\":\"Grid\"},{\"attributes\":{},\"id\":\"2a600b94-6dd2-4994-8264-397086459864\",\"type\":\"Selection\"},{\"attributes\":{\"formatter\":{\"id\":\"a8ab9b0d-44f9-4bb9-a99b-329668987b2d\",\"type\":\"BasicTickFormatter\"},\"plot\":{\"id\":\"af71ee58-4c01-4610-85b5-0eb5cf8b0f37\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"1009af49-30c1-4530-b255-27ae60bd5b4e\",\"type\":\"BasicTicker\"}},\"id\":\"0e67e750-b118-47b1-a3ff-da30060ad588\",\"type\":\"LinearAxis\"},{\"attributes\":{},\"id\":\"1009af49-30c1-4530-b255-27ae60bd5b4e\",\"type\":\"BasicTicker\"},{\"attributes\":{\"source\":{\"id\":\"f77ba568-9db7-4cf9-946f-85d66ac5345e\",\"type\":\"ColumnDataSource\"}},\"id\":\"1ec9503d-37e0-45ae-965c-02fbcd905ce9\",\"type\":\"CDSView\"},{\"attributes\":{\"dimension\":1,\"plot\":{\"id\":\"af71ee58-4c01-4610-85b5-0eb5cf8b0f37\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"1009af49-30c1-4530-b255-27ae60bd5b4e\",\"type\":\"BasicTicker\"}},\"id\":\"cfbd4b75-2106-4314-b1e0-bdebf4f90980\",\"type\":\"Grid\"},{\"attributes\":{\"callback\":null,\"end\":6,\"start\":-4},\"id\":\"62679582-975f-4252-80e6-d130c19abfde\",\"type\":\"Range1d\"},{\"attributes\":{\"plot\":null,\"text\":\"\"},\"id\":\"16f8b4d0-4a13-4dc8-bd36-55e538eea831\",\"type\":\"Title\"},{\"attributes\":{\"data_source\":{\"id\":\"f77ba568-9db7-4cf9-946f-85d66ac5345e\",\"type\":\"ColumnDataSource\"},\"glyph\":{\"id\":\"50f9b72c-0a62-4904-b273-65023fc37de3\",\"type\":\"Circle\"},\"hover_glyph\":{\"id\":\"ae6e380e-7680-4f4b-8bc5-535004af0d84\",\"type\":\"Circle\"},\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"8e3baf55-fd88-4ba0-b8ac-c93401a4f8e8\",\"type\":\"Circle\"},\"selection_glyph\":null,\"view\":{\"id\":\"1ec9503d-37e0-45ae-965c-02fbcd905ce9\",\"type\":\"CDSView\"}},\"id\":\"8688d82c-e134-42cb-9593-611757032ade\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"fill_color\":{\"value\":\"#1f77b4\"},\"line_color\":{\"value\":\"#1f77b4\"},\"size\":{\"units\":\"screen\",\"value\":10},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"50f9b72c-0a62-4904-b273-65023fc37de3\",\"type\":\"Circle\"},{\"attributes\":{\"below\":[{\"id\":\"cbcb1077-17c2-4b6c-bb11-c2b5bf43c391\",\"type\":\"LinearAxis\"}],\"left\":[{\"id\":\"0e67e750-b118-47b1-a3ff-da30060ad588\",\"type\":\"LinearAxis\"}],\"plot_height\":250,\"plot_width\":250,\"renderers\":[{\"id\":\"cbcb1077-17c2-4b6c-bb11-c2b5bf43c391\",\"type\":\"LinearAxis\"},{\"id\":\"bf4135e5-2eff-4753-a330-93ded4cc79cb\",\"type\":\"Grid\"},{\"id\":\"0e67e750-b118-47b1-a3ff-da30060ad588\",\"type\":\"LinearAxis\"},{\"id\":\"cfbd4b75-2106-4314-b1e0-bdebf4f90980\",\"type\":\"Grid\"},{\"id\":\"8688d82c-e134-42cb-9593-611757032ade\",\"type\":\"GlyphRenderer\"}],\"title\":{\"id\":\"16f8b4d0-4a13-4dc8-bd36-55e538eea831\",\"type\":\"Title\"},\"toolbar\":{\"id\":\"932bf297-16a3-4d7e-b2e5-ed5d288a2012\",\"type\":\"Toolbar\"},\"x_range\":{\"id\":\"8ae12e59-445f-45ec-9ab0-5cb5464e718c\",\"type\":\"Range1d\"},\"x_scale\":{\"id\":\"f5b2ef9d-bb58-48bf-9ec0-cfaa0042db52\",\"type\":\"LinearScale\"},\"y_range\":{\"id\":\"62679582-975f-4252-80e6-d130c19abfde\",\"type\":\"Range1d\"},\"y_scale\":{\"id\":\"438e4c99-c46f-41df-892c-4e3808af271b\",\"type\":\"LinearScale\"}},\"id\":\"af71ee58-4c01-4610-85b5-0eb5cf8b0f37\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{\"callback\":null,\"end\":6,\"start\":-4},\"id\":\"8ae12e59-445f-45ec-9ab0-5cb5464e718c\",\"type\":\"Range1d\"},{\"attributes\":{\"active_drag\":\"auto\",\"active_inspect\":\"auto\",\"active_multi\":null,\"active_scroll\":\"auto\",\"active_tap\":\"auto\",\"tools\":[{\"id\":\"a7f232d1-d4ee-4408-a2b2-4c90d06f9dfa\",\"type\":\"HoverTool\"}]},\"id\":\"932bf297-16a3-4d7e-b2e5-ed5d288a2012\",\"type\":\"Toolbar\"},{\"attributes\":{\"fill_color\":{\"value\":\"orange\"},\"line_color\":{\"value\":\"orange\"},\"size\":{\"units\":\"screen\",\"value\":10},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"ae6e380e-7680-4f4b-8bc5-535004af0d84\",\"type\":\"Circle\"}],\"root_ids\":[\"af71ee58-4c01-4610-85b5-0eb5cf8b0f37\"]},\"title\":\"Bokeh Application\",\"version\":\"0.13.0\"}}';\n",
       "          var render_items = [{\"docid\":\"0705a888-11c2-4636-8d74-90ccb4f29bcf\",\"roots\":{\"af71ee58-4c01-4610-85b5-0eb5cf8b0f37\":\"fed16164-2a0d-4b40-9538-224fc1e14f8c\"}}];\n",
       "          root.Bokeh.embed.embed_items(docs_json, render_items);\n",
       "        \n",
       "          }\n",
       "          if (root.Bokeh !== undefined) {\n",
       "            embed_document(root);\n",
       "          } else {\n",
       "            var attempts = 0;\n",
       "            var timer = setInterval(function(root) {\n",
       "              if (root.Bokeh !== undefined) {\n",
       "                embed_document(root);\n",
       "                clearInterval(timer);\n",
       "              }\n",
       "              attempts++;\n",
       "              if (attempts > 100) {\n",
       "                console.log(\"Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing\")\n",
       "                clearInterval(timer);\n",
       "              }\n",
       "            }, 10, root)\n",
       "          }\n",
       "        })(window);\n",
       "      });\n",
       "    };\n",
       "    if (document.readyState != \"loading\") fn();\n",
       "    else document.addEventListener(\"DOMContentLoaded\", fn);\n",
       "  })();\n",
       "</script>\n",
       "    \n",
       "    <title>Bokeh from template Exqmple</title>\n",
       "\n",
       "</head>\n",
       "    \n",
       "<body>\n",
       "\n",
       "    <h1> Title H1: Hello world, here's Bokeh! </h1>\n",
       "    <p> Below is what the div input creates: </p>\n",
       "       \n",
       "    <!-- INSERT DIVS HERE -->\n",
       "    \n",
       "<div class=\"bk-root\" id=\"fed16164-2a0d-4b40-9538-224fc1e14f8c\"></div>\n",
       "\n",
       "</body>\n",
       "</html>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "html_tpl = utils.get_html_tpl(tpl_embed)\n",
    "\n",
    "# render the template with all the variables:\n",
    "\n",
    "HTML(html_tpl.render(CDN_CSS=[CDN_CSS_d['bokeh'],\n",
    "                              CDN_CSS_d['bokeh-widgets']\n",
    "                             ],\n",
    "                     CDN_JS=[CDN_JS_d['bokeh'],\n",
    "                             CDN_JS_d['bokeh-widgets'],\n",
    "                             CDN_JS_d['bokeh-gl']\n",
    "                            ],\n",
    "                     COMPON_SCRIPT=script,\n",
    "                     PAGE_TITLE=\"Bokeh from template Exqmple\",\n",
    "                     H1_TITLE=\"Title H1: Hello world, here's Bokeh!\",\n",
    "                     COMPON_DIV=div\n",
    "                    )\n",
    "    )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# END Embed example\n",
    "---\n",
    "---"
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "# Example using data filtering with CDSView\n",
    "\n",
    "from bokeh.layouts import gridplot\n",
    "from bokeh.models import ColumnDataSource, CDSView, IndexFilter\n",
    "from bokeh.plotting import figure, show\n",
    "\n",
    "tools = [\"box_select\", \"hover\", \"reset\"]\n",
    "p = figure(plot_height=300, plot_width=300, tools=tools,\n",
    "          title=\"All\")\n",
    "\n",
    "source = ColumnDataSource(data=dict(x=[1, 2, 3, 4, 5, -3],\n",
    "                                    y=[1, 0, 3, 0, 5, -1]))\n",
    "p.circle(x=\"x\", y=\"y\", size=10, hover_color=\"orange\",\n",
    "         source=source)\n",
    "\n",
    "booleans = [True if y_val > 1 else False for y_val in source.data['y']]\n",
    "\n",
    "view = CDSView(source=source, filters=[IndexFilter([3,4])])\n",
    "p_filtered = figure(plot_height=300, plot_width=300, tools=tools,\n",
    "                   title=\"View Filtered\")\n",
    "p_filtered.circle(x=\"x\", y=\"y\", size=10, hover_color=\"red\",\n",
    "                  source=source, view=view)\n",
    "\n",
    "show(gridplot([[p, p_filtered]]))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "<a id='footer'></a>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### *Caveat Codor*:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "utils.caveat_codor()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Requirements:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# %load requirements.txt\n",
    "bokeh=1.0.4\n",
    "python>3.5\n"
   ]
  }
 ],
 "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.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}