j1-template 2022.4.2 → 2022.4.3

data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_bokeh_08_graph_and_network_plots.html

@@ -0,0 +1,689 @@
+  <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="8.-Graph-and-Network-Plots">8. Graph and Network Plots<a class="anchor-link" href="#8.-Graph-and-Network-Plots">&#182;</a></h2><p>This chapter will cover how to plot network node/link graphs in Bokeh using NetworkX. For information on creating graph renderers from a low level, see <a href="https://docs.bokeh.org/en/latest/docs/user_guide/graph.html">Visualizing Network Graphs</a></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">show</span><span class="p">,</span> <span class="n">output_notebook</span>
+<span class="kn">from</span> <span class="nn">bokeh.plotting</span> <span class="kn">import</span> <span class="n">figure</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="44d8f2a3-3f3a-4627-8e19-b6e6a721da25"></div>
+<div class="output_subarea output_javascript ">
+<script type="text/javascript">
+var element = $('#44d8f2a3-3f3a-4627-8e19-b6e6a721da25');
+(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">
+<h3 id="Plotting-from-NetworkX">Plotting from NetworkX<a class="anchor-link" href="#Plotting-from-NetworkX">&#182;</a></h3><p>The easiest way to plot network graphs with Bokeh is to use the <code>from_networkx</code> function. This function accepts any NetworkX graph and returns a Bokeh <code>GraphRenderer</code> that can be added to a plot. The <code>GraphRenderer</code> has <code>node_renderer</code> and <code>edge_renderer</code> properties that contain the Bokeh renderers that draw the nodes and edges, respectively.</p>
+<p>The example below shows a Bokeh plot of <code>nx.desargues_graph()</code>, setting some of the node and edge properties.</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">import</span> <span class="nn">networkx</span> <span class="k">as</span> <span class="nn">nx</span>
+<span class="kn">from</span> <span class="nn">bokeh.models</span> <span class="kn">import</span> <span class="n">Range1d</span><span class="p">,</span> <span class="n">Plot</span>
+<span class="kn">from</span> <span class="nn">bokeh.plotting</span> <span class="kn">import</span> <span class="n">from_networkx</span>
+
+<span class="n">G</span> <span class="o">=</span> <span class="n">nx</span><span class="o">.</span><span class="n">desargues_graph</span><span class="p">()</span>
+
+<span class="c1"># We could use figure here but don&#39;t want all the axes and titles</span>
+<span class="n">plot</span> <span class="o">=</span> <span class="n">Plot</span><span class="p">(</span><span class="n">x_range</span><span class="o">=</span><span class="n">Range1d</span><span class="p">(</span><span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="mi">2</span><span class="p">),</span> <span class="n">y_range</span><span class="o">=</span><span class="n">Range1d</span><span class="p">(</span><span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="mi">2</span><span class="p">))</span>
+
+<span class="c1"># Create a Bokeh graph from the NetworkX input using nx.spring_layout</span>
+<span class="n">graph</span> <span class="o">=</span> <span class="n">from_networkx</span><span class="p">(</span><span class="n">G</span><span class="p">,</span> <span class="n">nx</span><span class="o">.</span><span class="n">spring_layout</span><span class="p">,</span> <span class="n">scale</span><span class="o">=</span><span class="mf">1.8</span><span class="p">,</span> <span class="n">center</span><span class="o">=</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">))</span>
+<span class="n">plot</span><span class="o">.</span><span class="n">renderers</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="n">graph</span><span class="p">)</span>
+
+<span class="c1"># Set some of the default node glyph (Circle) properties</span>
+<span class="n">graph</span><span class="o">.</span><span class="n">node_renderer</span><span class="o">.</span><span class="n">glyph</span><span class="o">.</span><span class="n">update</span><span class="p">(</span><span class="n">size</span><span class="o">=</span><span class="mi">20</span><span class="p">,</span> <span class="n">fill_color</span><span class="o">=</span><span class="s2">&quot;orange&quot;</span><span class="p">)</span>
+
+<span class="c1"># Set some edge properties too</span>
+<span class="n">graph</span><span class="o">.</span><span class="n">edge_renderer</span><span class="o">.</span><span class="n">glyph</span><span class="o">.</span><span class="n">line_dash</span> <span class="o">=</span> <span class="p">[</span><span class="mi">2</span><span class="p">,</span><span class="mi">2</span><span class="p">]</span>
+
+<span class="n">show</span><span class="p">(</span><span class="n">plot</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="3dc41e74-32d1-470e-a4ba-62c8a826ef98" data-root-id="1005"></div>
+
+</div>
+
+</div>
+
+<div class="output_area">
+
+    
+
+
+
+
+<div id="ef55b253-b279-40b8-a29b-739a4b7adcf4"></div>
+<div class="output_subarea output_javascript ">
+<script type="text/javascript">
+var element = $('#ef55b253-b279-40b8-a29b-739a4b7adcf4');
+(function(root) {
+  function embed_document(root) {
+  const docs_json = {"dda4bd43-30d7-4285-952e-1e1ace0209b9":{"defs":[],"roots":{"references":[{"attributes":{"renderers":[{"id":"1008"}],"title":{"id":"1028"},"toolbar":{"id":"1029"},"x_range":{"id":"1003"},"x_scale":{"id":"1026"},"y_range":{"id":"1004"},"y_scale":{"id":"1027"}},"id":"1005","type":"Plot"},{"attributes":{"end":2,"start":-2},"id":"1004","type":"Range1d"},{"attributes":{"coordinates":null,"group":null},"id":"1028","type":"Title"},{"attributes":{},"id":"1043","type":"Selection"},{"attributes":{"fill_color":{"value":"orange"},"size":{"value":20}},"id":"1009","type":"Circle"},{"attributes":{},"id":"1026","type":"LinearScale"},{"attributes":{"data":{"index":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]},"selected":{"id":"1041"},"selection_policy":{"id":"1040"}},"id":"1010","type":"ColumnDataSource"},{"attributes":{"coordinates":null,"data_source":{"id":"1010"},"glyph":{"id":"1009"},"group":null,"hover_glyph":null,"view":{"id":"1012"}},"id":"1011","type":"GlyphRenderer"},{"attributes":{"end":2,"start":-2},"id":"1003","type":"Range1d"},{"attributes":{},"id":"1042","type":"UnionRenderers"},{"attributes":{},"id":"1029","type":"Toolbar"},{"attributes":{},"id":"1039","type":"NodesOnly"},{"attributes":{"line_dash":{"value":[2,2]}},"id":"1013","type":"MultiLine"},{"attributes":{"source":{"id":"1010"}},"id":"1012","type":"CDSView"},{"attributes":{"coordinates":null,"data_source":{"id":"1014"},"glyph":{"id":"1013"},"group":null,"hover_glyph":null,"view":{"id":"1016"}},"id":"1015","type":"GlyphRenderer"},{"attributes":{"data":{"end":[1,19,5,2,16,3,11,4,14,5,9,6,7,15,8,18,9,13,10,11,19,12,13,17,14,15,16,17,18,19],"start":[0,0,0,1,1,2,2,3,3,4,4,5,6,6,7,7,8,8,9,10,10,11,12,12,13,14,15,16,17,18]},"selected":{"id":"1043"},"selection_policy":{"id":"1042"}},"id":"1014","type":"ColumnDataSource"},{"attributes":{"source":{"id":"1014"}},"id":"1016","type":"CDSView"},{"attributes":{},"id":"1040","type":"UnionRenderers"},{"attributes":{},"id":"1041","type":"Selection"},{"attributes":{"coordinates":null,"edge_renderer":{"id":"1015"},"group":null,"inspection_policy":{"id":"1039"},"layout_provider":{"id":"1017"},"node_renderer":{"id":"1011"},"selection_policy":{"id":"1038"}},"id":"1008","type":"GraphRenderer"},{"attributes":{},"id":"1038","type":"NodesOnly"},{"attributes":{"graph_layout":{"0":[-1.1697191846420025,0.1173515414514772],"1":[-0.5057291920168522,-0.3301324932847872],"10":[0.5719975650503157,1.2631756750706118],"11":[1.313965098165436,0.7475138055892768],"12":[1.8,-0.26851044191988316],"13":[1.1664816220087437,-0.0959596247815966],"14":[0.13372947509740538,-0.3165161780939663],"15":[-0.5166063416282884,-1.3155585748399368],"16":[0.13524130085257552,-1.3686876436910196],"17":[1.2070076032178527,-1.1800792705596796],"18":[0.531189057176616,-0.7356351111910615],"19":[-0.10731944301045775,0.2842846361400993],"2":[0.19771666011850458,0.655978787503953],"3":[-0.5378765089311547,0.7138724373001639],"4":[-1.2210293189531412,1.1698194541672995],"5":[-1.7999176418742517,0.22483292849859016],"6":[-1.2970256277412264,-0.7904361743869417],"7":[-0.22598047907768307,-0.6182646310380427],"8":[0.48865747492340633,0.4088624653288193],"9":[-0.1647821187357951,1.4340884127366273]}},"id":"1017","type":"StaticLayoutProvider"},{"attributes":{},"id":"1027","type":"LinearScale"}],"root_ids":["1005"]},"title":"Bokeh Application","version":"2.4.3"}};
+  const render_items = [{"docid":"dda4bd43-30d7-4285-952e-1e1ace0209b9","root_ids":["1005"],"roots":{"1005":"3dc41e74-32d1-470e-a4ba-62c8a826ef98"}}];
+  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="Adding-Extra-Data-Columns.">Adding Extra Data Columns.<a class="anchor-link" href="#Adding-Extra-Data-Columns.">&#182;</a></h3><p>The <code>node_renderer</code> and <code>edge_renderer</code> properties of the graph renderer each have a <code>data_source</code> that is a standard <code>ColumnDataSource</code> that you can add new data to, e.g. to drive a hover tool, or to specify colors for the renderer. The example below demonstates both.</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.models</span> <span class="kn">import</span> <span class="n">HoverTool</span>
+<span class="kn">from</span> <span class="nn">bokeh.palettes</span> <span class="kn">import</span> <span class="n">Category20_20</span>
+
+<span class="n">G</span> <span class="o">=</span> <span class="n">nx</span><span class="o">.</span><span class="n">desargues_graph</span><span class="p">()</span> <span class="c1"># always 20 nodes</span>
+
+<span class="c1"># We could use figure here but don&#39;t want all the axes and titles</span>
+<span class="n">plot</span> <span class="o">=</span> <span class="n">Plot</span><span class="p">(</span><span class="n">x_range</span><span class="o">=</span><span class="n">Range1d</span><span class="p">(</span><span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="mi">2</span><span class="p">),</span> <span class="n">y_range</span><span class="o">=</span><span class="n">Range1d</span><span class="p">(</span><span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="mi">2</span><span class="p">))</span>
+
+<span class="c1"># Create a Bokeh graph from the NetworkX input using nx.spring_layout</span>
+<span class="n">graph</span> <span class="o">=</span> <span class="n">from_networkx</span><span class="p">(</span><span class="n">G</span><span class="p">,</span> <span class="n">nx</span><span class="o">.</span><span class="n">spring_layout</span><span class="p">,</span> <span class="n">scale</span><span class="o">=</span><span class="mf">1.8</span><span class="p">,</span> <span class="n">center</span><span class="o">=</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">))</span>
+<span class="n">plot</span><span class="o">.</span><span class="n">renderers</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="n">graph</span><span class="p">)</span>
+
+<span class="c1"># Add some new columns to the node renderer data source</span>
+<span class="n">graph</span><span class="o">.</span><span class="n">node_renderer</span><span class="o">.</span><span class="n">data_source</span><span class="o">.</span><span class="n">data</span><span class="p">[</span><span class="s1">&#39;index&#39;</span><span class="p">]</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="nb">len</span><span class="p">(</span><span class="n">G</span><span class="p">)))</span>
+<span class="n">graph</span><span class="o">.</span><span class="n">node_renderer</span><span class="o">.</span><span class="n">data_source</span><span class="o">.</span><span class="n">data</span><span class="p">[</span><span class="s1">&#39;colors&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="n">Category20_20</span>
+
+<span class="n">graph</span><span class="o">.</span><span class="n">node_renderer</span><span class="o">.</span><span class="n">glyph</span><span class="o">.</span><span class="n">update</span><span class="p">(</span><span class="n">size</span><span class="o">=</span><span class="mi">20</span><span class="p">,</span> <span class="n">fill_color</span><span class="o">=</span><span class="s2">&quot;colors&quot;</span><span class="p">)</span>
+
+<span class="n">plot</span><span class="o">.</span><span class="n">add_tools</span><span class="p">(</span><span class="n">HoverTool</span><span class="p">(</span><span class="n">tooltips</span><span class="o">=</span><span class="s2">&quot;index: @index&quot;</span><span class="p">))</span>
+
+<span class="n">show</span><span class="p">(</span><span class="n">plot</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="9e407a9f-45bb-4eb3-909f-73567b47b0e0" data-root-id="1156"></div>
+
+</div>
+
+</div>
+
+<div class="output_area">
+
+    
+
+
+
+
+<div id="13aea0c4-5e67-497e-a333-bfa55abdd736"></div>
+<div class="output_subarea output_javascript ">
+<script type="text/javascript">
+var element = $('#13aea0c4-5e67-497e-a333-bfa55abdd736');
+(function(root) {
+  function embed_document(root) {
+  const docs_json = {"70f4192d-91f5-4be2-805d-96bc7590ba43":{"defs":[],"roots":{"references":[{"attributes":{"renderers":[{"id":"1159"}],"title":{"id":"1203"},"toolbar":{"id":"1182"},"x_range":{"id":"1154"},"x_scale":{"id":"1201"},"y_range":{"id":"1155"},"y_scale":{"id":"1202"}},"id":"1156","type":"Plot"},{"attributes":{"coordinates":null,"group":null},"id":"1203","type":"Title"},{"attributes":{"tools":[{"id":"1181"}]},"id":"1182","type":"Toolbar"},{"attributes":{"fill_color":{"field":"colors"},"size":{"value":20}},"id":"1160","type":"Circle"},{"attributes":{"data":{"colors":["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"],"index":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]},"selected":{"id":"1216"},"selection_policy":{"id":"1215"}},"id":"1161","type":"ColumnDataSource"},{"attributes":{"coordinates":null,"data_source":{"id":"1161"},"glyph":{"id":"1160"},"group":null,"hover_glyph":null,"view":{"id":"1163"}},"id":"1162","type":"GlyphRenderer"},{"attributes":{},"id":"1216","type":"Selection"},{"attributes":{},"id":"1202","type":"LinearScale"},{"attributes":{},"id":"1217","type":"UnionRenderers"},{"attributes":{},"id":"1164","type":"MultiLine"},{"attributes":{},"id":"1218","type":"Selection"},{"attributes":{"end":2,"start":-2},"id":"1154","type":"Range1d"},{"attributes":{"source":{"id":"1161"}},"id":"1163","type":"CDSView"},{"attributes":{"coordinates":null,"data_source":{"id":"1165"},"glyph":{"id":"1164"},"group":null,"hover_glyph":null,"view":{"id":"1167"}},"id":"1166","type":"GlyphRenderer"},{"attributes":{"end":2,"start":-2},"id":"1155","type":"Range1d"},{"attributes":{"data":{"end":[1,19,5,2,16,3,11,4,14,5,9,6,7,15,8,18,9,13,10,11,19,12,13,17,14,15,16,17,18,19],"start":[0,0,0,1,1,2,2,3,3,4,4,5,6,6,7,7,8,8,9,10,10,11,12,12,13,14,15,16,17,18]},"selected":{"id":"1218"},"selection_policy":{"id":"1217"}},"id":"1165","type":"ColumnDataSource"},{"attributes":{},"id":"1201","type":"LinearScale"},{"attributes":{},"id":"1213","type":"NodesOnly"},{"attributes":{},"id":"1214","type":"NodesOnly"},{"attributes":{"callback":null,"tooltips":"index: @index"},"id":"1181","type":"HoverTool"},{"attributes":{},"id":"1215","type":"UnionRenderers"},{"attributes":{"graph_layout":{"0":[0.3887589353717005,-1.6463395451957297],"1":[1.3846658828275602,-0.9888706384388465],"10":[-0.3973296183215949,-1.1207122973322676],"11":[0.6918050631068496,-0.4881255395997623],"12":[0.06673400378400342,0.6367856992493871],"13":[-0.372190404725156,1.6549514681639979],"14":[0.7271639261632288,1.7891590455979385],"15":[0.3829194321748063,1.1235084976407805],"16":[0.8809036502719901,0.06648880890937106],"17":[-0.30216164550127095,-0.16880764210676003],"18":[-1.3471863197399672,-0.8450704388811822],"19":[-0.7146315969319081,-1.8],"2":[1.7420569157882306,-0.20269855379172452],"3":[1.348410997257696,0.8368982830124566],"4":[0.29447020642838123,0.1620331779290003],"5":[-0.06027364250284553,-0.6417199604835925],"6":[-0.6946893384592774,0.48328883898157654],"7":[-1.7429904289732252,0.20194290100155507],"8":[-1.3800370391698809,1.0068962141713491],"9":[-0.8963989788493182,-0.05960831882754418]}},"id":"1168","type":"StaticLayoutProvider"},{"attributes":{"source":{"id":"1165"}},"id":"1167","type":"CDSView"},{"attributes":{"coordinates":null,"edge_renderer":{"id":"1166"},"group":null,"inspection_policy":{"id":"1214"},"layout_provider":{"id":"1168"},"node_renderer":{"id":"1162"},"selection_policy":{"id":"1213"}},"id":"1159","type":"GraphRenderer"}],"root_ids":["1156"]},"title":"Bokeh Application","version":"2.4.3"}};
+  const render_items = [{"docid":"70f4192d-91f5-4be2-805d-96bc7590ba43","root_ids":["1156"],"roots":{"1156":"9e407a9f-45bb-4eb3-909f-73567b47b0e0"}}];
+  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="Inspection-and-Selection-Policies">Inspection and Selection Policies<a class="anchor-link" href="#Inspection-and-Selection-Policies">&#182;</a></h3><p>Bokeh graph renderers have <code>inspection_policy</code> and <code>selection_policy</code> properties. These can be used to control how hover inspections highlight the graph, or how selection tools make selections. These properties may be set to any of the inpection policies in <code>bokeh.graphs</code>. For instance, if a user hovers over a node, you may wish to highlight all the associated edges as well. This can be accomplished by setting the inspection policy:</p>
+<div class="highlight"><pre><span></span><span class="n">graph</span><span class="o">.</span><span class="n">inspection_policy</span> <span class="o">=</span> <span class="n">NodesAndLinkedEdges</span><span class="p">()</span>
+</pre></div>
+<p>as the example below demonstrates.</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.models.graphs</span> <span class="kn">import</span> <span class="n">NodesAndLinkedEdges</span>
+<span class="kn">from</span> <span class="nn">bokeh.models</span> <span class="kn">import</span> <span class="n">Circle</span><span class="p">,</span> <span class="n">HoverTool</span><span class="p">,</span> <span class="n">MultiLine</span>
+
+<span class="n">G</span> <span class="o">=</span> <span class="n">nx</span><span class="o">.</span><span class="n">gnm_random_graph</span><span class="p">(</span><span class="mi">15</span><span class="p">,</span> <span class="mi">30</span><span class="p">)</span>
+
+<span class="c1"># We could use figure here but don&#39;t want all the axes and titles</span>
+<span class="n">plot</span> <span class="o">=</span> <span class="n">Plot</span><span class="p">(</span><span class="n">x_range</span><span class="o">=</span><span class="n">Range1d</span><span class="p">(</span><span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="mi">2</span><span class="p">),</span> <span class="n">y_range</span><span class="o">=</span><span class="n">Range1d</span><span class="p">(</span><span class="o">-</span><span class="mi">2</span> <span class="p">,</span><span class="mi">2</span><span class="p">))</span>
+
+<span class="c1"># Create a Bokeh graph from the NetworkX input using nx.spring_layout</span>
+<span class="n">graph</span> <span class="o">=</span> <span class="n">from_networkx</span><span class="p">(</span><span class="n">G</span><span class="p">,</span> <span class="n">nx</span><span class="o">.</span><span class="n">spring_layout</span><span class="p">,</span> <span class="n">scale</span><span class="o">=</span><span class="mf">1.8</span><span class="p">,</span> <span class="n">center</span><span class="o">=</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">))</span>
+<span class="n">plot</span><span class="o">.</span><span class="n">renderers</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="n">graph</span><span class="p">)</span>
+
+<span class="c1"># Blue circles for nodes, and light grey lines for edges</span>
+<span class="n">graph</span><span class="o">.</span><span class="n">node_renderer</span><span class="o">.</span><span class="n">glyph</span> <span class="o">=</span> <span class="n">Circle</span><span class="p">(</span><span class="n">size</span><span class="o">=</span><span class="mi">25</span><span class="p">,</span> <span class="n">fill_color</span><span class="o">=</span><span class="s1">&#39;#2b83ba&#39;</span><span class="p">)</span>
+<span class="n">graph</span><span class="o">.</span><span class="n">edge_renderer</span><span class="o">.</span><span class="n">glyph</span> <span class="o">=</span> <span class="n">MultiLine</span><span class="p">(</span><span class="n">line_color</span><span class="o">=</span><span class="s2">&quot;#cccccc&quot;</span><span class="p">,</span> <span class="n">line_alpha</span><span class="o">=</span><span class="mf">0.8</span><span class="p">,</span> <span class="n">line_width</span><span class="o">=</span><span class="mi">2</span><span class="p">)</span>
+
+<span class="c1"># green hover for both nodes and edges</span>
+<span class="n">graph</span><span class="o">.</span><span class="n">node_renderer</span><span class="o">.</span><span class="n">hover_glyph</span> <span class="o">=</span> <span class="n">Circle</span><span class="p">(</span><span class="n">size</span><span class="o">=</span><span class="mi">25</span><span class="p">,</span> <span class="n">fill_color</span><span class="o">=</span><span class="s1">&#39;#abdda4&#39;</span><span class="p">)</span>
+<span class="n">graph</span><span class="o">.</span><span class="n">edge_renderer</span><span class="o">.</span><span class="n">hover_glyph</span> <span class="o">=</span> <span class="n">MultiLine</span><span class="p">(</span><span class="n">line_color</span><span class="o">=</span><span class="s1">&#39;#abdda4&#39;</span><span class="p">,</span> <span class="n">line_width</span><span class="o">=</span><span class="mi">4</span><span class="p">)</span>
+
+<span class="c1"># When we hover over nodes, highlight adjecent edges too</span>
+<span class="n">graph</span><span class="o">.</span><span class="n">inspection_policy</span> <span class="o">=</span> <span class="n">NodesAndLinkedEdges</span><span class="p">()</span>
+
+<span class="n">plot</span><span class="o">.</span><span class="n">add_tools</span><span class="p">(</span><span class="n">HoverTool</span><span class="p">(</span><span class="n">tooltips</span><span class="o">=</span><span class="kc">None</span><span class="p">))</span>
+
+<span class="n">show</span><span class="p">(</span><span class="n">plot</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="b16c5955-5218-48ed-a187-6639f276eb5a" data-root-id="1331"></div>
+
+</div>
+
+</div>
+
+<div class="output_area">
+
+    
+
+
+
+
+<div id="3046513c-3029-4ec8-973e-1ec14beb7cb1"></div>
+<div class="output_subarea output_javascript ">
+<script type="text/javascript">
+var element = $('#3046513c-3029-4ec8-973e-1ec14beb7cb1');
+(function(root) {
+  function embed_document(root) {
+  const docs_json = {"5837c009-ac4b-4df6-9471-bd6b0d156b93":{"defs":[],"roots":{"references":[{"attributes":{"renderers":[{"id":"1334"}],"title":{"id":"1406"},"toolbar":{"id":"1367"},"x_range":{"id":"1329"},"x_scale":{"id":"1404"},"y_range":{"id":"1330"},"y_scale":{"id":"1405"}},"id":"1331","type":"Plot"},{"attributes":{},"id":"1405","type":"LinearScale"},{"attributes":{"data":{"index":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14]},"selected":{"id":"1418"},"selection_policy":{"id":"1417"}},"id":"1336","type":"ColumnDataSource"},{"attributes":{"end":2,"start":-2},"id":"1329","type":"Range1d"},{"attributes":{"fill_color":{"value":"#abdda4"},"size":{"value":25}},"id":"1354","type":"Circle"},{"attributes":{"coordinates":null,"data_source":{"id":"1336"},"glyph":{"id":"1344"},"group":null,"hover_glyph":{"id":"1354"},"view":{"id":"1338"}},"id":"1337","type":"GlyphRenderer"},{"attributes":{"tools":[{"id":"1366"}]},"id":"1367","type":"Toolbar"},{"attributes":{"source":{"id":"1336"}},"id":"1338","type":"CDSView"},{"attributes":{"coordinates":null,"group":null},"id":"1406","type":"Title"},{"attributes":{},"id":"1364","type":"NodesAndLinkedEdges"},{"attributes":{"line_color":{"value":"#abdda4"},"line_width":{"value":4}},"id":"1359","type":"MultiLine"},{"attributes":{"coordinates":null,"data_source":{"id":"1340"},"glyph":{"id":"1349"},"group":null,"hover_glyph":{"id":"1359"},"view":{"id":"1342"}},"id":"1341","type":"GlyphRenderer"},{"attributes":{},"id":"1417","type":"UnionRenderers"},{"attributes":{},"id":"1404","type":"LinearScale"},{"attributes":{"data":{"end":[12,6,3,13,14,13,12,6,12,13,14,11,4,9,12,6,5,13,13,10,8,11,14,9,10,11,11,12,12,14],"start":[0,0,0,0,1,1,1,2,2,2,3,3,3,4,4,4,4,4,5,5,6,7,7,7,9,9,10,10,11,11]},"selected":{"id":"1420"},"selection_policy":{"id":"1419"}},"id":"1340","type":"ColumnDataSource"},{"attributes":{"line_alpha":{"value":0.8},"line_color":{"value":"#cccccc"},"line_width":{"value":2}},"id":"1349","type":"MultiLine"},{"attributes":{},"id":"1418","type":"Selection"},{"attributes":{"end":2,"start":-2},"id":"1330","type":"Range1d"},{"attributes":{"callback":null,"tooltips":null},"id":"1366","type":"HoverTool"},{"attributes":{"source":{"id":"1340"}},"id":"1342","type":"CDSView"},{"attributes":{},"id":"1420","type":"Selection"},{"attributes":{},"id":"1419","type":"UnionRenderers"},{"attributes":{"graph_layout":{"0":[-0.4833281450441862,-0.23863243391835653],"1":[0.3568648536585474,0.4296361393270891],"10":[0.5777886700411361,0.3425039218236356],"11":[0.6058554964558718,-0.22501431324155174],"12":[-0.011015526964565358,0.17495954159548935],"13":[-0.35612534445256916,0.4355367121728019],"14":[0.8083581253680809,-0.3905562287059248],"2":[-0.8172910990866016,0.32376247349591875],"3":[0.1570810044630715,-0.5546962694608853],"4":[-0.1343029889959071,-0.022563134782480503],"5":[0.0271896160460196,0.7351840882226742],"6":[-1.046165508232688,-0.20491107595703953],"7":[1.2781533699086591,-0.3722266628588799],"8":[-1.8,-0.4515456212125839],"9":[0.8369374768351313,0.018562863500093597]}},"id":"1343","type":"StaticLayoutProvider"},{"attributes":{},"id":"1416","type":"NodesOnly"},{"attributes":{"coordinates":null,"edge_renderer":{"id":"1341"},"group":null,"inspection_policy":{"id":"1364"},"layout_provider":{"id":"1343"},"node_renderer":{"id":"1337"},"selection_policy":{"id":"1416"}},"id":"1334","type":"GraphRenderer"},{"attributes":{"fill_color":{"value":"#2b83ba"},"size":{"value":25}},"id":"1344","type":"Circle"}],"root_ids":["1331"]},"title":"Bokeh Application","version":"2.4.3"}};
+  const render_items = [{"docid":"5837c009-ac4b-4df6-9471-bd6b0d156b93","root_ids":["1331"],"roots":{"1331":"b16c5955-5218-48ed-a187-6639f276eb5a"}}];
+  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>
+