{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Mixing ipyvolume with Bokeh\n",
    "This example shows how the selection from a ipyvolume quiver plot can be controlled with a bokeh scatter plot and it's selection tools."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Ipyvolume quiver plot\n",
    "The 3d quiver plot is done using ipyvolume"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "import ipyvolume\n",
    "import ipyvolume as ipv\n",
    "import vaex"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We load some data from vaex, but only use the first 10 000 samples for performance reasons of Bokeh."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "ds = vaex.example()\n",
    "N = 10000"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We make a quiver plot using ipyvolume's matplotlib's style api."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "39500cb0de6b4d3a9dce8709973cc26c",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "A Jupyter Widget"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "ipv.figure()\n",
    "quiver = ipv.quiver(ds.data.x[:N],  ds.data.y[:N],  ds.data.z[:N],\n",
    "                    ds.data.vx[:N], ds.data.vy[:N], ds.data.vz[:N],\n",
    "                    size=1, size_selected=5, color_selected=\"grey\")\n",
    "ipv.xyzlim(-30, 30)\n",
    "ipv.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Bokeh scatter part\n",
    "The 2d scatter plot is done using Bokeh."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "    <div class=\"bk-root\">\n",
       "        <a href=\"http://bokeh.pydata.org\" target=\"_blank\" class=\"bk-logo bk-logo-small bk-logo-notebook\"></a>\n",
       "        <span id=\"1a9e0d35-1003-482a-939e-38da3946c79b\">Loading BokehJS ...</span>\n",
       "    </div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "(function(global) {\n",
       "  function now() {\n",
       "    return new Date();\n",
       "  }\n",
       "\n",
       "  var force = true;\n",
       "\n",
       "  if (typeof (window._bokeh_onload_callbacks) === \"undefined\" || force === true) {\n",
       "    window._bokeh_onload_callbacks = [];\n",
       "    window._bokeh_is_loading = undefined;\n",
       "  }\n",
       "\n",
       "\n",
       "  \n",
       "  if (typeof (window._bokeh_timeout) === \"undefined\" || force === true) {\n",
       "    window._bokeh_timeout = Date.now() + 5000;\n",
       "    window._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",
       "    if (window.Bokeh !== undefined) {\n",
       "      document.getElementById(\"1a9e0d35-1003-482a-939e-38da3946c79b\").textContent = \"BokehJS successfully loaded.\";\n",
       "    } else if (Date.now() < window._bokeh_timeout) {\n",
       "      setTimeout(display_loaded, 100)\n",
       "    }\n",
       "  }\n",
       "\n",
       "  function run_callbacks() {\n",
       "    window._bokeh_onload_callbacks.forEach(function(callback) { callback() });\n",
       "    delete window._bokeh_onload_callbacks\n",
       "    console.info(\"Bokeh: all callbacks have finished\");\n",
       "  }\n",
       "\n",
       "  function load_libs(js_urls, callback) {\n",
       "    window._bokeh_onload_callbacks.push(callback);\n",
       "    if (window._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",
       "    window._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",
       "        window._bokeh_is_loading--;\n",
       "        if (window._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(\"1a9e0d35-1003-482a-939e-38da3946c79b\");\n",
       "  if (element == null) {\n",
       "    console.log(\"Bokeh: ERROR: autoload.js configured with elementid '1a9e0d35-1003-482a-939e-38da3946c79b' but no matching script tag was found. \")\n",
       "    return false;\n",
       "  }\n",
       "\n",
       "  var js_urls = [\"https://cdn.pydata.org/bokeh/release/bokeh-0.12.4.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.4.min.js\"];\n",
       "\n",
       "  var inline_js = [\n",
       "    function(Bokeh) {\n",
       "      Bokeh.set_log_level(\"info\");\n",
       "    },\n",
       "    \n",
       "    function(Bokeh) {\n",
       "      \n",
       "      document.getElementById(\"1a9e0d35-1003-482a-939e-38da3946c79b\").textContent = \"BokehJS is loading...\";\n",
       "    },\n",
       "    function(Bokeh) {\n",
       "      console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-0.12.4.min.css\");\n",
       "      Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-0.12.4.min.css\");\n",
       "      console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.4.min.css\");\n",
       "      Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.4.min.css\");\n",
       "    }\n",
       "  ];\n",
       "\n",
       "  function run_inline_js() {\n",
       "    \n",
       "    if ((window.Bokeh !== undefined) || (force === true)) {\n",
       "      for (var i = 0; i < inline_js.length; i++) {\n",
       "        inline_js[i](window.Bokeh);\n",
       "      }if (force === true) {\n",
       "        display_loaded();\n",
       "      }} else if (Date.now() < window._bokeh_timeout) {\n",
       "      setTimeout(run_inline_js, 100);\n",
       "    } else if (!window._bokeh_failed_load) {\n",
       "      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n",
       "      window._bokeh_failed_load = true;\n",
       "    } else if (force !== true) {\n",
       "      var cell = $(document.getElementById(\"1a9e0d35-1003-482a-939e-38da3946c79b\")).parents('.cell').data().cell;\n",
       "      cell.output_area.append_execute_result(NB_LOAD_WARNING)\n",
       "    }\n",
       "\n",
       "  }\n",
       "\n",
       "  if (window._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",
       "}(this));"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from bokeh.io import output_notebook, show\n",
    "from bokeh.plotting import figure\n",
    "import ipyvolume.bokeh\n",
    "output_notebook()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "scrolled": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "\n",
       "    <div class=\"bk-root\">\n",
       "        <div class=\"bk-plotdiv\" id=\"f8d199b0-6c3b-46ca-a48e-48bd31229280\"></div>\n",
       "    </div>\n",
       "<script type=\"text/javascript\">\n",
       "  \n",
       "  (function(global) {\n",
       "    function now() {\n",
       "      return new Date();\n",
       "    }\n",
       "  \n",
       "    var force = false;\n",
       "  \n",
       "    if (typeof (window._bokeh_onload_callbacks) === \"undefined\" || force === true) {\n",
       "      window._bokeh_onload_callbacks = [];\n",
       "      window._bokeh_is_loading = undefined;\n",
       "    }\n",
       "  \n",
       "  \n",
       "    \n",
       "    if (typeof (window._bokeh_timeout) === \"undefined\" || force === true) {\n",
       "      window._bokeh_timeout = Date.now() + 0;\n",
       "      window._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",
       "      if (window.Bokeh !== undefined) {\n",
       "        document.getElementById(\"f8d199b0-6c3b-46ca-a48e-48bd31229280\").textContent = \"BokehJS successfully loaded.\";\n",
       "      } else if (Date.now() < window._bokeh_timeout) {\n",
       "        setTimeout(display_loaded, 100)\n",
       "      }\n",
       "    }\n",
       "  \n",
       "    function run_callbacks() {\n",
       "      window._bokeh_onload_callbacks.forEach(function(callback) { callback() });\n",
       "      delete window._bokeh_onload_callbacks\n",
       "      console.info(\"Bokeh: all callbacks have finished\");\n",
       "    }\n",
       "  \n",
       "    function load_libs(js_urls, callback) {\n",
       "      window._bokeh_onload_callbacks.push(callback);\n",
       "      if (window._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",
       "      window._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",
       "          window._bokeh_is_loading--;\n",
       "          if (window._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(\"f8d199b0-6c3b-46ca-a48e-48bd31229280\");\n",
       "    if (element == null) {\n",
       "      console.log(\"Bokeh: ERROR: autoload.js configured with elementid 'f8d199b0-6c3b-46ca-a48e-48bd31229280' but no matching script tag was found. \")\n",
       "      return false;\n",
       "    }\n",
       "  \n",
       "    var js_urls = [];\n",
       "  \n",
       "    var inline_js = [\n",
       "      function(Bokeh) {\n",
       "        (function() {\n",
       "          var fn = function() {\n",
       "            var docs_json = {\"f2afa95d-cd0f-4e92-8fcd-e60bdacdc983\":{\"roots\":{\"references\":[{\"attributes\":{\"callback\":null},\"id\":\"204e9bb7-e3dc-4223-a815-bb298384dc8f\",\"type\":\"DataRange1d\"},{\"attributes\":{\"plot\":null,\"text\":\"E Lz space\"},\"id\":\"57770643-6fce-4a90-bd79-d9cf1cfd1be3\",\"type\":\"Title\"},{\"attributes\":{\"plot\":{\"id\":\"0b4f0338-9a75-478f-8ba1-7a2cfc7b343b\",\"subtype\":\"Figure\",\"type\":\"Plot\"}},\"id\":\"1364647b-ce6b-4917-b3dd-d823f5d9fbd1\",\"type\":\"HelpTool\"},{\"attributes\":{\"data_source\":{\"id\":\"da2d87e1-e89f-4957-bffd-2527478c0ed1\",\"type\":\"ColumnDataSource\"},\"glyph\":{\"id\":\"1cd36232-7ec9-470e-a77b-87e194baa074\",\"type\":\"Circle\"},\"hover_glyph\":null,\"nonselection_glyph\":{\"id\":\"3791e14e-80a8-4453-b8b1-270c4a12f68f\",\"type\":\"Circle\"},\"selection_glyph\":null},\"id\":\"11f23dd0-445b-47be-b5db-f7848f6f23dd\",\"type\":\"GlyphRenderer\"},{\"attributes\":{},\"id\":\"c8148501-27a1-4d22-b07c-62f5036e062a\",\"type\":\"BasicTicker\"},{\"attributes\":{\"dimension\":1,\"plot\":{\"id\":\"0b4f0338-9a75-478f-8ba1-7a2cfc7b343b\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"c8148501-27a1-4d22-b07c-62f5036e062a\",\"type\":\"BasicTicker\"}},\"id\":\"81170247-2ef0-4d54-9c84-96436319c3af\",\"type\":\"Grid\"},{\"attributes\":{},\"id\":\"3b95b4a6-05ef-433e-970c-daaf88f133e9\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"callback\":null,\"overlay\":{\"id\":\"96c6fdd2-4de7-4399-803a-0eb7610d6068\",\"type\":\"PolyAnnotation\"},\"plot\":{\"id\":\"0b4f0338-9a75-478f-8ba1-7a2cfc7b343b\",\"subtype\":\"Figure\",\"type\":\"Plot\"}},\"id\":\"15776f28-fcd2-4e29-8b01-3834ebf52ecc\",\"type\":\"LassoSelectTool\"},{\"attributes\":{\"bottom_units\":\"screen\",\"fill_alpha\":{\"value\":0.5},\"fill_color\":{\"value\":\"lightgrey\"},\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":{\"value\":1.0},\"line_color\":{\"value\":\"black\"},\"line_dash\":[4,4],\"line_width\":{\"value\":2},\"plot\":null,\"render_mode\":\"css\",\"right_units\":\"screen\",\"top_units\":\"screen\"},\"id\":\"28abec05-525d-46f1-993e-5c3bafcd4fef\",\"type\":\"BoxAnnotation\"},{\"attributes\":{\"active_drag\":\"auto\",\"active_scroll\":\"auto\",\"active_tap\":\"auto\",\"tools\":[{\"id\":\"12fa9097-d7c6-4bf7-9bde-b237b171e0d9\",\"type\":\"WheelZoomTool\"},{\"id\":\"c608cf17-485b-487e-b0c7-393cb4a18a58\",\"type\":\"BoxZoomTool\"},{\"id\":\"a2de709f-2ff1-48a8-b3af-b07533933d9e\",\"type\":\"BoxSelectTool\"},{\"id\":\"15776f28-fcd2-4e29-8b01-3834ebf52ecc\",\"type\":\"LassoSelectTool\"},{\"id\":\"1364647b-ce6b-4917-b3dd-d823f5d9fbd1\",\"type\":\"HelpTool\"},{\"id\":\"80352a2e-caae-436e-a5ce-ed5c10f0b9b1\",\"type\":\"ResetTool\"}]},\"id\":\"016ccf0c-d901-4a32-8d3c-6544f4f5ffe7\",\"type\":\"Toolbar\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.5},\"fill_color\":{\"value\":\"lightgrey\"},\"level\":\"overlay\",\"line_alpha\":{\"value\":1.0},\"line_color\":{\"value\":\"black\"},\"line_dash\":[4,4],\"line_width\":{\"value\":2},\"plot\":null,\"xs_units\":\"screen\",\"ys_units\":\"screen\"},\"id\":\"96c6fdd2-4de7-4399-803a-0eb7610d6068\",\"type\":\"PolyAnnotation\"},{\"attributes\":{\"callback\":null,\"column_names\":[\"y\",\"x\"],\"data\":{\"x\":{\"__ndarray__\":\"[encoded data, 106668 characters]\",\"dtype\":\"float64\",\"shape\":[10000]},\"y\":{\"__ndarray__\":\"[encoded data, 106668 characters]\",\"dtype\":\"float64\",\"shape\":[10000]}},\"js_callbacks\":{\"change:selected\":[{\"id\":\"dd5d2a93-c633-4fed-8d01-92ab7eff8189\",\"type\":\"CustomJS\"}]}},\"id\":\"da2d87e1-e89f-4957-bffd-2527478c0ed1\",\"type\":\"ColumnDataSource\"},{\"attributes\":{},\"id\":\"a2710ba1-3f7c-400b-aac6-ba98114aaeea\",\"type\":\"ToolEvents\"},{\"attributes\":{\"callback\":null,\"overlay\":{\"id\":\"28abec05-525d-46f1-993e-5c3bafcd4fef\",\"type\":\"BoxAnnotation\"},\"plot\":{\"id\":\"0b4f0338-9a75-478f-8ba1-7a2cfc7b343b\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"renderers\":[{\"id\":\"11f23dd0-445b-47be-b5db-f7848f6f23dd\",\"type\":\"GlyphRenderer\"}]},\"id\":\"a2de709f-2ff1-48a8-b3af-b07533933d9e\",\"type\":\"BoxSelectTool\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.2},\"fill_color\":{\"value\":\"navy\"},\"line_alpha\":{\"value\":0.2},\"line_color\":{\"value\":\"navy\"},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"1cd36232-7ec9-470e-a77b-87e194baa074\",\"type\":\"Circle\"},{\"attributes\":{},\"id\":\"283a20ab-e3cb-48ef-9294-320dbd3f549b\",\"type\":\"BasicTicker\"},{\"attributes\":{\"overlay\":{\"id\":\"48e5cb71-180b-4f45-a4e8-000dd9d68dee\",\"type\":\"BoxAnnotation\"},\"plot\":{\"id\":\"0b4f0338-9a75-478f-8ba1-7a2cfc7b343b\",\"subtype\":\"Figure\",\"type\":\"Plot\"}},\"id\":\"c608cf17-485b-487e-b0c7-393cb4a18a58\",\"type\":\"BoxZoomTool\"},{\"attributes\":{},\"id\":\"14063e58-c1fa-4028-949d-5321aafbb6b2\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"bottom_units\":\"screen\",\"fill_alpha\":{\"value\":0.5},\"fill_color\":{\"value\":\"lightgrey\"},\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":{\"value\":1.0},\"line_color\":{\"value\":\"black\"},\"line_dash\":[4,4],\"line_width\":{\"value\":2},\"plot\":null,\"render_mode\":\"css\",\"right_units\":\"screen\",\"top_units\":\"screen\"},\"id\":\"48e5cb71-180b-4f45-a4e8-000dd9d68dee\",\"type\":\"BoxAnnotation\"},{\"attributes\":{\"below\":[{\"id\":\"15668d47-5ec6-4237-8bd7-b7544ce90cb5\",\"type\":\"LinearAxis\"}],\"left\":[{\"id\":\"45398263-db90-430f-b939-667b71e3e68e\",\"type\":\"LinearAxis\"}],\"plot_height\":500,\"plot_width\":500,\"renderers\":[{\"id\":\"15668d47-5ec6-4237-8bd7-b7544ce90cb5\",\"type\":\"LinearAxis\"},{\"id\":\"0b490236-caef-45e4-ac5c-67236dc1d2b6\",\"type\":\"Grid\"},{\"id\":\"45398263-db90-430f-b939-667b71e3e68e\",\"type\":\"LinearAxis\"},{\"id\":\"81170247-2ef0-4d54-9c84-96436319c3af\",\"type\":\"Grid\"},{\"id\":\"48e5cb71-180b-4f45-a4e8-000dd9d68dee\",\"type\":\"BoxAnnotation\"},{\"id\":\"28abec05-525d-46f1-993e-5c3bafcd4fef\",\"type\":\"BoxAnnotation\"},{\"id\":\"96c6fdd2-4de7-4399-803a-0eb7610d6068\",\"type\":\"PolyAnnotation\"},{\"id\":\"11f23dd0-445b-47be-b5db-f7848f6f23dd\",\"type\":\"GlyphRenderer\"}],\"title\":{\"id\":\"57770643-6fce-4a90-bd79-d9cf1cfd1be3\",\"type\":\"Title\"},\"tool_events\":{\"id\":\"a2710ba1-3f7c-400b-aac6-ba98114aaeea\",\"type\":\"ToolEvents\"},\"toolbar\":{\"id\":\"016ccf0c-d901-4a32-8d3c-6544f4f5ffe7\",\"type\":\"Toolbar\"},\"webgl\":true,\"x_range\":{\"id\":\"204e9bb7-e3dc-4223-a815-bb298384dc8f\",\"type\":\"DataRange1d\"},\"y_range\":{\"id\":\"823206e5-128c-4e4f-9057-6f82612dc027\",\"type\":\"DataRange1d\"}},\"id\":\"0b4f0338-9a75-478f-8ba1-7a2cfc7b343b\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{\"callback\":null},\"id\":\"823206e5-128c-4e4f-9057-6f82612dc027\",\"type\":\"DataRange1d\"},{\"attributes\":{\"plot\":{\"id\":\"0b4f0338-9a75-478f-8ba1-7a2cfc7b343b\",\"subtype\":\"Figure\",\"type\":\"Plot\"}},\"id\":\"12fa9097-d7c6-4bf7-9bde-b237b171e0d9\",\"type\":\"WheelZoomTool\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"#1f77b4\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"#1f77b4\"},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"3791e14e-80a8-4453-b8b1-270c4a12f68f\",\"type\":\"Circle\"},{\"attributes\":{\"plot\":{\"id\":\"0b4f0338-9a75-478f-8ba1-7a2cfc7b343b\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"283a20ab-e3cb-48ef-9294-320dbd3f549b\",\"type\":\"BasicTicker\"}},\"id\":\"0b490236-caef-45e4-ac5c-67236dc1d2b6\",\"type\":\"Grid\"},{\"attributes\":{\"plot\":{\"id\":\"0b4f0338-9a75-478f-8ba1-7a2cfc7b343b\",\"subtype\":\"Figure\",\"type\":\"Plot\"}},\"id\":\"80352a2e-caae-436e-a5ce-ed5c10f0b9b1\",\"type\":\"ResetTool\"},{\"attributes\":{\"formatter\":{\"id\":\"3b95b4a6-05ef-433e-970c-daaf88f133e9\",\"type\":\"BasicTickFormatter\"},\"plot\":{\"id\":\"0b4f0338-9a75-478f-8ba1-7a2cfc7b343b\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"c8148501-27a1-4d22-b07c-62f5036e062a\",\"type\":\"BasicTicker\"}},\"id\":\"45398263-db90-430f-b939-667b71e3e68e\",\"type\":\"LinearAxis\"},{\"attributes\":{\"args\":{\"data\":{\"id\":\"da2d87e1-e89f-4957-bffd-2527478c0ed1\",\"type\":\"ColumnDataSource\"}},\"code\":\"\\n\\n    var indices = data.selected[\\\"1d\\\"].indices\\n    var widget_id = 'ebd5bbce5b5c4fd89d6871bc5cfa4d28'\\n    if(jupyter_widget_manager) {\\n        // MYSTERY: if we use require, we end up at bokeh's require, which cannot find it, using requirejs it seems to work\\n        requirejs([\\\"@jupyter-widgets/base\\\"], function(widgets) {\\n            var widget_promise = widgets.unpack_models('IPY_MODEL_' +widget_id, jupyter_widget_manager)\\n            widget_promise.then(function(widget) {\\n                     widget.set('selected', indices)\\n                     widget.save_changes()\\n            })\\n        })\\n    } else {\\n        console.error(\\\"no widget manager\\\")\\n    }\\n\\n    \"},\"id\":\"dd5d2a93-c633-4fed-8d01-92ab7eff8189\",\"type\":\"CustomJS\"},{\"attributes\":{\"formatter\":{\"id\":\"14063e58-c1fa-4028-949d-5321aafbb6b2\",\"type\":\"BasicTickFormatter\"},\"plot\":{\"id\":\"0b4f0338-9a75-478f-8ba1-7a2cfc7b343b\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"283a20ab-e3cb-48ef-9294-320dbd3f549b\",\"type\":\"BasicTicker\"}},\"id\":\"15668d47-5ec6-4237-8bd7-b7544ce90cb5\",\"type\":\"LinearAxis\"}],\"root_ids\":[\"0b4f0338-9a75-478f-8ba1-7a2cfc7b343b\"]},\"title\":\"Bokeh Application\",\"version\":\"0.12.4\"}};\n",
       "            var render_items = [{\"docid\":\"f2afa95d-cd0f-4e92-8fcd-e60bdacdc983\",\"elementid\":\"f8d199b0-6c3b-46ca-a48e-48bd31229280\",\"modelid\":\"0b4f0338-9a75-478f-8ba1-7a2cfc7b343b\"}];\n",
       "            \n",
       "            Bokeh.embed.embed_items(docs_json, render_items);\n",
       "          };\n",
       "          if (document.readyState != \"loading\") fn();\n",
       "          else document.addEventListener(\"DOMContentLoaded\", fn);\n",
       "        })();\n",
       "      },\n",
       "      function(Bokeh) {\n",
       "      }\n",
       "    ];\n",
       "  \n",
       "    function run_inline_js() {\n",
       "      \n",
       "      if ((window.Bokeh !== undefined) || (force === true)) {\n",
       "        for (var i = 0; i < inline_js.length; i++) {\n",
       "          inline_js[i](window.Bokeh);\n",
       "        }if (force === true) {\n",
       "          display_loaded();\n",
       "        }} else if (Date.now() < window._bokeh_timeout) {\n",
       "        setTimeout(run_inline_js, 100);\n",
       "      } else if (!window._bokeh_failed_load) {\n",
       "        console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n",
       "        window._bokeh_failed_load = true;\n",
       "      } else if (force !== true) {\n",
       "        var cell = $(document.getElementById(\"f8d199b0-6c3b-46ca-a48e-48bd31229280\")).parents('.cell').data().cell;\n",
       "        cell.output_area.append_execute_result(NB_LOAD_WARNING)\n",
       "      }\n",
       "  \n",
       "    }\n",
       "  \n",
       "    if (window._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",
       "  }(this));\n",
       "</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "tools = \"wheel_zoom,box_zoom,box_select,lasso_select,help,reset,\"\n",
    "p = figure(title=\"E Lz space\", tools=tools, webgl=True, width=500, height=500)\n",
    "r = p.circle(ds.data.Lz[:N], ds.data.E[:N],color=\"navy\", alpha=0.2)\n",
    "# A 'trick' from ipyvolume to link the selection (one way traffic atm)\n",
    "ipyvolume.bokeh.link_data_source_selection_to_widget(r.data_source, quiver, 'selected')\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now try doing a selection and see how the above 3d quiver plot reflects this selection."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "# this code is currently broken\n",
    "# import ipywidgets\n",
    "#out = ipywidgets.Output()\n",
    "#with out:\n",
    "#    show(p)\n",
    "#ipywidgets.HBox([out, ipv.gcc()])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Embedding in html"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "A bit of a hack, but it is possible to embed the widget and the bokeh part into a single html file (use at own risk)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "collapsed": true,
    "run_control": {
     "marked": false
    }
   },
   "outputs": [],
   "source": [
    "from bokeh.resources import CDN\n",
    "from bokeh.embed import components\n",
    "\n",
    "script, div = components((p))\n",
    "template_options = dict(extra_script_head=script + CDN.render_js() + CDN.render_css(),\n",
    "                        body_pre=\"<h2>Do selections in 2d (bokeh)<h2>\" + div + \"<h2>And see the selection in ipyvolume<h2>\")\n",
    "ipyvolume.embed.embed_html(\"tmp/bokeh.html\",\n",
    "                           [ipv.gcc(), ipyvolume.bokeh.wmh], all_states=True,\n",
    "                           template_options=template_options)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "!open tmp/bokeh.html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "anaconda-cloud": {},
  "kernelspec": {
   "display_name": "Python [default]",
   "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.2"
  },
  "widgets": {
   "application/vnd.jupyter.widget-state+json": {
    "state": {
     "09be19dce4ca4e84951953cfb8e077eb": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "39500cb0de6b4d3a9dce8709973cc26c": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.0.0",
      "model_name": "VBoxModel",
      "state": {
       "children": [
        "IPY_MODEL_cf331857d7304e878d780756ff73d75f"
       ],
       "layout": "IPY_MODEL_5d5069112df047dab294247b40451d87"
      }
     },
     "3eb7aad0600449a494ba76a739f327d9": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "5d5069112df047dab294247b40451d87": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "86a92b4c1bd44ceba2e819a57513ac8d": {
      "model_module": "ipyvolume",
      "model_module_version": "~0.4.0-beta.1",
      "model_name": "WidgetManagerHackModel",
      "state": {
       "_view_module": null,
       "_view_module_version": ""
      }
     },
     "cf331857d7304e878d780756ff73d75f": {
      "model_module": "ipyvolume",
      "model_module_version": "~0.4.0-beta.1",
      "model_name": "FigureModel",
      "state": {
       "data_max": 0,
       "data_min": 0,
       "height": 500,
       "layout": "IPY_MODEL_09be19dce4ca4e84951953cfb8e077eb",
       "matrix_projection": [
        3.017766952966369,
        0,
        0,
        0,
        0,
        2.414213562373095,
        0,
        0,
        0,
        0,
        -1.000002000002,
        -1,
        0,
        0,
        -0.02000002000002,
        0
       ],
       "matrix_world": [
        0.016666666666666666,
        0,
        0,
        0,
        0,
        0.016666666666666666,
        0,
        0,
        0,
        0,
        0.016666666666666666,
        0,
        0,
        0,
        0,
        1
       ],
       "meshes": [],
       "scatters": [
        "IPY_MODEL_ebd5bbce5b5c4fd89d6871bc5cfa4d28"
       ],
       "tf": null,
       "volume_data": null,
       "width": 400,
       "xlim": [
        -30,
        30
       ],
       "ylim": [
        -30,
        30
       ],
       "zlim": [
        -30,
        30
       ]
      }
     },
     "ebd5bbce5b5c4fd89d6871bc5cfa4d28": {
      "buffers": [
       {
        "data": "[encoded data, 53336 characters]",
        "encoding": "base64",
        "path": [
         "y",
         0,
         "buffer"
        ]
       },
       {
        "data": "[encoded data, 53336 characters]",
        "encoding": "base64",
        "path": [
         "vz",
         0,
         "buffer"
        ]
       },
       {
        "data": "[encoded data, 53336 characters]",
        "encoding": "base64",
        "path": [
         "z",
         0,
         "buffer"
        ]
       },
       {
        "data": "[encoded data, 53336 characters]",
        "encoding": "base64",
        "path": [
         "vx",
         0,
         "buffer"
        ]
       },
       {
        "data": "[encoded data, 53336 characters]",
        "encoding": "base64",
        "path": [
         "x",
         0,
         "buffer"
        ]
       },
       {
        "data": "AwAAABkAAABBAAAAYwAAAHUAAACRAAAAmwAAAMkAAADZAAAA+AAAAAABAAACAQAAGQEAACABAAA1AQAAXQEAALQBAADcAQAAUQIAAGICAACQAgAAkwIAAJ0CAACrAgAAsAIAALcCAAC7AgAAvwIAAMsCAAAdAwAAOgMAAEQDAABIAwAAkgMAAJgDAACfAwAAowMAALIDAADFAwAAxwMAAPUDAAAnBAAAWwQAAGYEAABuBAAAdwQAAH0EAACXBAAAoAQAAAQFAAAJBQAAFQUAAFsFAABhBQAAjwUAAJ8FAAAABgAACgYAABEGAAAqBgAANgYAAE8GAABcBgAAeAYAAH4GAAB/BgAAiAYAANcGAADhBgAA7QYAAAcHAAARBwAAPwcAAEIHAABjBwAAiQcAAL4HAAAZCAAALQgAADYIAABnCAAAgwgAAJ4IAADDCAAA6AgAAAMJAAARCQAAIAkAAFsJAACaCQAAmwkAAM4JAAANCgAANwoAAEwKAACCCgAAhgoAANMKAADqCgAALAsAADQLAABaCwAAagsAAIoLAACgCwAAqQsAALELAADLCwAA7gsAAPwLAAAZDAAAHQwAADsMAABEDAAAVQwAAGUMAABqDAAApwwAAKkMAADKDAAAEA0AADoNAAA+DQAAQA0AAK8NAADcDQAA7w0AACgOAAAvDgAAMg4AADQOAAB8DgAAAg8AADkPAABHDwAAXQ8AAHoPAACKDwAAoQ8AALAPAACzDwAAwQ8AANQPAADlDwAA5g8AAPUPAAD8DwAAGhAAAEUQAABrEAAAhhAAAIcQAACPEAAA7hAAABERAAAdEQAAMhEAAEsRAABkEQAAbREAAIoRAACaEQAAmxEAAKARAACzEQAAxxEAANcRAADcEQAA4hEAAOQRAADuEQAAHhIAADwSAABVEgAAfhIAAOQSAAD9EgAACRMAABwTAABeEwAAZRMAACUUAAAvFAAAMxQAADoUAABgFAAAZxQAAHkUAAB8FAAAgBQAAJYUAADAFAAA8BQAADQVAABsFQAAcBUAAHkVAAC+FQAA3hUAAOQVAAAMFgAAFBYAABsWAABNFgAAkBYAAJ4WAACrFgAAyBYAAMsWAAAmFwAAKhcAAG8XAACXFwAA8BcAAAsYAAASGAAAMBgAAEsYAABYGAAAWxgAAGcYAADcGAAA4RgAACwZAAAvGQAAYBkAAHYZAACqGQAAxxkAAMkZAADQGQAA9RkAAPYZAABcGgAAhBoAAIwaAACNGgAAjxoAAKUaAAC8GgAAvhoAABwbAAA5GwAAdxsAAI8bAACgGwAAoxsAANEbAAARHAAAFxwAAC0cAAA2HAAAYhwAAHQcAACAHAAAhBwAALUcAAAGHQAAMB0AADkdAACMHQAAjh0AAJAdAACiHQAAvx0AAMsdAAAlHgAANB4AAEUeAABNHgAAVh4AAFgeAACFHgAAhx4AAMQeAADwHgAA9R4AAAUfAABpHwAAlx8AAO8fAAA7IAAAcCAAAHYgAACjIAAA9yAAAFohAAB7IQAAgCEAAIQhAACOIQAACiIAAE8iAABkIgAAaSIAAHQiAAB2IgAAhiIAAM8iAAAEIwAAXCMAAL4jAADnIwAApiQAAKwkAADTJAAAHCUAACklAABRJQAAXSUAAGclAACFJQAAiyUAAJAlAACjJQAAwiUAACkmAAAqJgAAMSYAADMmAAA/JgAAXyYAAGYmAABvJgAAkCYAAJMmAAC6JgAA3CYAAOcmAAD7JgAABScAAA==",
        "encoding": "base64",
        "path": [
         "selected",
         0,
         "buffer"
        ]
       },
       {
        "data": "[encoded data, 53336 characters]",
        "encoding": "base64",
        "path": [
         "vy",
         0,
         "buffer"
        ]
       }
      ],
      "model_module": "ipyvolume",
      "model_module_version": "~0.4.0-beta.1",
      "model_name": "ScatterModel",
      "state": {
       "_dom_classes": [],
       "color_selected": "grey",
       "geo": "arrow",
       "layout": "IPY_MODEL_3eb7aad0600449a494ba76a739f327d9",
       "selected": [
        {
         "dtype": "int32",
         "shape": [
          331
         ]
        }
       ],
       "size": 1,
       "size_selected": 5,
       "visible": true,
       "visible_lines": false,
       "visible_markers": true,
       "vx": [
        {
         "dtype": "float32",
         "shape": [
          10000
         ]
        }
       ],
       "vy": [
        {
         "dtype": "float32",
         "shape": [
          10000
         ]
        }
       ],
       "vz": [
        {
         "dtype": "float32",
         "shape": [
          10000
         ]
        }
       ],
       "x": [
        {
         "dtype": "float32",
         "shape": [
          10000
         ]
        }
       ],
       "y": [
        {
         "dtype": "float32",
         "shape": [
          10000
         ]
        }
       ],
       "z": [
        {
         "dtype": "float32",
         "shape": [
          10000
         ]
        }
       ]
      }
     }
    },
    "version_major": 2,
    "version_minor": 0
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
