j1-template 2022.5.0.rc1 → 2022.5.0.rc4

data/lib/starter_web/pages/public/_jupyter/notebooks/textbooks/Mark Interactions.html

@@ -0,0 +1,613 @@
+  <div class="cell text_cell">
+    <button class="js-nbinteract-widget">
+      Loading widgets...
+    </button>
+  </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">__future__</span> <span class="kn">import</span> <span class="n">print_function</span>
+<span class="kn">from</span> <span class="nn">bqplot</span> <span class="kn">import</span> <span class="o">*</span>
+<span class="kn">import</span> <span class="nn">numpy</span> <span class="k">as</span> <span class="nn">np</span>
+<span class="kn">import</span> <span class="nn">pandas</span> <span class="k">as</span> <span class="nn">pd</span>
+<span class="kn">from</span> <span class="nn">ipywidgets</span> <span class="kn">import</span> <span class="n">Layout</span><span class="p">,</span> <span class="n">Dropdown</span><span class="p">,</span> <span class="n">Button</span>
+<span class="kn">from</span> <span class="nn">ipywidgets</span> <span class="kn">import</span> <span class="n">Image</span> <span class="k">as</span> <span class="n">ImageIpy</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">
+<h2 id="Scatter-Chart">Scatter Chart<a class="anchor-link" href="#Scatter-Chart">&#182;</a></h2>
+</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">
+<h4 id="Scatter-Chart-Selections">Scatter Chart Selections<a class="anchor-link" href="#Scatter-Chart-Selections">&#182;</a></h4><p>Click a point on the <code>Scatter</code> plot to select it. Now, run the cell below to check the selection. After you've done this, try holding the <code>ctrl</code> (or <code>command</code> key on Mac) and clicking another point. Clicking the background will reset the selection.</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_sc</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</span>
+<span class="n">y_sc</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</span>
+
+<span class="n">x_data</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">arange</span><span class="p">(</span><span class="mi">20</span><span class="p">)</span>
+<span class="n">y_data</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">randn</span><span class="p">(</span><span class="mi">20</span><span class="p">)</span>
+
+<span class="n">scatter_chart</span> <span class="o">=</span> <span class="n">Scatter</span><span class="p">(</span>
+    <span class="n">x</span><span class="o">=</span><span class="n">x_data</span><span class="p">,</span>
+    <span class="n">y</span><span class="o">=</span><span class="n">y_data</span><span class="p">,</span>
+    <span class="n">scales</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;x&quot;</span><span class="p">:</span> <span class="n">x_sc</span><span class="p">,</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="n">y_sc</span><span class="p">},</span>
+    <span class="n">colors</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;dodgerblue&quot;</span><span class="p">],</span>
+    <span class="n">interactions</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;click&quot;</span><span class="p">:</span> <span class="s2">&quot;select&quot;</span><span class="p">},</span>
+    <span class="n">selected_style</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;opacity&quot;</span><span class="p">:</span> <span class="mf">1.0</span><span class="p">,</span> <span class="s2">&quot;fill&quot;</span><span class="p">:</span> <span class="s2">&quot;DarkOrange&quot;</span><span class="p">,</span> <span class="s2">&quot;stroke&quot;</span><span class="p">:</span> <span class="s2">&quot;Red&quot;</span><span class="p">},</span>
+    <span class="n">unselected_style</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;opacity&quot;</span><span class="p">:</span> <span class="mf">0.5</span><span class="p">},</span>
+<span class="p">)</span>
+
+<span class="n">ax_x</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="n">x_sc</span><span class="p">)</span>
+<span class="n">ax_y</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="n">y_sc</span><span class="p">,</span> <span class="n">orientation</span><span class="o">=</span><span class="s2">&quot;vertical&quot;</span><span class="p">,</span> <span class="n">tick_format</span><span class="o">=</span><span class="s2">&quot;0.2f&quot;</span><span class="p">)</span>
+
+<span class="n">Figure</span><span class="p">(</span><span class="n">marks</span><span class="o">=</span><span class="p">[</span><span class="n">scatter_chart</span><span class="p">],</span> <span class="n">axes</span><span class="o">=</span><span class="p">[</span><span class="n">ax_x</span><span class="p">,</span> <span class="n">ax_y</span><span class="p">])</span>
+</pre></div>
+
+    </div>
+</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">scatter_chart</span><span class="o">.</span><span class="n">selected</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">
+<p>Alternately, the <code>selected</code> attribute can be directly set on the Python side (try running the cell 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="n">scatter_chart</span><span class="o">.</span><span class="n">selected</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</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">
+<h4 id="Scatter-Chart-Interactions-and-Tooltips">Scatter Chart Interactions and Tooltips<a class="anchor-link" href="#Scatter-Chart-Interactions-and-Tooltips">&#182;</a></h4>
+</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_sc</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</span>
+<span class="n">y_sc</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</span>
+
+<span class="n">x_data</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">arange</span><span class="p">(</span><span class="mi">20</span><span class="p">)</span>
+<span class="n">y_data</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">randn</span><span class="p">(</span><span class="mi">20</span><span class="p">)</span>
+
+<span class="n">dd</span> <span class="o">=</span> <span class="n">Dropdown</span><span class="p">(</span><span class="n">options</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;First&quot;</span><span class="p">,</span> <span class="s2">&quot;Second&quot;</span><span class="p">,</span> <span class="s2">&quot;Third&quot;</span><span class="p">,</span> <span class="s2">&quot;Fourth&quot;</span><span class="p">])</span>
+<span class="n">scatter_chart</span> <span class="o">=</span> <span class="n">Scatter</span><span class="p">(</span>
+    <span class="n">x</span><span class="o">=</span><span class="n">x_data</span><span class="p">,</span>
+    <span class="n">y</span><span class="o">=</span><span class="n">y_data</span><span class="p">,</span>
+    <span class="n">scales</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;x&quot;</span><span class="p">:</span> <span class="n">x_sc</span><span class="p">,</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="n">y_sc</span><span class="p">},</span>
+    <span class="n">colors</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;dodgerblue&quot;</span><span class="p">],</span>
+    <span class="n">names</span><span class="o">=</span><span class="n">np</span><span class="o">.</span><span class="n">arange</span><span class="p">(</span><span class="mi">100</span><span class="p">,</span> <span class="mi">200</span><span class="p">),</span>
+    <span class="n">names_unique</span><span class="o">=</span><span class="kc">False</span><span class="p">,</span>
+    <span class="n">display_names</span><span class="o">=</span><span class="kc">False</span><span class="p">,</span>
+    <span class="n">display_legend</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span>
+    <span class="n">labels</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;Blue&quot;</span><span class="p">],</span>
+<span class="p">)</span>
+<span class="n">ins</span> <span class="o">=</span> <span class="n">Button</span><span class="p">(</span><span class="n">icon</span><span class="o">=</span><span class="s2">&quot;fa-legal&quot;</span><span class="p">)</span>
+<span class="n">scatter_chart</span><span class="o">.</span><span class="n">tooltip</span> <span class="o">=</span> <span class="n">ins</span>
+<span class="n">line</span> <span class="o">=</span> <span class="n">Lines</span><span class="p">(</span><span class="n">x</span><span class="o">=</span><span class="n">x_data</span><span class="p">,</span> <span class="n">y</span><span class="o">=</span><span class="n">y_data</span><span class="p">,</span> <span class="n">scales</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;x&quot;</span><span class="p">:</span> <span class="n">x_sc</span><span class="p">,</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="n">y_sc</span><span class="p">},</span> <span class="n">colors</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;dodgerblue&quot;</span><span class="p">])</span>
+<span class="n">scatter_chart2</span> <span class="o">=</span> <span class="n">Scatter</span><span class="p">(</span>
+    <span class="n">x</span><span class="o">=</span><span class="n">x_data</span><span class="p">,</span>
+    <span class="n">y</span><span class="o">=</span><span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">randn</span><span class="p">(</span><span class="mi">20</span><span class="p">),</span>
+    <span class="n">scales</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;x&quot;</span><span class="p">:</span> <span class="n">x_sc</span><span class="p">,</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="n">y_sc</span><span class="p">},</span>
+    <span class="n">colors</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;orangered&quot;</span><span class="p">],</span>
+    <span class="n">tooltip</span><span class="o">=</span><span class="n">dd</span><span class="p">,</span>
+    <span class="n">names</span><span class="o">=</span><span class="n">np</span><span class="o">.</span><span class="n">arange</span><span class="p">(</span><span class="mi">100</span><span class="p">,</span> <span class="mi">200</span><span class="p">),</span>
+    <span class="n">names_unique</span><span class="o">=</span><span class="kc">False</span><span class="p">,</span>
+    <span class="n">display_names</span><span class="o">=</span><span class="kc">False</span><span class="p">,</span>
+    <span class="n">display_legend</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span>
+    <span class="n">labels</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;Red&quot;</span><span class="p">],</span>
+<span class="p">)</span>
+
+<span class="n">ax_x</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="n">x_sc</span><span class="p">)</span>
+<span class="n">ax_y</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="n">y_sc</span><span class="p">,</span> <span class="n">orientation</span><span class="o">=</span><span class="s2">&quot;vertical&quot;</span><span class="p">,</span> <span class="n">tick_format</span><span class="o">=</span><span class="s2">&quot;0.2f&quot;</span><span class="p">)</span>
+
+<span class="n">fig</span> <span class="o">=</span> <span class="n">Figure</span><span class="p">(</span><span class="n">marks</span><span class="o">=</span><span class="p">[</span><span class="n">scatter_chart</span><span class="p">,</span> <span class="n">scatter_chart2</span><span class="p">,</span> <span class="n">line</span><span class="p">],</span> <span class="n">axes</span><span class="o">=</span><span class="p">[</span><span class="n">ax_x</span><span class="p">,</span> <span class="n">ax_y</span><span class="p">])</span>
+<span class="n">fig</span>
+</pre></div>
+
+    </div>
+</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="k">def</span> <span class="nf">print_event</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">target</span><span class="p">):</span>
+    <span class="nb">print</span><span class="p">(</span><span class="n">target</span><span class="p">)</span>
+
+
+<span class="c1"># Adding call back to scatter events</span>
+<span class="c1"># print custom mssg on hover and background click of Blue Scatter</span>
+<span class="n">scatter_chart</span><span class="o">.</span><span class="n">on_hover</span><span class="p">(</span><span class="n">print_event</span><span class="p">)</span>
+<span class="n">scatter_chart</span><span class="o">.</span><span class="n">on_background_click</span><span class="p">(</span><span class="n">print_event</span><span class="p">)</span>
+
+<span class="c1"># print custom mssg on click of an element or legend of Red Scatter</span>
+<span class="n">scatter_chart2</span><span class="o">.</span><span class="n">on_element_click</span><span class="p">(</span><span class="n">print_event</span><span class="p">)</span>
+<span class="n">scatter_chart2</span><span class="o">.</span><span class="n">on_legend_click</span><span class="p">(</span><span class="n">print_event</span><span class="p">)</span>
+<span class="n">line</span><span class="o">.</span><span class="n">on_element_click</span><span class="p">(</span><span class="n">print_event</span><span class="p">)</span>
+</pre></div>
+
+    </div>
+</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="c1"># Changing interaction from hover to click for tooltip</span>
+<span class="n">scatter_chart</span><span class="o">.</span><span class="n">interactions</span> <span class="o">=</span> <span class="p">{</span><span class="s2">&quot;click&quot;</span><span class="p">:</span> <span class="s2">&quot;tooltip&quot;</span><span class="p">}</span>
+</pre></div>
+
+    </div>
+</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="c1"># Adding figure as tooltip</span>
+<span class="n">x_sc</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</span>
+<span class="n">y_sc</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</span>
+
+<span class="n">x_data</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">arange</span><span class="p">(</span><span class="mi">10</span><span class="p">)</span>
+<span class="n">y_data</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">randn</span><span class="p">(</span><span class="mi">10</span><span class="p">)</span>
+
+<span class="n">lc</span> <span class="o">=</span> <span class="n">Lines</span><span class="p">(</span><span class="n">x</span><span class="o">=</span><span class="n">x_data</span><span class="p">,</span> <span class="n">y</span><span class="o">=</span><span class="n">y_data</span><span class="p">,</span> <span class="n">scales</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;x&quot;</span><span class="p">:</span> <span class="n">x_sc</span><span class="p">,</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="n">y_sc</span><span class="p">})</span>
+<span class="n">ax_x</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="n">x_sc</span><span class="p">)</span>
+<span class="n">ax_y</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="n">y_sc</span><span class="p">,</span> <span class="n">orientation</span><span class="o">=</span><span class="s2">&quot;vertical&quot;</span><span class="p">,</span> <span class="n">tick_format</span><span class="o">=</span><span class="s2">&quot;0.2f&quot;</span><span class="p">)</span>
+<span class="n">tooltip_fig</span> <span class="o">=</span> <span class="n">Figure</span><span class="p">(</span><span class="n">marks</span><span class="o">=</span><span class="p">[</span><span class="n">lc</span><span class="p">],</span> <span class="n">axes</span><span class="o">=</span><span class="p">[</span><span class="n">ax_x</span><span class="p">,</span> <span class="n">ax_y</span><span class="p">],</span> <span class="n">layout</span><span class="o">=</span><span class="n">Layout</span><span class="p">(</span><span class="n">min_width</span><span class="o">=</span><span class="s2">&quot;600px&quot;</span><span class="p">))</span>
+
+<span class="n">scatter_chart</span><span class="o">.</span><span class="n">tooltip</span> <span class="o">=</span> <span class="n">tooltip_fig</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">
+<h2 id="Image">Image<a class="anchor-link" href="#Image">&#182;</a></h2><p>For images, <code>on_element_click</code> returns the location of the mouse click.</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">i</span> <span class="o">=</span> <span class="n">ImageIpy</span><span class="o">.</span><span class="n">from_file</span><span class="p">(</span><span class="n">os</span><span class="o">.</span><span class="n">path</span><span class="o">.</span><span class="n">abspath</span><span class="p">(</span><span class="s2">&quot;../data_files/trees.jpg&quot;</span><span class="p">))</span>
+<span class="n">bqi</span> <span class="o">=</span> <span class="n">Image</span><span class="p">(</span><span class="n">image</span><span class="o">=</span><span class="n">i</span><span class="p">,</span> <span class="n">scales</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;x&quot;</span><span class="p">:</span> <span class="n">x_sc</span><span class="p">,</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="n">y_sc</span><span class="p">},</span> <span class="n">x</span><span class="o">=</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">),</span> <span class="n">y</span><span class="o">=</span><span class="p">(</span><span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">))</span>
+
+<span class="n">fig_image</span> <span class="o">=</span> <span class="n">Figure</span><span class="p">(</span><span class="n">marks</span><span class="o">=</span><span class="p">[</span><span class="n">bqi</span><span class="p">],</span> <span class="n">axes</span><span class="o">=</span><span class="p">[</span><span class="n">ax_x</span><span class="p">,</span> <span class="n">ax_y</span><span class="p">])</span>
+<span class="n">fig_image</span>
+</pre></div>
+
+    </div>
+</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">bqi</span><span class="o">.</span><span class="n">on_element_click</span><span class="p">(</span><span class="n">print_event</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">
+<h2 id="Line-Chart">Line Chart<a class="anchor-link" href="#Line-Chart">&#182;</a></h2>
+</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="c1"># Adding default tooltip to Line Chart</span>
+<span class="n">x_sc</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</span>
+<span class="n">y_sc</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</span>
+
+<span class="n">x_data</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">arange</span><span class="p">(</span><span class="mi">100</span><span class="p">)</span>
+<span class="n">y_data</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">randn</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span> <span class="mi">100</span><span class="p">)</span>
+
+<span class="n">def_tt</span> <span class="o">=</span> <span class="n">Tooltip</span><span class="p">(</span>
+    <span class="n">fields</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">,</span> <span class="s2">&quot;index&quot;</span><span class="p">],</span> <span class="n">formats</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;&quot;</span><span class="p">,</span> <span class="s2">&quot;.2f&quot;</span><span class="p">],</span> <span class="n">labels</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;id&quot;</span><span class="p">,</span> <span class="s2">&quot;line_num&quot;</span><span class="p">]</span>
+<span class="p">)</span>
+<span class="n">line_chart</span> <span class="o">=</span> <span class="n">Lines</span><span class="p">(</span>
+    <span class="n">x</span><span class="o">=</span><span class="n">x_data</span><span class="p">,</span>
+    <span class="n">y</span><span class="o">=</span><span class="n">y_data</span><span class="p">,</span>
+    <span class="n">scales</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;x&quot;</span><span class="p">:</span> <span class="n">x_sc</span><span class="p">,</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="n">y_sc</span><span class="p">},</span>
+    <span class="n">tooltip</span><span class="o">=</span><span class="n">def_tt</span><span class="p">,</span>
+    <span class="n">display_legend</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span>
+    <span class="n">labels</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;line 1&quot;</span><span class="p">,</span> <span class="s2">&quot;line 2&quot;</span><span class="p">,</span> <span class="s2">&quot;line 3&quot;</span><span class="p">],</span>
+<span class="p">)</span>
+
+<span class="n">ax_x</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="n">x_sc</span><span class="p">)</span>
+<span class="n">ax_y</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="n">y_sc</span><span class="p">,</span> <span class="n">orientation</span><span class="o">=</span><span class="s2">&quot;vertical&quot;</span><span class="p">,</span> <span class="n">tick_format</span><span class="o">=</span><span class="s2">&quot;0.2f&quot;</span><span class="p">)</span>
+
+<span class="n">Figure</span><span class="p">(</span><span class="n">marks</span><span class="o">=</span><span class="p">[</span><span class="n">line_chart</span><span class="p">],</span> <span class="n">axes</span><span class="o">=</span><span class="p">[</span><span class="n">ax_x</span><span class="p">,</span> <span class="n">ax_y</span><span class="p">])</span>
+</pre></div>
+
+    </div>
+</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="c1"># Adding call back to print event when legend or the line is clicked</span>
+<span class="n">line_chart</span><span class="o">.</span><span class="n">on_legend_click</span><span class="p">(</span><span class="n">print_event</span><span class="p">)</span>
+<span class="n">line_chart</span><span class="o">.</span><span class="n">on_element_click</span><span class="p">(</span><span class="n">print_event</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">
+<h2 id="Bar-Chart">Bar Chart<a class="anchor-link" href="#Bar-Chart">&#182;</a></h2>
+</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="c1"># Adding interaction to select bar on click for Bar Chart</span>
+<span class="n">x_sc</span> <span class="o">=</span> <span class="n">OrdinalScale</span><span class="p">()</span>
+<span class="n">y_sc</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</span>
+
+<span class="n">x_data</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">arange</span><span class="p">(</span><span class="mi">10</span><span class="p">)</span>
+<span class="n">y_data</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">randn</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">10</span><span class="p">)</span>
+
+<span class="n">bar_chart</span> <span class="o">=</span> <span class="n">Bars</span><span class="p">(</span>
+    <span class="n">x</span><span class="o">=</span><span class="n">x_data</span><span class="p">,</span>
+    <span class="n">y</span><span class="o">=</span><span class="p">[</span><span class="n">y_data</span><span class="p">[</span><span class="mi">0</span><span class="p">,</span> <span class="p">:]</span><span class="o">.</span><span class="n">tolist</span><span class="p">(),</span> <span class="n">y_data</span><span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="p">:]</span><span class="o">.</span><span class="n">tolist</span><span class="p">()],</span>
+    <span class="n">scales</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;x&quot;</span><span class="p">:</span> <span class="n">x_sc</span><span class="p">,</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="n">y_sc</span><span class="p">},</span>
+    <span class="n">interactions</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;click&quot;</span><span class="p">:</span> <span class="s2">&quot;select&quot;</span><span class="p">},</span>
+    <span class="n">selected_style</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;stroke&quot;</span><span class="p">:</span> <span class="s2">&quot;orange&quot;</span><span class="p">,</span> <span class="s2">&quot;fill&quot;</span><span class="p">:</span> <span class="s2">&quot;red&quot;</span><span class="p">},</span>
+    <span class="n">labels</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;Level 1&quot;</span><span class="p">,</span> <span class="s2">&quot;Level 2&quot;</span><span class="p">],</span>
+    <span class="n">display_legend</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span>
+<span class="p">)</span>
+<span class="n">ax_x</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="n">x_sc</span><span class="p">)</span>
+<span class="n">ax_y</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="n">y_sc</span><span class="p">,</span> <span class="n">orientation</span><span class="o">=</span><span class="s2">&quot;vertical&quot;</span><span class="p">,</span> <span class="n">tick_format</span><span class="o">=</span><span class="s2">&quot;0.2f&quot;</span><span class="p">)</span>
+
+<span class="n">Figure</span><span class="p">(</span><span class="n">marks</span><span class="o">=</span><span class="p">[</span><span class="n">bar_chart</span><span class="p">],</span> <span class="n">axes</span><span class="o">=</span><span class="p">[</span><span class="n">ax_x</span><span class="p">,</span> <span class="n">ax_y</span><span class="p">])</span>
+</pre></div>
+
+    </div>
+</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="c1"># Adding a tooltip on hover in addition to select on click</span>
+<span class="n">def_tt</span> <span class="o">=</span> <span class="n">Tooltip</span><span class="p">(</span><span class="n">fields</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;x&quot;</span><span class="p">,</span> <span class="s2">&quot;y&quot;</span><span class="p">],</span> <span class="n">formats</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;&quot;</span><span class="p">,</span> <span class="s2">&quot;.2f&quot;</span><span class="p">])</span>
+<span class="n">bar_chart</span><span class="o">.</span><span class="n">tooltip</span> <span class="o">=</span> <span class="n">def_tt</span>
+<span class="n">bar_chart</span><span class="o">.</span><span class="n">interactions</span> <span class="o">=</span> <span class="p">{</span>
+    <span class="s2">&quot;legend_hover&quot;</span><span class="p">:</span> <span class="s2">&quot;highlight_axes&quot;</span><span class="p">,</span>
+    <span class="s2">&quot;hover&quot;</span><span class="p">:</span> <span class="s2">&quot;tooltip&quot;</span><span class="p">,</span>
+    <span class="s2">&quot;click&quot;</span><span class="p">:</span> <span class="s2">&quot;select&quot;</span><span class="p">,</span>
+<span class="p">}</span>
+</pre></div>
+
+    </div>
+</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="c1"># Changing tooltip to be on click</span>
+<span class="n">bar_chart</span><span class="o">.</span><span class="n">interactions</span> <span class="o">=</span> <span class="p">{</span><span class="s2">&quot;click&quot;</span><span class="p">:</span> <span class="s2">&quot;tooltip&quot;</span><span class="p">}</span>
+</pre></div>
+
+    </div>
+</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="c1"># Call back on legend being clicked</span>
+<span class="n">bar_chart</span><span class="o">.</span><span class="n">type</span> <span class="o">=</span> <span class="s2">&quot;grouped&quot;</span>
+<span class="n">bar_chart</span><span class="o">.</span><span class="n">on_legend_click</span><span class="p">(</span><span class="n">print_event</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">
+<h2 id="Histogram">Histogram<a class="anchor-link" href="#Histogram">&#182;</a></h2>
+</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="c1"># Adding tooltip for Histogram</span>
+<span class="n">x_sc</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</span>
+<span class="n">y_sc</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</span>
+
+<span class="n">sample_data</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">randn</span><span class="p">(</span><span class="mi">100</span><span class="p">)</span>
+
+<span class="n">def_tt</span> <span class="o">=</span> <span class="n">Tooltip</span><span class="p">(</span><span class="n">formats</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;&quot;</span><span class="p">,</span> <span class="s2">&quot;.2f&quot;</span><span class="p">],</span> <span class="n">fields</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;count&quot;</span><span class="p">,</span> <span class="s2">&quot;midpoint&quot;</span><span class="p">])</span>
+<span class="n">hist</span> <span class="o">=</span> <span class="n">Hist</span><span class="p">(</span>
+    <span class="n">sample</span><span class="o">=</span><span class="n">sample_data</span><span class="p">,</span>
+    <span class="n">scales</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;sample&quot;</span><span class="p">:</span> <span class="n">x_sc</span><span class="p">,</span> <span class="s2">&quot;count&quot;</span><span class="p">:</span> <span class="n">y_sc</span><span class="p">},</span>
+    <span class="n">tooltip</span><span class="o">=</span><span class="n">def_tt</span><span class="p">,</span>
+    <span class="n">display_legend</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span>
+    <span class="n">labels</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;Test Hist&quot;</span><span class="p">],</span>
+    <span class="n">select_bars</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span>
+<span class="p">)</span>
+<span class="n">ax_x</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="n">x_sc</span><span class="p">,</span> <span class="n">tick_format</span><span class="o">=</span><span class="s2">&quot;0.2f&quot;</span><span class="p">)</span>
+<span class="n">ax_y</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="n">y_sc</span><span class="p">,</span> <span class="n">orientation</span><span class="o">=</span><span class="s2">&quot;vertical&quot;</span><span class="p">,</span> <span class="n">tick_format</span><span class="o">=</span><span class="s2">&quot;0.2f&quot;</span><span class="p">)</span>
+
+<span class="n">Figure</span><span class="p">(</span><span class="n">marks</span><span class="o">=</span><span class="p">[</span><span class="n">hist</span><span class="p">],</span> <span class="n">axes</span><span class="o">=</span><span class="p">[</span><span class="n">ax_x</span><span class="p">,</span> <span class="n">ax_y</span><span class="p">])</span>
+</pre></div>
+
+    </div>
+</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="c1"># Changing tooltip to be displayed on click</span>
+<span class="n">hist</span><span class="o">.</span><span class="n">interactions</span> <span class="o">=</span> <span class="p">{</span><span class="s2">&quot;click&quot;</span><span class="p">:</span> <span class="s2">&quot;tooltip&quot;</span><span class="p">}</span>
+</pre></div>
+
+    </div>
+</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="c1"># Changing tooltip to be on click of legend</span>
+<span class="n">hist</span><span class="o">.</span><span class="n">interactions</span> <span class="o">=</span> <span class="p">{</span><span class="s2">&quot;legend_click&quot;</span><span class="p">:</span> <span class="s2">&quot;tooltip&quot;</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">
+<h2 id="Pie-Chart">Pie Chart<a class="anchor-link" href="#Pie-Chart">&#182;</a></h2>
+</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>Set up a pie chart with click to show the tooltip.</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">pie_data</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">abs</span><span class="p">(</span><span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">randn</span><span class="p">(</span><span class="mi">10</span><span class="p">))</span>
+
+<span class="n">sc</span> <span class="o">=</span> <span class="n">ColorScale</span><span class="p">(</span><span class="n">scheme</span><span class="o">=</span><span class="s2">&quot;Reds&quot;</span><span class="p">)</span>
+<span class="n">tooltip_widget</span> <span class="o">=</span> <span class="n">Tooltip</span><span class="p">(</span>
+    <span class="n">fields</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;size&quot;</span><span class="p">,</span> <span class="s2">&quot;index&quot;</span><span class="p">,</span> <span class="s2">&quot;color&quot;</span><span class="p">],</span> <span class="n">formats</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;0.2f&quot;</span><span class="p">,</span> <span class="s2">&quot;&quot;</span><span class="p">,</span> <span class="s2">&quot;0.2f&quot;</span><span class="p">]</span>
+<span class="p">)</span>
+<span class="n">pie</span> <span class="o">=</span> <span class="n">Pie</span><span class="p">(</span>
+    <span class="n">sizes</span><span class="o">=</span><span class="n">pie_data</span><span class="p">,</span>
+    <span class="n">scales</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;color&quot;</span><span class="p">:</span> <span class="n">sc</span><span class="p">},</span>
+    <span class="n">color</span><span class="o">=</span><span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">randn</span><span class="p">(</span><span class="mi">10</span><span class="p">),</span>
+    <span class="n">tooltip</span><span class="o">=</span><span class="n">tooltip_widget</span><span class="p">,</span>
+    <span class="n">interactions</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;click&quot;</span><span class="p">:</span> <span class="s2">&quot;tooltip&quot;</span><span class="p">},</span>
+    <span class="n">selected_style</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;fill&quot;</span><span class="p">:</span> <span class="s2">&quot;red&quot;</span><span class="p">},</span>
+<span class="p">)</span>
+
+<span class="n">pie</span><span class="o">.</span><span class="n">selected_style</span> <span class="o">=</span> <span class="p">{</span><span class="s2">&quot;opacity&quot;</span><span class="p">:</span> <span class="s2">&quot;1&quot;</span><span class="p">,</span> <span class="s2">&quot;stroke&quot;</span><span class="p">:</span> <span class="s2">&quot;white&quot;</span><span class="p">,</span> <span class="s2">&quot;stroke-width&quot;</span><span class="p">:</span> <span class="s2">&quot;2&quot;</span><span class="p">}</span>
+<span class="n">pie</span><span class="o">.</span><span class="n">unselected_style</span> <span class="o">=</span> <span class="p">{</span><span class="s2">&quot;opacity&quot;</span><span class="p">:</span> <span class="s2">&quot;0.2&quot;</span><span class="p">}</span>
+
+<span class="n">Figure</span><span class="p">(</span><span class="n">marks</span><span class="o">=</span><span class="p">[</span><span class="n">pie</span><span class="p">])</span>
+</pre></div>
+
+    </div>
+</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="c1"># Changing interaction to select on click and tooltip on hover</span>
+<span class="n">pie</span><span class="o">.</span><span class="n">interactions</span> <span class="o">=</span> <span class="p">{</span><span class="s2">&quot;click&quot;</span><span class="p">:</span> <span class="s2">&quot;select&quot;</span><span class="p">,</span> <span class="s2">&quot;hover&quot;</span><span class="p">:</span> <span class="s2">&quot;tooltip&quot;</span><span class="p">}</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+  </div>
+