j1-template 2022.5.0.rc1 → 2022.5.0.rc4

data/lib/starter_web/pages/public/_jupyter/notebooks/textbooks/j1_bokeh_05_presentation_layouts.html

@@ -0,0 +1,660 @@
+  <div class="cell text_cell">
+    <button class="js-nbinteract-widget">
+      Loading widgets...
+    </button>
+  </div>
+
+
+
+<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
+<div class="text_cell_render border-box-sizing rendered_html">
+<h2 id="5.-Presentation-and-Layout">5. Presentation and Layout<a class="anchor-link" href="#5.-Presentation-and-Layout">&#182;</a></h2><p>In the previous chapters we started to learn how to create single plots using differnet kinds of data. But we often want to plot more than one thing. Bokeh plots can be individually embedded in HTML documents, but it's often easier to
+combine multiple plots in one of Bokeh's built-in layouts. We will learn how to do that in this chapter.</p>
+
+</div>
+</div>
+</div>
+
+  
+
+  <div class="
+      cell border-box-sizing code_cell rendered">
+    <div class="input">
+
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">from</span> <span class="nn">bokeh.io</span> <span class="kn">import</span> <span class="n">output_notebook</span><span class="p">,</span> <span class="n">show</span>
+<span class="kn">from</span> <span class="nn">bokeh.plotting</span> <span class="kn">import</span> <span class="n">figure</span>
+
+<span class="kn">import</span> <span class="nn">numpy</span> <span class="k">as</span> <span class="nn">np</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+  </div>
+
+  
+
+  <div class="nbinteract-hide_out
+      cell border-box-sizing code_cell rendered">
+    <div class="input">
+
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython3"><pre><span></span><span class="c1">#nbi:hide_out</span>
+<span class="c1"># Make all outputs INLINE for default (why a hell this is needed !!!)</span>
+<span class="n">output_notebook</span><span class="p">()</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+<div class="output_wrapper">
+<div class="output">
+
+
+<div class="output_area">
+
+    
+
+
+<div class="output_html rendered_html output_subarea ">
+<div class="bk-root">
+        <a href="https://bokeh.org" target="_blank" class="bk-logo bk-logo-small bk-logo-notebook"></a>
+        <span id="1002">Loading BokehJS ...</span>
+    </div>
+
+</div>
+
+</div>
+
+<div class="output_area">
+
+    
+
+
+
+
+<div id="64d4af4c-624c-4ac5-9fc2-90d7bb1a88b3"></div>
+<div class="output_subarea output_javascript ">
+<script type="text/javascript">
+var element = $('#64d4af4c-624c-4ac5-9fc2-90d7bb1a88b3');
+(function(root) {
+  function now() {
+    return new Date();
+  }
+
+  const force = true;
+
+  if (typeof root._bokeh_onload_callbacks === "undefined" || force === true) {
+    root._bokeh_onload_callbacks = [];
+    root._bokeh_is_loading = undefined;
+  }
+
+const JS_MIME_TYPE = 'application/javascript';
+  const HTML_MIME_TYPE = 'text/html';
+  const EXEC_MIME_TYPE = 'application/vnd.bokehjs_exec.v0+json';
+  const CLASS_NAME = 'output_bokeh rendered_html';
+
+  /**
+   * Render data to the DOM node
+   */
+  function render(props, node) {
+    const script = document.createElement("script");
+    node.appendChild(script);
+  }
+
+  /**
+   * Handle when an output is cleared or removed
+   */
+  function handleClearOutput(event, handle) {
+    const cell = handle.cell;
+
+    const id = cell.output_area._bokeh_element_id;
+    const server_id = cell.output_area._bokeh_server_id;
+    // Clean up Bokeh references
+    if (id != null && id in Bokeh.index) {
+      Bokeh.index[id].model.document.clear();
+      delete Bokeh.index[id];
+    }
+
+    if (server_id !== undefined) {
+      // Clean up Bokeh references
+      const cmd_clean = "from bokeh.io.state import curstate; print(curstate().uuid_to_server['" + server_id + "'].get_sessions()[0].document.roots[0]._id)";
+      cell.notebook.kernel.execute(cmd_clean, {
+        iopub: {
+          output: function(msg) {
+            const id = msg.content.text.trim();
+            if (id in Bokeh.index) {
+              Bokeh.index[id].model.document.clear();
+              delete Bokeh.index[id];
+            }
+          }
+        }
+      });
+      // Destroy server and session
+      const cmd_destroy = "import bokeh.io.notebook as ion; ion.destroy_server('" + server_id + "')";
+      cell.notebook.kernel.execute(cmd_destroy);
+    }
+  }
+
+  /**
+   * Handle when a new output is added
+   */
+  function handleAddOutput(event, handle) {
+    const output_area = handle.output_area;
+    const output = handle.output;
+
+    // limit handleAddOutput to display_data with EXEC_MIME_TYPE content only
+    if ((output.output_type != "display_data") || (!Object.prototype.hasOwnProperty.call(output.data, EXEC_MIME_TYPE))) {
+      return
+    }
+
+    const toinsert = output_area.element.find("." + CLASS_NAME.split(' ')[0]);
+
+    if (output.metadata[EXEC_MIME_TYPE]["id"] !== undefined) {
+      toinsert[toinsert.length - 1].firstChild.textContent = output.data[JS_MIME_TYPE];
+      // store reference to embed id on output_area
+      output_area._bokeh_element_id = output.metadata[EXEC_MIME_TYPE]["id"];
+    }
+    if (output.metadata[EXEC_MIME_TYPE]["server_id"] !== undefined) {
+      const bk_div = document.createElement("div");
+      bk_div.innerHTML = output.data[HTML_MIME_TYPE];
+      const script_attrs = bk_div.children[0].attributes;
+      for (let i = 0; i < script_attrs.length; i++) {
+        toinsert[toinsert.length - 1].firstChild.setAttribute(script_attrs[i].name, script_attrs[i].value);
+        toinsert[toinsert.length - 1].firstChild.textContent = bk_div.children[0].textContent
+      }
+      // store reference to server id on output_area
+      output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE]["server_id"];
+    }
+  }
+
+  function register_renderer(events, OutputArea) {
+
+    function append_mime(data, metadata, element) {
+      // create a DOM node to render to
+      const toinsert = this.create_output_subarea(
+        metadata,
+        CLASS_NAME,
+        EXEC_MIME_TYPE
+      );
+      this.keyboard_manager.register_events(toinsert);
+      // Render to node
+      const props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};
+      render(props, toinsert[toinsert.length - 1]);
+      element.append(toinsert);
+      return toinsert
+    }
+
+    /* Handle when an output is cleared or removed */
+    events.on('clear_output.CodeCell', handleClearOutput);
+    events.on('delete.Cell', handleClearOutput);
+
+    /* Handle when a new output is added */
+    events.on('output_added.OutputArea', handleAddOutput);
+
+    /**
+     * Register the mime type and append_mime function with output_area
+     */
+    OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {
+      /* Is output safe? */
+      safe: true,
+      /* Index of renderer in `output_area.display_order` */
+      index: 0
+    });
+  }
+
+  // register the mime type if in Jupyter Notebook environment and previously unregistered
+  if (root.Jupyter !== undefined) {
+    const events = require('base/js/events');
+    const OutputArea = require('notebook/js/outputarea').OutputArea;
+
+    if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {
+      register_renderer(events, OutputArea);
+    }
+  }
+  if (typeof (root._bokeh_timeout) === "undefined" || force === true) {
+    root._bokeh_timeout = Date.now() + 5000;
+    root._bokeh_failed_load = false;
+  }
+
+  const NB_LOAD_WARNING = {'data': {'text/html':
+     "<div style='background-color: #fdd'>\n"+
+     "<p>\n"+
+     "BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \n"+
+     "may be due to a slow or bad network connection. Possible fixes:\n"+
+     "</p>\n"+
+     "<ul>\n"+
+     "<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\n"+
+     "<li>use INLINE resources instead, as so:</li>\n"+
+     "</ul>\n"+
+     "<code>\n"+
+     "from bokeh.resources import INLINE\n"+
+     "output_notebook(resources=INLINE)\n"+
+     "</code>\n"+
+     "</div>"}};
+
+  function display_loaded() {
+    const el = document.getElementById("1002");
+    if (el != null) {
+      el.textContent = "BokehJS is loading...";
+    }
+    if (root.Bokeh !== undefined) {
+      if (el != null) {
+        el.textContent = "BokehJS " + root.Bokeh.version + " successfully loaded.";
+      }
+    } else if (Date.now() < root._bokeh_timeout) {
+      setTimeout(display_loaded, 100)
+    }
+  }
+
+  function run_callbacks() {
+    try {
+      root._bokeh_onload_callbacks.forEach(function(callback) {
+        if (callback != null)
+          callback();
+      });
+    } finally {
+      delete root._bokeh_onload_callbacks
+    }
+    console.debug("Bokeh: all callbacks have finished");
+  }
+
+  function load_libs(css_urls, js_urls, callback) {
+    if (css_urls == null) css_urls = [];
+    if (js_urls == null) js_urls = [];
+
+    root._bokeh_onload_callbacks.push(callback);
+    if (root._bokeh_is_loading > 0) {
+      console.debug("Bokeh: BokehJS is being loaded, scheduling callback at", now());
+      return null;
+    }
+    if (js_urls == null || js_urls.length === 0) {
+      run_callbacks();
+      return null;
+    }
+    console.debug("Bokeh: BokehJS not loaded, scheduling load and callback at", now());
+    root._bokeh_is_loading = css_urls.length + js_urls.length;
+
+    function on_load() {
+      root._bokeh_is_loading--;
+      if (root._bokeh_is_loading === 0) {
+        console.debug("Bokeh: all BokehJS libraries/stylesheets loaded");
+        run_callbacks()
+      }
+    }
+
+    function on_error(url) {
+      console.error("failed to load " + url);
+    }
+
+    for (let i = 0; i < css_urls.length; i++) {
+      const url = css_urls[i];
+      const element = document.createElement("link");
+      element.onload = on_load;
+      element.onerror = on_error.bind(null, url);
+      element.rel = "stylesheet";
+      element.type = "text/css";
+      element.href = url;
+      console.debug("Bokeh: injecting link tag for BokehJS stylesheet: ", url);
+      document.body.appendChild(element);
+    }
+
+    for (let i = 0; i < js_urls.length; i++) {
+      const url = js_urls[i];
+      const element = document.createElement('script');
+      element.onload = on_load;
+      element.onerror = on_error.bind(null, url);
+      element.async = false;
+      element.src = url;
+      console.debug("Bokeh: injecting script tag for BokehJS library: ", url);
+      document.head.appendChild(element);
+    }
+  };
+
+  function inject_raw_css(css) {
+    const element = document.createElement("style");
+    element.appendChild(document.createTextNode(css));
+    document.body.appendChild(element);
+  }
+
+  const js_urls = ["https://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.min.js", "https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.3.min.js", "https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.3.min.js", "https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.3.min.js", "https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.3.min.js"];
+  const css_urls = [];
+
+  const inline_js = [    function(Bokeh) {
+      Bokeh.set_log_level("info");
+    },
+function(Bokeh) {
+    }
+  ];
+
+  function run_inline_js() {
+    if (root.Bokeh !== undefined || force === true) {
+          for (let i = 0; i < inline_js.length; i++) {
+      inline_js[i].call(root, root.Bokeh);
+    }
+if (force === true) {
+        display_loaded();
+      }} else if (Date.now() < root._bokeh_timeout) {
+      setTimeout(run_inline_js, 100);
+    } else if (!root._bokeh_failed_load) {
+      console.log("Bokeh: BokehJS failed to load within specified timeout.");
+      root._bokeh_failed_load = true;
+    } else if (force !== true) {
+      const cell = $(document.getElementById("1002")).parents('.cell').data().cell;
+      cell.output_area.append_execute_result(NB_LOAD_WARNING)
+    }
+  }
+
+  if (root._bokeh_is_loading === 0) {
+    console.debug("Bokeh: BokehJS loaded, going straight to plotting");
+    run_inline_js();
+  } else {
+    load_libs(css_urls, js_urls, function() {
+      console.debug("Bokeh: BokehJS plotting callback run at", now());
+      run_inline_js();
+    });
+  }
+}(window));
+</script>
+</div>
+
+</div>
+
+</div>
+</div>
+
+  </div>
+<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
+<div class="text_cell_render border-box-sizing rendered_html">
+<p>The cell below defines a few data variables we will use in examples.</p>
+
+</div>
+</div>
+</div>
+
+  
+
+  <div class="
+      cell border-box-sizing code_cell rendered">
+    <div class="input">
+
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython3"><pre><span></span><span class="n">x</span> <span class="o">=</span> <span class="nb">list</span><span class="p">(</span><span class="nb">range</span><span class="p">(</span><span class="mi">11</span><span class="p">))</span>
+<span class="n">y0</span><span class="p">,</span> <span class="n">y1</span><span class="p">,</span> <span class="n">y2</span> <span class="o">=</span> <span class="n">x</span><span class="p">,</span> <span class="p">[</span><span class="mi">10</span><span class="o">-</span><span class="n">i</span> <span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="n">x</span><span class="p">],</span> <span class="p">[</span><span class="nb">abs</span><span class="p">(</span><span class="n">i</span><span class="o">-</span><span class="mi">5</span><span class="p">)</span> <span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="n">x</span><span class="p">]</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+  </div>
+<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
+<div class="text_cell_render border-box-sizing rendered_html">
+<h3 id="Rows-and-Columns">Rows and Columns<a class="anchor-link" href="#Rows-and-Columns">&#182;</a></h3><p>The <code>bokeh.layouts</code> modules provides the <code>row</code> and <code>column</code> functions to arrange plot objects in vertical or horizontal layouts. Below is an example of three plots arranged in a row.</p>
+
+</div>
+</div>
+</div>
+
+  
+
+  <div class="
+      cell border-box-sizing code_cell rendered">
+    <div class="input">
+
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">from</span> <span class="nn">bokeh.layouts</span> <span class="kn">import</span> <span class="n">row</span>
+
+<span class="c1"># create a new plot</span>
+<span class="n">s1</span> <span class="o">=</span> <span class="n">figure</span><span class="p">(</span>
+    <span class="n">width</span><span class="o">=</span><span class="mi">250</span><span class="p">,</span>
+    <span class="n">plot_height</span><span class="o">=</span><span class="mi">250</span>
+<span class="p">)</span>
+<span class="n">s1</span><span class="o">.</span><span class="n">circle</span><span class="p">(</span>
+    <span class="n">x</span><span class="p">,</span>
+    <span class="n">y0</span><span class="p">,</span> 
+    <span class="n">size</span><span class="o">=</span><span class="mi">10</span><span class="p">,</span>
+    <span class="n">color</span><span class="o">=</span><span class="s2">&quot;navy&quot;</span><span class="p">,</span>
+    <span class="n">alpha</span><span class="o">=</span><span class="mf">0.5</span>
+<span class="p">)</span>
+
+<span class="c1"># create a 2nd one</span>
+<span class="n">s2</span> <span class="o">=</span> <span class="n">figure</span><span class="p">(</span>
+    <span class="n">width</span><span class="o">=</span><span class="mi">250</span><span class="p">,</span>
+    <span class="n">plot_height</span><span class="o">=</span><span class="mi">250</span>
+<span class="p">)</span>
+<span class="n">s2</span><span class="o">.</span><span class="n">triangle</span><span class="p">(</span>
+    <span class="n">x</span><span class="p">,</span>
+    <span class="n">y1</span><span class="p">,</span>
+    <span class="n">size</span><span class="o">=</span><span class="mi">10</span><span class="p">,</span>
+    <span class="n">color</span><span class="o">=</span><span class="s2">&quot;firebrick&quot;</span><span class="p">,</span>
+    <span class="n">alpha</span><span class="o">=</span><span class="mf">0.5</span>
+<span class="p">)</span>
+
+<span class="c1"># create the 3rd one</span>
+<span class="n">s3</span> <span class="o">=</span> <span class="n">figure</span><span class="p">(</span>
+    <span class="n">width</span><span class="o">=</span><span class="mi">250</span><span class="p">,</span>
+    <span class="n">plot_height</span><span class="o">=</span><span class="mi">250</span>
+<span class="p">)</span>
+<span class="n">s3</span><span class="o">.</span><span class="n">square</span><span class="p">(</span>
+    <span class="n">x</span><span class="p">,</span>
+    <span class="n">y2</span><span class="p">,</span>
+    <span class="n">size</span><span class="o">=</span><span class="mi">10</span><span class="p">,</span>
+    <span class="n">color</span><span class="o">=</span><span class="s2">&quot;olive&quot;</span><span class="p">,</span>
+    <span class="n">alpha</span><span class="o">=</span><span class="mf">0.5</span>
+<span class="p">)</span>
+
+<span class="c1"># show the results in a row</span>
+<span class="n">show</span><span class="p">(</span>
+    <span class="n">row</span><span class="p">(</span><span class="n">s1</span><span class="p">,</span> <span class="n">s2</span><span class="p">,</span> <span class="n">s3</span><span class="p">)</span>
+<span class="p">)</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+<div class="output_wrapper">
+<div class="output">
+
+
+<div class="output_area">
+
+    
+
+
+<div class="output_html rendered_html output_subarea ">
+
+  <div class="bk-root" id="0efc0463-8d97-4e66-b8c9-35a25fb6c72e" data-root-id="1114"></div>
+
+</div>
+
+</div>
+
+<div class="output_area">
+
+    
+
+
+
+
+<div id="d3569564-03a1-40ab-90df-ffbfb725e507"></div>
+<div class="output_subarea output_javascript ">
+<script type="text/javascript">
+var element = $('#d3569564-03a1-40ab-90df-ffbfb725e507');
+(function(root) {
+  function embed_document(root) {
+  const docs_json = {"73b434f2-1d2a-4fc7-8663-db76463d36b9":{"defs":[],"roots":{"references":[{"attributes":{"children":[{"id":"1003"},{"id":"1040"},{"id":"1077"}]},"id":"1114","type":"Row"},{"attributes":{"fill_alpha":{"value":0.2},"fill_color":{"value":"firebrick"},"hatch_alpha":{"value":0.2},"hatch_color":{"value":"firebrick"},"line_alpha":{"value":0.2},"line_color":{"value":"firebrick"},"marker":{"value":"triangle"},"size":{"value":10},"x":{"field":"x"},"y":{"field":"y"}},"id":"1074","type":"Scatter"},{"attributes":{},"id":"1139","type":"UnionRenderers"},{"attributes":{},"id":"1061","type":"ResetTool"},{"attributes":{},"id":"1094","type":"PanTool"},{"attributes":{},"id":"1062","type":"HelpTool"},{"attributes":{},"id":"1098","type":"ResetTool"},{"attributes":{},"id":"1140","type":"Selection"},{"attributes":{},"id":"1095","type":"WheelZoomTool"},{"attributes":{"coordinates":null,"data_source":{"id":"1108"},"glyph":{"id":"1109"},"group":null,"hover_glyph":null,"muted_glyph":{"id":"1111"},"nonselection_glyph":{"id":"1110"},"view":{"id":"1113"}},"id":"1112","type":"GlyphRenderer"},{"attributes":{"overlay":{"id":"1100"}},"id":"1096","type":"BoxZoomTool"},{"attributes":{},"id":"1097","type":"SaveTool"},{"attributes":{"fill_alpha":{"value":0.2},"fill_color":{"value":"olive"},"hatch_alpha":{"value":0.2},"hatch_color":{"value":"olive"},"line_alpha":{"value":0.2},"line_color":{"value":"olive"},"marker":{"value":"square"},"size":{"value":10},"x":{"field":"x"},"y":{"field":"y"}},"id":"1111","type":"Scatter"},{"attributes":{"coordinates":null,"group":null},"id":"1115","type":"Title"},{"attributes":{},"id":"1142","type":"UnionRenderers"},{"attributes":{"tools":[{"id":"1057"},{"id":"1058"},{"id":"1059"},{"id":"1060"},{"id":"1061"},{"id":"1062"}]},"id":"1064","type":"Toolbar"},{"attributes":{},"id":"1143","type":"Selection"},{"attributes":{},"id":"1099","type":"HelpTool"},{"attributes":{"bottom_units":"screen","coordinates":null,"fill_alpha":0.5,"fill_color":"lightgrey","group":null,"left_units":"screen","level":"overlay","line_alpha":1.0,"line_color":"black","line_dash":[4,4],"line_width":2,"right_units":"screen","syncable":false,"top_units":"screen"},"id":"1063","type":"BoxAnnotation"},{"attributes":{"source":{"id":"1108"}},"id":"1113","type":"CDSView"},{"attributes":{},"id":"1146","type":"Selection"},{"attributes":{"coordinates":null,"data_source":{"id":"1071"},"glyph":{"id":"1072"},"group":null,"hover_glyph":null,"muted_glyph":{"id":"1074"},"nonselection_glyph":{"id":"1073"},"view":{"id":"1076"}},"id":"1075","type":"GlyphRenderer"},{"attributes":{"tools":[{"id":"1094"},{"id":"1095"},{"id":"1096"},{"id":"1097"},{"id":"1098"},{"id":"1099"}]},"id":"1101","type":"Toolbar"},{"attributes":{"coordinates":null,"data_source":{"id":"1034"},"glyph":{"id":"1035"},"group":null,"hover_glyph":null,"muted_glyph":{"id":"1037"},"nonselection_glyph":{"id":"1036"},"view":{"id":"1039"}},"id":"1038","type":"GlyphRenderer"},{"attributes":{"bottom_units":"screen","coordinates":null,"fill_alpha":0.5,"fill_color":"lightgrey","group":null,"left_units":"screen","level":"overlay","line_alpha":1.0,"line_color":"black","line_dash":[4,4],"line_width":2,"right_units":"screen","syncable":false,"top_units":"screen"},"id":"1100","type":"BoxAnnotation"},{"attributes":{"source":{"id":"1034"}},"id":"1039","type":"CDSView"},{"attributes":{"data":{"x":[0,1,2,3,4,5,6,7,8,9,10],"y":[10,9,8,7,6,5,4,3,2,1,0]},"selected":{"id":"1143"},"selection_policy":{"id":"1142"}},"id":"1071","type":"ColumnDataSource"},{"attributes":{"fill_alpha":{"value":0.5},"fill_color":{"value":"olive"},"hatch_alpha":{"value":0.5},"hatch_color":{"value":"olive"},"line_alpha":{"value":0.5},"line_color":{"value":"olive"},"marker":{"value":"square"},"size":{"value":10},"x":{"field":"x"},"y":{"field":"y"}},"id":"1109","type":"Scatter"},{"attributes":{"source":{"id":"1071"}},"id":"1076","type":"CDSView"},{"attributes":{"fill_alpha":{"value":0.1},"fill_color":{"value":"navy"},"hatch_alpha":{"value":0.1},"hatch_color":{"value":"navy"},"line_alpha":{"value":0.1},"line_color":{"value":"navy"},"size":{"value":10},"x":{"field":"x"},"y":{"field":"y"}},"id":"1036","type":"Circle"},{"attributes":{"fill_alpha":{"value":0.5},"fill_color":{"value":"navy"},"hatch_alpha":{"value":0.5},"hatch_color":{"value":"navy"},"line_alpha":{"value":0.5},"line_color":{"value":"navy"},"size":{"value":10},"x":{"field":"x"},"y":{"field":"y"}},"id":"1035","type":"Circle"},{"attributes":{},"id":"1080","type":"DataRange1d"},{"attributes":{},"id":"1122","type":"BasicTickFormatter"},{"attributes":{},"id":"1078","type":"DataRange1d"},{"attributes":{"axis":{"id":"1049"},"coordinates":null,"group":null,"ticker":null},"id":"1052","type":"Grid"},{"attributes":{},"id":"1125","type":"BasicTickFormatter"},{"attributes":{},"id":"1087","type":"BasicTicker"},{"attributes":{"coordinates":null,"group":null},"id":"1117","type":"Title"},{"attributes":{},"id":"1082","type":"LinearScale"},{"attributes":{"coordinates":null,"group":null},"id":"1119","type":"Title"},{"attributes":{"below":[{"id":"1012"}],"center":[{"id":"1015"},{"id":"1019"}],"height":250,"left":[{"id":"1016"}],"renderers":[{"id":"1038"}],"title":{"id":"1115"},"toolbar":{"id":"1027"},"width":250,"x_range":{"id":"1004"},"x_scale":{"id":"1008"},"y_range":{"id":"1006"},"y_scale":{"id":"1010"}},"id":"1003","subtype":"Figure","type":"Plot"},{"attributes":{},"id":"1084","type":"LinearScale"},{"attributes":{},"id":"1126","type":"AllLabels"},{"attributes":{},"id":"1123","type":"AllLabels"},{"attributes":{"coordinates":null,"formatter":{"id":"1137"},"group":null,"major_label_policy":{"id":"1138"},"ticker":{"id":"1087"}},"id":"1086","type":"LinearAxis"},{"attributes":{},"id":"1128","type":"BasicTickFormatter"},{"attributes":{"axis":{"id":"1086"},"coordinates":null,"group":null,"ticker":null},"id":"1089","type":"Grid"},{"attributes":{},"id":"1129","type":"AllLabels"},{"attributes":{},"id":"1131","type":"BasicTickFormatter"},{"attributes":{},"id":"1091","type":"BasicTicker"},{"attributes":{"below":[{"id":"1049"}],"center":[{"id":"1052"},{"id":"1056"}],"height":250,"left":[{"id":"1053"}],"renderers":[{"id":"1075"}],"title":{"id":"1117"},"toolbar":{"id":"1064"},"width":250,"x_range":{"id":"1041"},"x_scale":{"id":"1045"},"y_range":{"id":"1043"},"y_scale":{"id":"1047"}},"id":"1040","subtype":"Figure","type":"Plot"},{"attributes":{"coordinates":null,"formatter":{"id":"1134"},"group":null,"major_label_policy":{"id":"1135"},"ticker":{"id":"1091"}},"id":"1090","type":"LinearAxis"},{"attributes":{},"id":"1006","type":"DataRange1d"},{"attributes":{},"id":"1132","type":"AllLabels"},{"attributes":{},"id":"1135","type":"AllLabels"},{"attributes":{},"id":"1004","type":"DataRange1d"},{"attributes":{},"id":"1010","type":"LinearScale"},{"attributes":{"axis":{"id":"1090"},"coordinates":null,"dimension":1,"group":null,"ticker":null},"id":"1093","type":"Grid"},{"attributes":{},"id":"1137","type":"BasicTickFormatter"},{"attributes":{},"id":"1145","type":"UnionRenderers"},{"attributes":{},"id":"1134","type":"BasicTickFormatter"},{"attributes":{"coordinates":null,"formatter":{"id":"1125"},"group":null,"major_label_policy":{"id":"1126"},"ticker":{"id":"1013"}},"id":"1012","type":"LinearAxis"},{"attributes":{"data":{"x":[0,1,2,3,4,5,6,7,8,9,10],"y":[5,4,3,2,1,0,1,2,3,4,5]},"selected":{"id":"1146"},"selection_policy":{"id":"1145"}},"id":"1108","type":"ColumnDataSource"},{"attributes":{},"id":"1138","type":"AllLabels"},{"attributes":{},"id":"1008","type":"LinearScale"},{"attributes":{},"id":"1013","type":"BasicTicker"},{"attributes":{"axis":{"id":"1012"},"coordinates":null,"group":null,"ticker":null},"id":"1015","type":"Grid"},{"attributes":{},"id":"1017","type":"BasicTicker"},{"attributes":{"coordinates":null,"formatter":{"id":"1122"},"group":null,"major_label_policy":{"id":"1123"},"ticker":{"id":"1017"}},"id":"1016","type":"LinearAxis"},{"attributes":{},"id":"1058","type":"WheelZoomTool"},{"attributes":{"axis":{"id":"1016"},"coordinates":null,"dimension":1,"group":null,"ticker":null},"id":"1019","type":"Grid"},{"attributes":{"coordinates":null,"formatter":{"id":"1131"},"group":null,"major_label_policy":{"id":"1132"},"ticker":{"id":"1050"}},"id":"1049","type":"LinearAxis"},{"attributes":{},"id":"1047","type":"LinearScale"},{"attributes":{"fill_alpha":{"value":0.5},"fill_color":{"value":"firebrick"},"hatch_alpha":{"value":0.5},"hatch_color":{"value":"firebrick"},"line_alpha":{"value":0.5},"line_color":{"value":"firebrick"},"marker":{"value":"triangle"},"size":{"value":10},"x":{"field":"x"},"y":{"field":"y"}},"id":"1072","type":"Scatter"},{"attributes":{},"id":"1057","type":"PanTool"},{"attributes":{"tools":[{"id":"1020"},{"id":"1021"},{"id":"1022"},{"id":"1023"},{"id":"1024"},{"id":"1025"}]},"id":"1027","type":"Toolbar"},{"attributes":{"below":[{"id":"1086"}],"center":[{"id":"1089"},{"id":"1093"}],"height":250,"left":[{"id":"1090"}],"renderers":[{"id":"1112"}],"title":{"id":"1119"},"toolbar":{"id":"1101"},"width":250,"x_range":{"id":"1078"},"x_scale":{"id":"1082"},"y_range":{"id":"1080"},"y_scale":{"id":"1084"}},"id":"1077","subtype":"Figure","type":"Plot"},{"attributes":{},"id":"1020","type":"PanTool"},{"attributes":{},"id":"1041","type":"DataRange1d"},{"attributes":{},"id":"1024","type":"ResetTool"},{"attributes":{"data":{"x":[0,1,2,3,4,5,6,7,8,9,10],"y":[0,1,2,3,4,5,6,7,8,9,10]},"selected":{"id":"1140"},"selection_policy":{"id":"1139"}},"id":"1034","type":"ColumnDataSource"},{"attributes":{},"id":"1021","type":"WheelZoomTool"},{"attributes":{},"id":"1045","type":"LinearScale"},{"attributes":{"overlay":{"id":"1026"}},"id":"1022","type":"BoxZoomTool"},{"attributes":{},"id":"1043","type":"DataRange1d"},{"attributes":{},"id":"1023","type":"SaveTool"},{"attributes":{"overlay":{"id":"1063"}},"id":"1059","type":"BoxZoomTool"},{"attributes":{},"id":"1025","type":"HelpTool"},{"attributes":{"axis":{"id":"1053"},"coordinates":null,"dimension":1,"group":null,"ticker":null},"id":"1056","type":"Grid"},{"attributes":{"bottom_units":"screen","coordinates":null,"fill_alpha":0.5,"fill_color":"lightgrey","group":null,"left_units":"screen","level":"overlay","line_alpha":1.0,"line_color":"black","line_dash":[4,4],"line_width":2,"right_units":"screen","syncable":false,"top_units":"screen"},"id":"1026","type":"BoxAnnotation"},{"attributes":{},"id":"1054","type":"BasicTicker"},{"attributes":{"fill_alpha":{"value":0.1},"fill_color":{"value":"firebrick"},"hatch_alpha":{"value":0.1},"hatch_color":{"value":"firebrick"},"line_alpha":{"value":0.1},"line_color":{"value":"firebrick"},"marker":{"value":"triangle"},"size":{"value":10},"x":{"field":"x"},"y":{"field":"y"}},"id":"1073","type":"Scatter"},{"attributes":{"fill_alpha":{"value":0.2},"fill_color":{"value":"navy"},"hatch_alpha":{"value":0.2},"hatch_color":{"value":"navy"},"line_alpha":{"value":0.2},"line_color":{"value":"navy"},"size":{"value":10},"x":{"field":"x"},"y":{"field":"y"}},"id":"1037","type":"Circle"},{"attributes":{},"id":"1050","type":"BasicTicker"},{"attributes":{"fill_alpha":{"value":0.1},"fill_color":{"value":"olive"},"hatch_alpha":{"value":0.1},"hatch_color":{"value":"olive"},"line_alpha":{"value":0.1},"line_color":{"value":"olive"},"marker":{"value":"square"},"size":{"value":10},"x":{"field":"x"},"y":{"field":"y"}},"id":"1110","type":"Scatter"},{"attributes":{},"id":"1060","type":"SaveTool"},{"attributes":{"coordinates":null,"formatter":{"id":"1128"},"group":null,"major_label_policy":{"id":"1129"},"ticker":{"id":"1054"}},"id":"1053","type":"LinearAxis"}],"root_ids":["1114"]},"title":"Bokeh Application","version":"2.4.3"}};
+  const render_items = [{"docid":"73b434f2-1d2a-4fc7-8663-db76463d36b9","root_ids":["1114"],"roots":{"1114":"0efc0463-8d97-4e66-b8c9-35a25fb6c72e"}}];
+  root.Bokeh.embed.embed_items_notebook(docs_json, render_items);
+  }
+  if (root.Bokeh !== undefined) {
+    embed_document(root);
+  } else {
+    let attempts = 0;
+    const timer = setInterval(function(root) {
+      if (root.Bokeh !== undefined) {
+        clearInterval(timer);
+        embed_document(root);
+      } else {
+        attempts++;
+        if (attempts > 100) {
+          clearInterval(timer);
+          console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing");
+        }
+      }
+    }, 10, root)
+  }
+})(window);
+</script>
+</div>
+
+</div>
+
+</div>
+</div>
+
+  </div>
+<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
+<div class="text_cell_render border-box-sizing rendered_html">
+<h3 id="Grid-plots">Grid plots<a class="anchor-link" href="#Grid-plots">&#182;</a></h3><p>Bokeh also provides a <code>gridplot</code> layout in <code>bokeh.layouts</code> for arranging plots in a grid, as show in the example below.</p>
+
+</div>
+</div>
+</div>
+
+  
+
+  <div class="
+      cell border-box-sizing code_cell rendered">
+    <div class="input">
+
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">from</span> <span class="nn">bokeh.layouts</span> <span class="kn">import</span> <span class="n">gridplot</span>
+
+<span class="c1"># create a new plot</span>
+<span class="n">s1</span> <span class="o">=</span> <span class="n">figure</span><span class="p">(</span>
+    <span class="n">width</span><span class="o">=</span><span class="mi">250</span><span class="p">,</span>
+    <span class="n">plot_height</span><span class="o">=</span><span class="mi">250</span>
+<span class="p">)</span>
+<span class="n">s1</span><span class="o">.</span><span class="n">circle</span><span class="p">(</span>
+    <span class="n">x</span><span class="p">,</span>
+    <span class="n">y0</span><span class="p">,</span>
+    <span class="n">size</span><span class="o">=</span><span class="mi">10</span><span class="p">,</span>
+    <span class="n">color</span><span class="o">=</span><span class="s2">&quot;navy&quot;</span><span class="p">,</span>
+    <span class="n">alpha</span><span class="o">=</span><span class="mf">0.5</span>
+<span class="p">)</span>
+
+<span class="c1"># # create a 2nd one</span>
+<span class="n">s2</span> <span class="o">=</span> <span class="n">figure</span><span class="p">(</span>
+    <span class="n">width</span><span class="o">=</span><span class="mi">250</span><span class="p">,</span>
+    <span class="n">plot_height</span><span class="o">=</span><span class="mi">250</span>
+<span class="p">)</span>
+<span class="n">s2</span><span class="o">.</span><span class="n">triangle</span><span class="p">(</span>
+    <span class="n">x</span><span class="p">,</span>
+    <span class="n">y1</span><span class="p">,</span>
+    <span class="n">size</span><span class="o">=</span><span class="mi">10</span><span class="p">,</span>
+    <span class="n">color</span><span class="o">=</span><span class="s2">&quot;firebrick&quot;</span><span class="p">,</span>
+    <span class="n">alpha</span><span class="o">=</span><span class="mf">0.5</span>
+<span class="p">)</span>
+
+<span class="c1"># create the 3rd one</span>
+<span class="n">s3</span> <span class="o">=</span> <span class="n">figure</span><span class="p">(</span>
+    <span class="n">width</span><span class="o">=</span><span class="mi">250</span><span class="p">,</span>
+    <span class="n">plot_height</span><span class="o">=</span><span class="mi">250</span>
+<span class="p">)</span>
+<span class="n">s3</span><span class="o">.</span><span class="n">square</span><span class="p">(</span>
+    <span class="n">x</span><span class="p">,</span>
+    <span class="n">y2</span><span class="p">,</span>
+    <span class="n">size</span><span class="o">=</span><span class="mi">10</span><span class="p">,</span>
+    <span class="n">color</span><span class="o">=</span><span class="s2">&quot;olive&quot;</span><span class="p">,</span>
+    <span class="n">alpha</span><span class="o">=</span><span class="mf">0.5</span>
+<span class="p">)</span>
+
+<span class="c1"># put all the plots in a gridplot</span>
+<span class="n">p</span> <span class="o">=</span> <span class="n">gridplot</span><span class="p">(</span>
+    <span class="p">[</span>
+        <span class="p">[</span><span class="n">s1</span><span class="p">,</span> <span class="n">s2</span><span class="p">],</span>
+        <span class="p">[</span><span class="n">s3</span><span class="p">,</span> <span class="kc">None</span><span class="p">]</span>
+    <span class="p">],</span>
+    <span class="n">toolbar_location</span><span class="o">=</span><span class="kc">None</span>
+<span class="p">)</span>
+
+<span class="c1"># show the results</span>
+<span class="n">show</span><span class="p">(</span><span class="n">p</span><span class="p">)</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+<div class="output_wrapper">
+<div class="output">
+
+
+<div class="output_area">
+
+    
+
+
+<div class="output_html rendered_html output_subarea ">
+
+  <div class="bk-root" id="e814ddc9-a4d2-4efa-a629-aeb5b5cec2e9" data-root-id="1460"></div>
+
+</div>
+
+</div>
+
+<div class="output_area">
+
+    
+
+
+
+
+<div id="4d2ef43a-e6e4-4a50-8fbc-f6dde3b0d4a0"></div>
+<div class="output_subarea output_javascript ">
+<script type="text/javascript">
+var element = $('#4d2ef43a-e6e4-4a50-8fbc-f6dde3b0d4a0');
+(function(root) {
+  function embed_document(root) {
+  const docs_json = {"d9a8aea8-8b96-465f-bb3c-72e8eff4321c":{"defs":[],"roots":{"references":[{"attributes":{"children":[[{"id":"1313"},0,0],[{"id":"1350"},0,1],[{"id":"1387"},1,0]]},"id":"1460","type":"GridBox"},{"attributes":{},"id":"1409","type":"HelpTool"},{"attributes":{},"id":"1351","type":"DataRange1d"},{"attributes":{},"id":"1408","type":"ResetTool"},{"attributes":{"coordinates":null,"group":null},"id":"1424","type":"Title"},{"attributes":{"fill_alpha":{"value":0.1},"fill_color":{"value":"navy"},"hatch_alpha":{"value":0.1},"hatch_color":{"value":"navy"},"line_alpha":{"value":0.1},"line_color":{"value":"navy"},"size":{"value":10},"x":{"field":"x"},"y":{"field":"y"}},"id":"1346","type":"Circle"},{"attributes":{"fill_alpha":{"value":0.5},"fill_color":{"value":"navy"},"hatch_alpha":{"value":0.5},"hatch_color":{"value":"navy"},"line_alpha":{"value":0.5},"line_color":{"value":"navy"},"size":{"value":10},"x":{"field":"x"},"y":{"field":"y"}},"id":"1345","type":"Circle"},{"attributes":{"bottom_units":"screen","coordinates":null,"fill_alpha":0.5,"fill_color":"lightgrey","group":null,"left_units":"screen","level":"overlay","line_alpha":1.0,"line_color":"black","line_dash":[4,4],"line_width":2,"right_units":"screen","syncable":false,"top_units":"screen"},"id":"1336","type":"BoxAnnotation"},{"attributes":{},"id":"1428","type":"AllLabels"},{"attributes":{"below":[{"id":"1322"}],"center":[{"id":"1325"},{"id":"1329"}],"height":250,"left":[{"id":"1326"}],"renderers":[{"id":"1348"}],"title":{"id":"1424"},"toolbar":{"id":"1337"},"toolbar_location":null,"width":250,"x_range":{"id":"1314"},"x_scale":{"id":"1318"},"y_range":{"id":"1316"},"y_scale":{"id":"1320"}},"id":"1313","subtype":"Figure","type":"Plot"},{"attributes":{},"id":"1353","type":"DataRange1d"},{"attributes":{"coordinates":null,"data_source":{"id":"1344"},"glyph":{"id":"1345"},"group":null,"hover_glyph":null,"muted_glyph":{"id":"1347"},"nonselection_glyph":{"id":"1346"},"view":{"id":"1349"}},"id":"1348","type":"GlyphRenderer"},{"attributes":{"bottom_units":"screen","coordinates":null,"fill_alpha":0.5,"fill_color":"lightgrey","group":null,"left_units":"screen","level":"overlay","line_alpha":1.0,"line_color":"black","line_dash":[4,4],"line_width":2,"right_units":"screen","syncable":false,"top_units":"screen"},"id":"1410","type":"BoxAnnotation"},{"attributes":{"below":[{"id":"1396"}],"center":[{"id":"1399"},{"id":"1403"}],"height":250,"left":[{"id":"1400"}],"renderers":[{"id":"1422"}],"title":{"id":"1448"},"toolbar":{"id":"1411"},"toolbar_location":null,"width":250,"x_range":{"id":"1388"},"x_scale":{"id":"1392"},"y_range":{"id":"1390"},"y_scale":{"id":"1394"}},"id":"1387","subtype":"Figure","type":"Plot"},{"attributes":{"tools":[{"id":"1404"},{"id":"1405"},{"id":"1406"},{"id":"1407"},{"id":"1408"},{"id":"1409"}]},"id":"1411","type":"Toolbar"},{"attributes":{},"id":"1316","type":"DataRange1d"},{"attributes":{},"id":"1360","type":"BasicTicker"},{"attributes":{"fill_alpha":{"value":0.2},"fill_color":{"value":"navy"},"hatch_alpha":{"value":0.2},"hatch_color":{"value":"navy"},"line_alpha":{"value":0.2},"line_color":{"value":"navy"},"size":{"value":10},"x":{"field":"x"},"y":{"field":"y"}},"id":"1347","type":"Circle"},{"attributes":{},"id":"1355","type":"LinearScale"},{"attributes":{},"id":"1314","type":"DataRange1d"},{"attributes":{},"id":"1433","type":"Selection"},{"attributes":{},"id":"1357","type":"LinearScale"},{"attributes":{"coordinates":null,"formatter":{"id":"1442"},"group":null,"major_label_policy":{"id":"1443"},"ticker":{"id":"1360"}},"id":"1359","type":"LinearAxis"},{"attributes":{},"id":"1323","type":"BasicTicker"},{"attributes":{},"id":"1430","type":"BasicTickFormatter"},{"attributes":{"axis":{"id":"1359"},"coordinates":null,"group":null,"ticker":null},"id":"1362","type":"Grid"},{"attributes":{},"id":"1432","type":"UnionRenderers"},{"attributes":{},"id":"1318","type":"LinearScale"},{"attributes":{},"id":"1364","type":"BasicTicker"},{"attributes":{"tools":[{"id":"1330"},{"id":"1331"},{"id":"1332"},{"id":"1333"},{"id":"1334"},{"id":"1335"}]},"id":"1337","type":"Toolbar"},{"attributes":{"coordinates":null,"formatter":{"id":"1439"},"group":null,"major_label_policy":{"id":"1440"},"ticker":{"id":"1364"}},"id":"1363","type":"LinearAxis"},{"attributes":{},"id":"1431","type":"AllLabels"},{"attributes":{},"id":"1427","type":"BasicTickFormatter"},{"attributes":{},"id":"1320","type":"LinearScale"},{"attributes":{"coordinates":null,"formatter":{"id":"1430"},"group":null,"major_label_policy":{"id":"1431"},"ticker":{"id":"1323"}},"id":"1322","type":"LinearAxis"},{"attributes":{"coordinates":null,"group":null},"id":"1436","type":"Title"},{"attributes":{"axis":{"id":"1322"},"coordinates":null,"group":null,"ticker":null},"id":"1325","type":"Grid"},{"attributes":{"axis":{"id":"1363"},"coordinates":null,"dimension":1,"group":null,"ticker":null},"id":"1366","type":"Grid"},{"attributes":{},"id":"1439","type":"BasicTickFormatter"},{"attributes":{"fill_alpha":{"value":0.5},"fill_color":{"value":"firebrick"},"hatch_alpha":{"value":0.5},"hatch_color":{"value":"firebrick"},"line_alpha":{"value":0.5},"line_color":{"value":"firebrick"},"marker":{"value":"triangle"},"size":{"value":10},"x":{"field":"x"},"y":{"field":"y"}},"id":"1382","type":"Scatter"},{"attributes":{},"id":"1327","type":"BasicTicker"},{"attributes":{},"id":"1443","type":"AllLabels"},{"attributes":{"coordinates":null,"formatter":{"id":"1427"},"group":null,"major_label_policy":{"id":"1428"},"ticker":{"id":"1327"}},"id":"1326","type":"LinearAxis"},{"attributes":{},"id":"1442","type":"BasicTickFormatter"},{"attributes":{"fill_alpha":{"value":0.2},"fill_color":{"value":"firebrick"},"hatch_alpha":{"value":0.2},"hatch_color":{"value":"firebrick"},"line_alpha":{"value":0.2},"line_color":{"value":"firebrick"},"marker":{"value":"triangle"},"size":{"value":10},"x":{"field":"x"},"y":{"field":"y"}},"id":"1384","type":"Scatter"},{"attributes":{},"id":"1440","type":"AllLabels"},{"attributes":{"fill_alpha":{"value":0.1},"fill_color":{"value":"firebrick"},"hatch_alpha":{"value":0.1},"hatch_color":{"value":"firebrick"},"line_alpha":{"value":0.1},"line_color":{"value":"firebrick"},"marker":{"value":"triangle"},"size":{"value":10},"x":{"field":"x"},"y":{"field":"y"}},"id":"1383","type":"Scatter"},{"attributes":{},"id":"1444","type":"UnionRenderers"},{"attributes":{"bottom_units":"screen","coordinates":null,"fill_alpha":0.5,"fill_color":"lightgrey","group":null,"left_units":"screen","level":"overlay","line_alpha":1.0,"line_color":"black","line_dash":[4,4],"line_width":2,"right_units":"screen","syncable":false,"top_units":"screen"},"id":"1373","type":"BoxAnnotation"},{"attributes":{},"id":"1367","type":"PanTool"},{"attributes":{"axis":{"id":"1326"},"coordinates":null,"dimension":1,"group":null,"ticker":null},"id":"1329","type":"Grid"},{"attributes":{},"id":"1371","type":"ResetTool"},{"attributes":{},"id":"1445","type":"Selection"},{"attributes":{},"id":"1368","type":"WheelZoomTool"},{"attributes":{},"id":"1451","type":"BasicTickFormatter"},{"attributes":{"overlay":{"id":"1373"}},"id":"1369","type":"BoxZoomTool"},{"attributes":{"coordinates":null,"group":null},"id":"1448","type":"Title"},{"attributes":{"data":{"x":[0,1,2,3,4,5,6,7,8,9,10],"y":[0,1,2,3,4,5,6,7,8,9,10]},"selected":{"id":"1433"},"selection_policy":{"id":"1432"}},"id":"1344","type":"ColumnDataSource"},{"attributes":{},"id":"1370","type":"SaveTool"},{"attributes":{"below":[{"id":"1359"}],"center":[{"id":"1362"},{"id":"1366"}],"height":250,"left":[{"id":"1363"}],"renderers":[{"id":"1385"}],"title":{"id":"1436"},"toolbar":{"id":"1374"},"toolbar_location":null,"width":250,"x_range":{"id":"1351"},"x_scale":{"id":"1355"},"y_range":{"id":"1353"},"y_scale":{"id":"1357"}},"id":"1350","subtype":"Figure","type":"Plot"},{"attributes":{},"id":"1455","type":"AllLabels"},{"attributes":{},"id":"1330","type":"PanTool"},{"attributes":{},"id":"1372","type":"HelpTool"},{"attributes":{},"id":"1454","type":"BasicTickFormatter"},{"attributes":{},"id":"1334","type":"ResetTool"},{"attributes":{},"id":"1452","type":"AllLabels"},{"attributes":{},"id":"1331","type":"WheelZoomTool"},{"attributes":{"fill_alpha":{"value":0.1},"fill_color":{"value":"olive"},"hatch_alpha":{"value":0.1},"hatch_color":{"value":"olive"},"line_alpha":{"value":0.1},"line_color":{"value":"olive"},"marker":{"value":"square"},"size":{"value":10},"x":{"field":"x"},"y":{"field":"y"}},"id":"1420","type":"Scatter"},{"attributes":{"overlay":{"id":"1336"}},"id":"1332","type":"BoxZoomTool"},{"attributes":{},"id":"1456","type":"UnionRenderers"},{"attributes":{},"id":"1333","type":"SaveTool"},{"attributes":{},"id":"1457","type":"Selection"},{"attributes":{"fill_alpha":{"value":0.2},"fill_color":{"value":"olive"},"hatch_alpha":{"value":0.2},"hatch_color":{"value":"olive"},"line_alpha":{"value":0.2},"line_color":{"value":"olive"},"marker":{"value":"square"},"size":{"value":10},"x":{"field":"x"},"y":{"field":"y"}},"id":"1421","type":"Scatter"},{"attributes":{},"id":"1335","type":"HelpTool"},{"attributes":{"tools":[{"id":"1367"},{"id":"1368"},{"id":"1369"},{"id":"1370"},{"id":"1371"},{"id":"1372"}]},"id":"1374","type":"Toolbar"},{"attributes":{"source":{"id":"1381"}},"id":"1386","type":"CDSView"},{"attributes":{"data":{"x":[0,1,2,3,4,5,6,7,8,9,10],"y":[10,9,8,7,6,5,4,3,2,1,0]},"selected":{"id":"1445"},"selection_policy":{"id":"1444"}},"id":"1381","type":"ColumnDataSource"},{"attributes":{"source":{"id":"1418"}},"id":"1423","type":"CDSView"},{"attributes":{},"id":"1390","type":"DataRange1d"},{"attributes":{"coordinates":null,"data_source":{"id":"1381"},"glyph":{"id":"1382"},"group":null,"hover_glyph":null,"muted_glyph":{"id":"1384"},"nonselection_glyph":{"id":"1383"},"view":{"id":"1386"}},"id":"1385","type":"GlyphRenderer"},{"attributes":{},"id":"1388","type":"DataRange1d"},{"attributes":{},"id":"1392","type":"LinearScale"},{"attributes":{},"id":"1394","type":"LinearScale"},{"attributes":{},"id":"1397","type":"BasicTicker"},{"attributes":{"coordinates":null,"formatter":{"id":"1454"},"group":null,"major_label_policy":{"id":"1455"},"ticker":{"id":"1397"}},"id":"1396","type":"LinearAxis"},{"attributes":{"axis":{"id":"1396"},"coordinates":null,"group":null,"ticker":null},"id":"1399","type":"Grid"},{"attributes":{},"id":"1401","type":"BasicTicker"},{"attributes":{"coordinates":null,"formatter":{"id":"1451"},"group":null,"major_label_policy":{"id":"1452"},"ticker":{"id":"1401"}},"id":"1400","type":"LinearAxis"},{"attributes":{"source":{"id":"1344"}},"id":"1349","type":"CDSView"},{"attributes":{"axis":{"id":"1400"},"coordinates":null,"dimension":1,"group":null,"ticker":null},"id":"1403","type":"Grid"},{"attributes":{"fill_alpha":{"value":0.5},"fill_color":{"value":"olive"},"hatch_alpha":{"value":0.5},"hatch_color":{"value":"olive"},"line_alpha":{"value":0.5},"line_color":{"value":"olive"},"marker":{"value":"square"},"size":{"value":10},"x":{"field":"x"},"y":{"field":"y"}},"id":"1419","type":"Scatter"},{"attributes":{"data":{"x":[0,1,2,3,4,5,6,7,8,9,10],"y":[5,4,3,2,1,0,1,2,3,4,5]},"selected":{"id":"1457"},"selection_policy":{"id":"1456"}},"id":"1418","type":"ColumnDataSource"},{"attributes":{"coordinates":null,"data_source":{"id":"1418"},"glyph":{"id":"1419"},"group":null,"hover_glyph":null,"muted_glyph":{"id":"1421"},"nonselection_glyph":{"id":"1420"},"view":{"id":"1423"}},"id":"1422","type":"GlyphRenderer"},{"attributes":{},"id":"1404","type":"PanTool"},{"attributes":{},"id":"1405","type":"WheelZoomTool"},{"attributes":{"overlay":{"id":"1410"}},"id":"1406","type":"BoxZoomTool"},{"attributes":{},"id":"1407","type":"SaveTool"}],"root_ids":["1460"]},"title":"Bokeh Application","version":"2.4.3"}};
+  const render_items = [{"docid":"d9a8aea8-8b96-465f-bb3c-72e8eff4321c","root_ids":["1460"],"roots":{"1460":"e814ddc9-a4d2-4efa-a629-aeb5b5cec2e9"}}];
+  root.Bokeh.embed.embed_items_notebook(docs_json, render_items);
+  }
+  if (root.Bokeh !== undefined) {
+    embed_document(root);
+  } else {
+    let attempts = 0;
+    const timer = setInterval(function(root) {
+      if (root.Bokeh !== undefined) {
+        clearInterval(timer);
+        embed_document(root);
+      } else {
+        attempts++;
+        if (attempts > 100) {
+          clearInterval(timer);
+          console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing");
+        }
+      }
+    }, 10, root)
+  }
+})(window);
+</script>
+</div>
+
+</div>
+
+</div>
+</div>
+
+  </div>
+