j1-template 2022.5.0.rc1 → 2022.5.0.rc4

data/lib/starter_web/pages/public/_jupyter/notebooks/textbooks/Interaction Layer.html

@@ -0,0 +1,1372 @@
+  <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">import</span> <span class="nn">pandas</span> <span class="k">as</span> <span class="nn">pd</span>
+<span class="kn">import</span> <span class="nn">numpy</span> <span class="k">as</span> <span class="nn">np</span>
+
+<span class="n">symbol</span> <span class="o">=</span> <span class="s2">&quot;Security 1&quot;</span>
+<span class="n">symbol2</span> <span class="o">=</span> <span class="s2">&quot;Security 2&quot;</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">price_data</span> <span class="o">=</span> <span class="n">pd</span><span class="o">.</span><span class="n">DataFrame</span><span class="p">(</span>
+    <span class="n">np</span><span class="o">.</span><span class="n">cumsum</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">150</span><span class="p">,</span> <span class="mi">2</span><span class="p">)</span><span class="o">.</span><span class="n">dot</span><span class="p">([[</span><span class="mf">0.5</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">],</span> <span class="p">[</span><span class="mf">0.4</span><span class="p">,</span> <span class="mf">1.0</span><span class="p">]]),</span> <span class="n">axis</span><span class="o">=</span><span class="mi">0</span><span class="p">)</span> <span class="o">+</span> <span class="mi">100</span><span class="p">,</span>
+    <span class="n">columns</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;Security 1&quot;</span><span class="p">,</span> <span class="s2">&quot;Security 2&quot;</span><span class="p">],</span>
+    <span class="n">index</span><span class="o">=</span><span class="n">pd</span><span class="o">.</span><span class="n">date_range</span><span class="p">(</span><span class="n">start</span><span class="o">=</span><span class="s2">&quot;01-01-2007&quot;</span><span class="p">,</span> <span class="n">periods</span><span class="o">=</span><span class="mi">150</span><span class="p">),</span>
+<span class="p">)</span>
+
+<span class="n">dates_actual</span> <span class="o">=</span> <span class="n">price_data</span><span class="o">.</span><span class="n">index</span><span class="o">.</span><span class="n">values</span>
+<span class="n">prices</span> <span class="o">=</span> <span class="n">price_data</span><span class="p">[</span><span class="n">symbol</span><span class="p">]</span><span class="o">.</span><span class="n">values</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="kn">from</span> <span class="nn">bqplot</span> <span class="kn">import</span> <span class="n">DateScale</span><span class="p">,</span> <span class="n">LinearScale</span><span class="p">,</span> <span class="n">Axis</span><span class="p">,</span> <span class="n">Lines</span><span class="p">,</span> <span class="n">Scatter</span><span class="p">,</span> <span class="n">Bars</span><span class="p">,</span> <span class="n">Hist</span><span class="p">,</span> <span class="n">Figure</span>
+<span class="kn">from</span> <span class="nn">bqplot.interacts</span> <span class="kn">import</span> <span class="p">(</span>
+    <span class="n">FastIntervalSelector</span><span class="p">,</span>
+    <span class="n">IndexSelector</span><span class="p">,</span>
+    <span class="n">BrushIntervalSelector</span><span class="p">,</span>
+    <span class="n">BrushSelector</span><span class="p">,</span>
+    <span class="n">MultiSelector</span><span class="p">,</span>
+    <span class="n">LassoSelector</span><span class="p">,</span>
+    <span class="n">PanZoom</span><span class="p">,</span>
+    <span class="n">HandDraw</span><span class="p">,</span>
+<span class="p">)</span>
+<span class="kn">from</span> <span class="nn">traitlets</span> <span class="kn">import</span> <span class="n">link</span>
+
+<span class="kn">from</span> <span class="nn">ipywidgets</span> <span class="kn">import</span> <span class="n">ToggleButtons</span><span class="p">,</span> <span class="n">VBox</span><span class="p">,</span> <span class="n">HTML</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">
+<h1 id="Line-Chart-Selectors">Line Chart Selectors<a class="anchor-link" href="#Line-Chart-Selectors">&#182;</a></h1>
+</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="Fast-Interval-Selector">Fast Interval Selector<a class="anchor-link" href="#Fast-Interval-Selector">&#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">## First we define a Figure</span>
+<span class="n">dt_x_fast</span> <span class="o">=</span> <span class="n">DateScale</span><span class="p">()</span>
+<span class="n">lin_y</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</span>
+
+<span class="n">x_ax</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">label</span><span class="o">=</span><span class="s2">&quot;Index&quot;</span><span class="p">,</span> <span class="n">scale</span><span class="o">=</span><span class="n">dt_x_fast</span><span class="p">)</span>
+<span class="n">x_ay</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">label</span><span class="o">=</span><span class="p">(</span><span class="n">symbol</span> <span class="o">+</span> <span class="s2">&quot; Price&quot;</span><span class="p">),</span> <span class="n">scale</span><span class="o">=</span><span class="n">lin_y</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">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">dates_actual</span><span class="p">,</span> <span class="n">y</span><span class="o">=</span><span class="n">prices</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">dt_x_fast</span><span class="p">,</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="n">lin_y</span><span class="p">},</span> <span class="n">colors</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;orange&quot;</span><span class="p">]</span>
+<span class="p">)</span>
+<span class="n">lc_2</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">dates_actual</span><span class="p">[</span><span class="mi">50</span><span class="p">:],</span>
+    <span class="n">y</span><span class="o">=</span><span class="n">prices</span><span class="p">[</span><span class="mi">50</span><span class="p">:]</span> <span class="o">+</span> <span class="mi">2</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">dt_x_fast</span><span class="p">,</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="n">lin_y</span><span class="p">},</span>
+    <span class="n">colors</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;blue&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">## Next we define the type of selector we would like</span>
+<span class="n">intsel_fast</span> <span class="o">=</span> <span class="n">FastIntervalSelector</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="n">dt_x_fast</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">lc_2</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">## Now, we define a function that will be called when the FastIntervalSelector is interacted with</span>
+<span class="k">def</span> <span class="nf">fast_interval_change_callback</span><span class="p">(</span><span class="n">change</span><span class="p">):</span>
+    <span class="n">db_fast</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="s2">&quot;The selected period is &quot;</span> <span class="o">+</span> <span class="nb">str</span><span class="p">(</span><span class="n">change</span><span class="o">.</span><span class="n">new</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">## Now we connect the selectors to that function</span>
+<span class="n">intsel_fast</span><span class="o">.</span><span class="n">observe</span><span class="p">(</span><span class="n">fast_interval_change_callback</span><span class="p">,</span> <span class="n">names</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;selected&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">## We use the HTML widget to see the value of what we are selecting and modify it when an interaction is performed</span>
+<span class="c1">## on the selector</span>
+<span class="n">db_fast</span> <span class="o">=</span> <span class="n">HTML</span><span class="p">()</span>
+<span class="n">db_fast</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="s2">&quot;The selected period is &quot;</span> <span class="o">+</span> <span class="nb">str</span><span class="p">(</span><span class="n">intsel_fast</span><span class="o">.</span><span class="n">selected</span><span class="p">)</span>
+
+<span class="n">fig_fast_intsel</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">lc_2</span><span class="p">],</span>
+    <span class="n">axes</span><span class="o">=</span><span class="p">[</span><span class="n">x_ax</span><span class="p">,</span> <span class="n">x_ay</span><span class="p">],</span>
+    <span class="n">title</span><span class="o">=</span><span class="s2">&quot;Fast Interval Selector Example&quot;</span><span class="p">,</span>
+    <span class="n">interaction</span><span class="o">=</span><span class="n">intsel_fast</span><span class="p">,</span>
+<span class="p">)</span>  <span class="c1"># This is where we assign the interaction to this particular Figure</span>
+
+<span class="n">VBox</span><span class="p">([</span><span class="n">db_fast</span><span class="p">,</span> <span class="n">fig_fast_intsel</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="Index-Selector">Index Selector<a class="anchor-link" href="#Index-Selector">&#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="n">db_index</span> <span class="o">=</span> <span class="n">HTML</span><span class="p">(</span><span class="n">value</span><span class="o">=</span><span class="s2">&quot;[]&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">## Now we try a selector made to select all the y-values associated with a single x-value</span>
+<span class="n">index_sel</span> <span class="o">=</span> <span class="n">IndexSelector</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="n">dt_x_fast</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">lc_2</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">## Now, we define a function that will be called when the selectors are interacted with</span>
+<span class="k">def</span> <span class="nf">index_change_callback</span><span class="p">(</span><span class="n">change</span><span class="p">):</span>
+    <span class="n">db_index</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="s2">&quot;The selected date is &quot;</span> <span class="o">+</span> <span class="nb">str</span><span class="p">(</span><span class="n">change</span><span class="o">.</span><span class="n">new</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">index_sel</span><span class="o">.</span><span class="n">observe</span><span class="p">(</span><span class="n">index_change_callback</span><span class="p">,</span> <span class="n">names</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;selected&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="n">fig_index_sel</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">lc_2</span><span class="p">],</span>
+    <span class="n">axes</span><span class="o">=</span><span class="p">[</span><span class="n">x_ax</span><span class="p">,</span> <span class="n">x_ay</span><span class="p">],</span>
+    <span class="n">title</span><span class="o">=</span><span class="s2">&quot;Index Selector Example&quot;</span><span class="p">,</span>
+    <span class="n">interaction</span><span class="o">=</span><span class="n">index_sel</span><span class="p">,</span>
+<span class="p">)</span>
+<span class="n">VBox</span><span class="p">([</span><span class="n">db_index</span><span class="p">,</span> <span class="n">fig_index_sel</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="Returning-indexes-of-selected-values">Returning indexes of selected values<a class="anchor-link" href="#Returning-indexes-of-selected-values">&#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="kn">from</span> <span class="nn">datetime</span> <span class="kn">import</span> <span class="n">datetime</span> <span class="k">as</span> <span class="n">py_dtime</span>
+
+<span class="n">dt_x_index</span> <span class="o">=</span> <span class="n">DateScale</span><span class="p">(</span><span class="nb">min</span><span class="o">=</span><span class="n">np</span><span class="o">.</span><span class="n">datetime64</span><span class="p">(</span><span class="n">py_dtime</span><span class="p">(</span><span class="mi">2006</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">1</span><span class="p">)))</span>
+<span class="n">lin_y2</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</span>
+
+<span class="n">lc2_index</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">dates_actual</span><span class="p">,</span> <span class="n">y</span><span class="o">=</span><span class="n">prices</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">dt_x_index</span><span class="p">,</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="n">lin_y2</span><span class="p">})</span>
+
+<span class="n">x_ax1</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">label</span><span class="o">=</span><span class="s2">&quot;Date&quot;</span><span class="p">,</span> <span class="n">scale</span><span class="o">=</span><span class="n">dt_x_index</span><span class="p">)</span>
+<span class="n">x_ay2</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">label</span><span class="o">=</span><span class="p">(</span><span class="n">symbol</span> <span class="o">+</span> <span class="s2">&quot; Price&quot;</span><span class="p">),</span> <span class="n">scale</span><span class="o">=</span><span class="n">lin_y2</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>
+</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">intsel_date</span> <span class="o">=</span> <span class="n">FastIntervalSelector</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="n">dt_x_index</span><span class="p">,</span> <span class="n">marks</span><span class="o">=</span><span class="p">[</span><span class="n">lc2_index</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">db_date</span> <span class="o">=</span> <span class="n">HTML</span><span class="p">()</span>
+<span class="n">db_date</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="nb">str</span><span class="p">(</span><span class="n">intsel_date</span><span class="o">.</span><span class="n">selected</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">## Now, we define a function that will be called when the selectors are interacted with - a callback</span>
+<span class="k">def</span> <span class="nf">date_interval_change_callback</span><span class="p">(</span><span class="n">change</span><span class="p">):</span>
+    <span class="n">db_date</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="nb">str</span><span class="p">(</span><span class="n">change</span><span class="o">.</span><span class="n">new</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">## Notice here that we call the observe on the Mark lc2_index rather than on the selector intsel_date</span>
+<span class="n">lc2_index</span><span class="o">.</span><span class="n">observe</span><span class="p">(</span><span class="n">date_interval_change_callback</span><span class="p">,</span> <span class="n">names</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;selected&quot;</span><span class="p">])</span>
+
+<span class="n">fig_date_mark</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">lc2_index</span><span class="p">],</span>
+    <span class="n">axes</span><span class="o">=</span><span class="p">[</span><span class="n">x_ax1</span><span class="p">,</span> <span class="n">x_ay2</span><span class="p">],</span>
+    <span class="n">title</span><span class="o">=</span><span class="s2">&quot;Fast Interval Selector Selected Indices Example&quot;</span><span class="p">,</span>
+    <span class="n">interaction</span><span class="o">=</span><span class="n">intsel_date</span><span class="p">,</span>
+<span class="p">)</span>
+
+<span class="n">VBox</span><span class="p">([</span><span class="n">db_date</span><span class="p">,</span> <span class="n">fig_date_mark</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="Brush-Selector">Brush Selector<a class="anchor-link" href="#Brush-Selector">&#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">
+<h3 id="We-can-do-the-same-with-any-type-of-selector">We can do the same with any type of selector<a class="anchor-link" href="#We-can-do-the-same-with-any-type-of-selector">&#182;</a></h3>
+</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">## Defining a new Figure</span>
+<span class="n">dt_x_brush</span> <span class="o">=</span> <span class="n">DateScale</span><span class="p">(</span><span class="nb">min</span><span class="o">=</span><span class="n">np</span><span class="o">.</span><span class="n">datetime64</span><span class="p">(</span><span class="n">py_dtime</span><span class="p">(</span><span class="mi">2006</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">1</span><span class="p">)))</span>
+<span class="n">lin_y2_brush</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</span>
+
+<span class="n">lc3_brush</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">dates_actual</span><span class="p">,</span> <span class="n">y</span><span class="o">=</span><span class="n">prices</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">dt_x_brush</span><span class="p">,</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="n">lin_y2_brush</span><span class="p">})</span>
+
+<span class="n">x_ax_brush</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">label</span><span class="o">=</span><span class="s2">&quot;Date&quot;</span><span class="p">,</span> <span class="n">scale</span><span class="o">=</span><span class="n">dt_x_brush</span><span class="p">)</span>
+<span class="n">x_ay_brush</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">label</span><span class="o">=</span><span class="p">(</span><span class="n">symbol</span> <span class="o">+</span> <span class="s2">&quot; Price&quot;</span><span class="p">),</span> <span class="n">scale</span><span class="o">=</span><span class="n">lin_y2_brush</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>
+</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">db_brush</span> <span class="o">=</span> <span class="n">HTML</span><span class="p">(</span><span class="n">value</span><span class="o">=</span><span class="s2">&quot;[]&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="n">brushsel_date</span> <span class="o">=</span> <span class="n">BrushIntervalSelector</span><span class="p">(</span>
+    <span class="n">scale</span><span class="o">=</span><span class="n">dt_x_brush</span><span class="p">,</span> <span class="n">marks</span><span class="o">=</span><span class="p">[</span><span class="n">lc3_brush</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>
+</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">## Now, we define a function that will be called when the selectors are interacted with - a callback</span>
+<span class="k">def</span> <span class="nf">date_brush_change_callback</span><span class="p">(</span><span class="n">change</span><span class="p">):</span>
+    <span class="n">db_brush</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="nb">str</span><span class="p">(</span><span class="n">change</span><span class="o">.</span><span class="n">new</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">lc3_brush</span><span class="o">.</span><span class="n">observe</span><span class="p">(</span><span class="n">date_brush_change_callback</span><span class="p">,</span> <span class="n">names</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;selected&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="n">fig_brush_sel</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">lc3_brush</span><span class="p">],</span>
+    <span class="n">axes</span><span class="o">=</span><span class="p">[</span><span class="n">x_ax_brush</span><span class="p">,</span> <span class="n">x_ay_brush</span><span class="p">],</span>
+    <span class="n">title</span><span class="o">=</span><span class="s2">&quot;Brush Selector Selected Indices Example&quot;</span><span class="p">,</span>
+    <span class="n">interaction</span><span class="o">=</span><span class="n">brushsel_date</span><span class="p">,</span>
+<span class="p">)</span>
+
+<span class="n">VBox</span><span class="p">([</span><span class="n">db_brush</span><span class="p">,</span> <span class="n">fig_brush_sel</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">
+<h1 id="Scatter-Chart-Selectors">Scatter Chart Selectors<a class="anchor-link" href="#Scatter-Chart-Selectors">&#182;</a></h1>
+</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="Brush-Selector">Brush Selector<a class="anchor-link" href="#Brush-Selector">&#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="n">date_fmt</span> <span class="o">=</span> <span class="s2">&quot;%m-</span><span class="si">%d</span><span class="s2">-%Y&quot;</span>
+
+<span class="n">sec2_data</span> <span class="o">=</span> <span class="n">price_data</span><span class="p">[</span><span class="n">symbol2</span><span class="p">]</span><span class="o">.</span><span class="n">values</span>
+<span class="n">dates</span> <span class="o">=</span> <span class="n">price_data</span><span class="o">.</span><span class="n">index</span><span class="o">.</span><span class="n">values</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">sc_x</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</span>
+<span class="n">sc_y</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</span>
+
+<span class="n">scatt</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">prices</span><span class="p">,</span> <span class="n">y</span><span class="o">=</span><span class="n">sec2_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">sc_x</span><span class="p">,</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="n">sc_y</span><span class="p">})</span>
+
+<span class="n">sc_xax</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">label</span><span class="o">=</span><span class="p">(</span><span class="n">symbol</span><span class="p">),</span> <span class="n">scale</span><span class="o">=</span><span class="n">sc_x</span><span class="p">)</span>
+<span class="n">sc_yax</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">label</span><span class="o">=</span><span class="p">(</span><span class="n">symbol2</span><span class="p">),</span> <span class="n">scale</span><span class="o">=</span><span class="n">sc_y</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>
+</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">br_sel</span> <span class="o">=</span> <span class="n">BrushSelector</span><span class="p">(</span><span class="n">x_scale</span><span class="o">=</span><span class="n">sc_x</span><span class="p">,</span> <span class="n">y_scale</span><span class="o">=</span><span class="n">sc_y</span><span class="p">,</span> <span class="n">marks</span><span class="o">=</span><span class="p">[</span><span class="n">scatt</span><span class="p">],</span> <span class="n">color</span><span class="o">=</span><span class="s2">&quot;red&quot;</span><span class="p">)</span>
+
+<span class="n">db_scat_brush</span> <span class="o">=</span> <span class="n">HTML</span><span class="p">(</span><span class="n">value</span><span class="o">=</span><span class="s2">&quot;[]&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 for the selector</span>
+<span class="k">def</span> <span class="nf">brush_callback</span><span class="p">(</span><span class="n">change</span><span class="p">):</span>
+    <span class="n">db_scat_brush</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="nb">str</span><span class="p">(</span><span class="n">br_sel</span><span class="o">.</span><span class="n">selected</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">br_sel</span><span class="o">.</span><span class="n">observe</span><span class="p">(</span><span class="n">brush_callback</span><span class="p">,</span> <span class="n">names</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;brushing&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="n">fig_scat_brush</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">scatt</span><span class="p">],</span>
+    <span class="n">axes</span><span class="o">=</span><span class="p">[</span><span class="n">sc_xax</span><span class="p">,</span> <span class="n">sc_yax</span><span class="p">],</span>
+    <span class="n">title</span><span class="o">=</span><span class="s2">&quot;Scatter Chart Brush Selector Example&quot;</span><span class="p">,</span>
+    <span class="n">interaction</span><span class="o">=</span><span class="n">br_sel</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="n">VBox</span><span class="p">([</span><span class="n">db_scat_brush</span><span class="p">,</span> <span class="n">fig_scat_brush</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="Brush-Selector-with-Date-Values">Brush Selector with Date Values<a class="anchor-link" href="#Brush-Selector-with-Date-Values">&#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="n">sc_brush_dt_x</span> <span class="o">=</span> <span class="n">DateScale</span><span class="p">(</span><span class="n">date_format</span><span class="o">=</span><span class="n">date_fmt</span><span class="p">)</span>
+<span class="n">sc_brush_dt_y</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</span>
+
+<span class="n">scatt2</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">dates_actual</span><span class="p">,</span> <span class="n">y</span><span class="o">=</span><span class="n">sec2_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">sc_brush_dt_x</span><span class="p">,</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="n">sc_brush_dt_y</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="n">br_sel_dt</span> <span class="o">=</span> <span class="n">BrushSelector</span><span class="p">(</span><span class="n">x_scale</span><span class="o">=</span><span class="n">sc_brush_dt_x</span><span class="p">,</span> <span class="n">y_scale</span><span class="o">=</span><span class="n">sc_brush_dt_y</span><span class="p">,</span> <span class="n">marks</span><span class="o">=</span><span class="p">[</span><span class="n">scatt2</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">db_brush_dt</span> <span class="o">=</span> <span class="n">HTML</span><span class="p">(</span><span class="n">value</span><span class="o">=</span><span class="nb">str</span><span class="p">(</span><span class="n">br_sel_dt</span><span class="o">.</span><span class="n">selected</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 for the selector</span>
+<span class="k">def</span> <span class="nf">brush_dt_callback</span><span class="p">(</span><span class="n">change</span><span class="p">):</span>
+    <span class="n">db_brush_dt</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="nb">str</span><span class="p">(</span><span class="n">br_sel_dt</span><span class="o">.</span><span class="n">selected</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">br_sel_dt</span><span class="o">.</span><span class="n">observe</span><span class="p">(</span><span class="n">brush_dt_callback</span><span class="p">,</span> <span class="n">names</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;brushing&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="n">sc_xax</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">label</span><span class="o">=</span><span class="p">(</span><span class="n">symbol</span><span class="p">),</span> <span class="n">scale</span><span class="o">=</span><span class="n">sc_brush_dt_x</span><span class="p">)</span>
+<span class="n">sc_yax</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">label</span><span class="o">=</span><span class="p">(</span><span class="n">symbol2</span><span class="p">),</span> <span class="n">scale</span><span class="o">=</span><span class="n">sc_brush_dt_y</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">fig_brush_dt</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">scatt2</span><span class="p">],</span>
+    <span class="n">axes</span><span class="o">=</span><span class="p">[</span><span class="n">sc_xax</span><span class="p">,</span> <span class="n">sc_yax</span><span class="p">],</span>
+    <span class="n">title</span><span class="o">=</span><span class="s2">&quot;Brush Selector with Dates Example&quot;</span><span class="p">,</span>
+    <span class="n">interaction</span><span class="o">=</span><span class="n">br_sel_dt</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="n">VBox</span><span class="p">([</span><span class="n">db_brush_dt</span><span class="p">,</span> <span class="n">fig_brush_dt</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">
+<h1 id="Histogram-Selectors">Histogram Selectors<a class="anchor-link" href="#Histogram-Selectors">&#182;</a></h1>
+</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 for selectors</span>
+<span class="k">def</span> <span class="nf">interval_change_callback</span><span class="p">(</span><span class="n">name</span><span class="p">,</span> <span class="n">value</span><span class="p">):</span>
+    <span class="n">db3</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="nb">str</span><span class="p">(</span><span class="n">value</span><span class="p">)</span>
+
+
+<span class="c1">## call back for the selector</span>
+<span class="k">def</span> <span class="nf">brush_callback</span><span class="p">(</span><span class="n">change</span><span class="p">):</span>
+    <span class="k">if</span> <span class="ow">not</span> <span class="n">br_intsel</span><span class="o">.</span><span class="n">brushing</span><span class="p">:</span>
+        <span class="n">db3</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="nb">str</span><span class="p">(</span><span class="n">br_intsel</span><span class="o">.</span><span class="n">selected</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">returns</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">log</span><span class="p">(</span><span class="n">prices</span><span class="p">[</span><span class="mi">1</span><span class="p">:])</span> <span class="o">-</span> <span class="n">np</span><span class="o">.</span><span class="n">log</span><span class="p">(</span><span class="n">prices</span><span class="p">[:</span><span class="o">-</span><span class="mi">1</span><span class="p">])</span>
+<span class="n">hist_x</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</span>
+<span class="n">hist_y</span> <span class="o">=</span> <span class="n">LinearScale</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">returns</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">hist_x</span><span class="p">,</span> <span class="s2">&quot;count&quot;</span><span class="p">:</span> <span class="n">hist_y</span><span class="p">})</span>
+
+<span class="n">br_intsel</span> <span class="o">=</span> <span class="n">BrushIntervalSelector</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="n">hist_x</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">br_intsel</span><span class="o">.</span><span class="n">observe</span><span class="p">(</span><span class="n">brush_callback</span><span class="p">,</span> <span class="n">names</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;selected&quot;</span><span class="p">])</span>
+<span class="n">br_intsel</span><span class="o">.</span><span class="n">observe</span><span class="p">(</span><span class="n">brush_callback</span><span class="p">,</span> <span class="n">names</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;brushing&quot;</span><span class="p">])</span>
+
+<span class="n">db3</span> <span class="o">=</span> <span class="n">HTML</span><span class="p">()</span>
+<span class="n">db3</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="nb">str</span><span class="p">(</span><span class="n">br_intsel</span><span class="o">.</span><span class="n">selected</span><span class="p">)</span>
+
+<span class="n">h_xax</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">hist_x</span><span class="p">,</span> <span class="n">label</span><span class="o">=</span><span class="s2">&quot;Returns&quot;</span><span class="p">,</span> <span class="n">grids</span><span class="o">=</span><span class="s2">&quot;off&quot;</span><span class="p">,</span> <span class="n">set_ticks</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">tick_format</span><span class="o">=</span><span class="s2">&quot;0.2%&quot;</span>
+<span class="p">)</span>
+<span class="n">h_yax</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">hist_y</span><span class="p">,</span> <span class="n">label</span><span class="o">=</span><span class="s2">&quot;Freq&quot;</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">grid_lines</span><span class="o">=</span><span class="s2">&quot;none&quot;</span><span class="p">)</span>
+
+<span class="n">fig_hist</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">hist</span><span class="p">],</span>
+    <span class="n">axes</span><span class="o">=</span><span class="p">[</span><span class="n">h_xax</span><span class="p">,</span> <span class="n">h_yax</span><span class="p">],</span>
+    <span class="n">title</span><span class="o">=</span><span class="s2">&quot;Histogram Selection Example&quot;</span><span class="p">,</span>
+    <span class="n">interaction</span><span class="o">=</span><span class="n">br_intsel</span><span class="p">,</span>
+<span class="p">)</span>
+<span class="n">VBox</span><span class="p">([</span><span class="n">db3</span><span class="p">,</span> <span class="n">fig_hist</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="Multi-Selector">Multi Selector<a class="anchor-link" href="#Multi-Selector">&#182;</a></h2><ul>
+<li>This selector provides the ability to have multiple brush selectors on the same graph.</li>
+<li>The first brush works like a regular brush.</li>
+<li><code>Ctrl + click</code> creates a new brush, which works like the regular brush.</li>
+<li>The <code>active</code> brush has a Green border while all the <code>inactive</code> brushes have a Red border.</li>
+<li><code>Shift + click</code> deactivates the current <code>active</code> brush. Now, click on any <code>inactive</code> brush to make it <code>active</code>.</li>
+<li><code>Ctrl + Alt + Shift + click</code> clears and resets all the brushes.</li>
+</ul>
+
+</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">multi_sel_callback</span><span class="p">(</span><span class="n">change</span><span class="p">):</span>
+    <span class="k">if</span> <span class="ow">not</span> <span class="n">multi_sel</span><span class="o">.</span><span class="n">brushing</span><span class="p">:</span>
+        <span class="n">db4</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="nb">str</span><span class="p">(</span><span class="n">multi_sel</span><span class="o">.</span><span class="n">selected</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">line_x</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</span>
+<span class="n">line_y</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</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">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</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">scales</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;x&quot;</span><span class="p">:</span> <span class="n">line_x</span><span class="p">,</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="n">line_y</span><span class="p">}</span>
+<span class="p">)</span>
+
+<span class="n">multi_sel</span> <span class="o">=</span> <span class="n">MultiSelector</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="n">line_x</span><span class="p">,</span> <span class="n">marks</span><span class="o">=</span><span class="p">[</span><span class="n">line</span><span class="p">])</span>
+<span class="n">multi_sel</span><span class="o">.</span><span class="n">observe</span><span class="p">(</span><span class="n">multi_sel_callback</span><span class="p">,</span> <span class="n">names</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;selected&quot;</span><span class="p">])</span>
+<span class="n">multi_sel</span><span class="o">.</span><span class="n">observe</span><span class="p">(</span><span class="n">multi_sel_callback</span><span class="p">,</span> <span class="n">names</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;brushing&quot;</span><span class="p">])</span>
+
+<span class="n">db4</span> <span class="o">=</span> <span class="n">HTML</span><span class="p">()</span>
+<span class="n">db4</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="nb">str</span><span class="p">(</span><span class="n">multi_sel</span><span class="o">.</span><span class="n">selected</span><span class="p">)</span>
+
+<span class="n">h_xax</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">line_x</span><span class="p">,</span> <span class="n">label</span><span class="o">=</span><span class="s2">&quot;Returns&quot;</span><span class="p">,</span> <span class="n">grid_lines</span><span class="o">=</span><span class="s2">&quot;none&quot;</span><span class="p">)</span>
+<span class="n">h_yax</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">hist_y</span><span class="p">,</span> <span class="n">label</span><span class="o">=</span><span class="s2">&quot;Freq&quot;</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">grid_lines</span><span class="o">=</span><span class="s2">&quot;none&quot;</span><span class="p">)</span>
+
+<span class="n">fig_multi</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">line</span><span class="p">],</span>
+    <span class="n">axes</span><span class="o">=</span><span class="p">[</span><span class="n">h_xax</span><span class="p">,</span> <span class="n">h_yax</span><span class="p">],</span>
+    <span class="n">title</span><span class="o">=</span><span class="s2">&quot;Multi-Selector Example&quot;</span><span class="p">,</span>
+    <span class="n">interaction</span><span class="o">=</span><span class="n">multi_sel</span><span class="p">,</span>
+<span class="p">)</span>
+<span class="n">VBox</span><span class="p">([</span><span class="n">db4</span><span class="p">,</span> <span class="n">fig_multi</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 the names of the intervals.</span>
+<span class="n">multi_sel</span><span class="o">.</span><span class="n">names</span> <span class="o">=</span> <span class="p">[</span><span class="s2">&quot;int1&quot;</span><span class="p">,</span> <span class="s2">&quot;int2&quot;</span><span class="p">,</span> <span class="s2">&quot;int3&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="Multi-Selector-with-Date-X">Multi Selector with Date X<a class="anchor-link" href="#Multi-Selector-with-Date-X">&#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="k">def</span> <span class="nf">multi_sel_dt_callback</span><span class="p">(</span><span class="n">change</span><span class="p">):</span>
+    <span class="k">if</span> <span class="ow">not</span> <span class="n">multi_sel_dt</span><span class="o">.</span><span class="n">brushing</span><span class="p">:</span>
+        <span class="n">db_multi_dt</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="nb">str</span><span class="p">(</span><span class="n">multi_sel_dt</span><span class="o">.</span><span class="n">selected</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">line_dt_x</span> <span class="o">=</span> <span class="n">DateScale</span><span class="p">(</span><span class="nb">min</span><span class="o">=</span><span class="n">np</span><span class="o">.</span><span class="n">datetime64</span><span class="p">(</span><span class="n">py_dtime</span><span class="p">(</span><span class="mi">2007</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">)))</span>
+<span class="n">line_dt_y</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</span>
+<span class="n">line_dt</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">dates_actual</span><span class="p">,</span> <span class="n">y</span><span class="o">=</span><span class="n">sec2_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">line_dt_x</span><span class="p">,</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="n">line_dt_y</span><span class="p">},</span> <span class="n">colors</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">multi_sel_dt</span> <span class="o">=</span> <span class="n">MultiSelector</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="n">line_dt_x</span><span class="p">)</span>
+<span class="n">multi_sel_dt</span><span class="o">.</span><span class="n">observe</span><span class="p">(</span><span class="n">multi_sel_dt_callback</span><span class="p">,</span> <span class="n">names</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;selected&quot;</span><span class="p">])</span>
+<span class="n">multi_sel_dt</span><span class="o">.</span><span class="n">observe</span><span class="p">(</span><span class="n">multi_sel_dt_callback</span><span class="p">,</span> <span class="n">names</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;brushing&quot;</span><span class="p">])</span>
+
+<span class="n">db_multi_dt</span> <span class="o">=</span> <span class="n">HTML</span><span class="p">()</span>
+<span class="n">db_multi_dt</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="nb">str</span><span class="p">(</span><span class="n">multi_sel_dt</span><span class="o">.</span><span class="n">selected</span><span class="p">)</span>
+
+<span class="n">h_xax_dt</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">line_dt_x</span><span class="p">,</span> <span class="n">label</span><span class="o">=</span><span class="s2">&quot;Returns&quot;</span><span class="p">,</span> <span class="n">grid_lines</span><span class="o">=</span><span class="s2">&quot;none&quot;</span><span class="p">)</span>
+<span class="n">h_yax_dt</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">line_dt_y</span><span class="p">,</span> <span class="n">label</span><span class="o">=</span><span class="s2">&quot;Freq&quot;</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">grid_lines</span><span class="o">=</span><span class="s2">&quot;none&quot;</span>
+<span class="p">)</span>
+
+<span class="n">fig_multi_dt</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">line_dt</span><span class="p">],</span>
+    <span class="n">axes</span><span class="o">=</span><span class="p">[</span><span class="n">h_xax_dt</span><span class="p">,</span> <span class="n">h_yax_dt</span><span class="p">],</span>
+    <span class="n">title</span><span class="o">=</span><span class="s2">&quot;Multi-Selector with Date Example&quot;</span><span class="p">,</span>
+    <span class="n">interaction</span><span class="o">=</span><span class="n">multi_sel_dt</span><span class="p">,</span>
+<span class="p">)</span>
+<span class="n">VBox</span><span class="p">([</span><span class="n">db_multi_dt</span><span class="p">,</span> <span class="n">fig_multi_dt</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="Lasso-Selector">Lasso Selector<a class="anchor-link" href="#Lasso-Selector">&#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="n">lasso_sel</span> <span class="o">=</span> <span class="n">LassoSelector</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">xs</span><span class="p">,</span> <span class="n">ys</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">(),</span> <span class="n">LinearScale</span><span class="p">()</span>
+<span class="n">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">line_lasso</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">data</span><span class="p">,</span> <span class="n">y</span><span class="o">=</span><span class="n">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">xs</span><span class="p">,</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="n">ys</span><span class="p">})</span>
+<span class="n">scatter_lasso</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">data</span><span class="p">,</span> <span class="n">y</span><span class="o">=</span><span class="n">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">xs</span><span class="p">,</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="n">ys</span><span class="p">},</span> <span class="n">colors</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;skyblue&quot;</span><span class="p">])</span>
+<span class="n">bar_lasso</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">data</span><span class="p">,</span> <span class="n">y</span><span class="o">=</span><span class="n">data</span> <span class="o">/</span> <span class="mf">2.0</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">xs</span><span class="p">,</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="n">ys</span><span class="p">})</span>
+<span class="n">xax_lasso</span><span class="p">,</span> <span class="n">yax_lasso</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">xs</span><span class="p">,</span> <span class="n">label</span><span class="o">=</span><span class="s2">&quot;X&quot;</span><span class="p">),</span> <span class="n">Axis</span><span class="p">(</span>
+    <span class="n">scale</span><span class="o">=</span><span class="n">ys</span><span class="p">,</span> <span class="n">label</span><span class="o">=</span><span class="s2">&quot;Y&quot;</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">fig_lasso</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_lasso</span><span class="p">,</span> <span class="n">line_lasso</span><span class="p">,</span> <span class="n">bar_lasso</span><span class="p">],</span>
+    <span class="n">axes</span><span class="o">=</span><span class="p">[</span><span class="n">xax_lasso</span><span class="p">,</span> <span class="n">yax_lasso</span><span class="p">],</span>
+    <span class="n">title</span><span class="o">=</span><span class="s2">&quot;Lasso Selector Example&quot;</span><span class="p">,</span>
+    <span class="n">interaction</span><span class="o">=</span><span class="n">lasso_sel</span><span class="p">,</span>
+<span class="p">)</span>
+<span class="n">lasso_sel</span><span class="o">.</span><span class="n">marks</span> <span class="o">=</span> <span class="p">[</span><span class="n">scatter_lasso</span><span class="p">,</span> <span class="n">line_lasso</span><span class="p">]</span>
+<span class="n">fig_lasso</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_lasso</span><span class="o">.</span><span class="n">selected</span><span class="p">,</span> <span class="n">line_lasso</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">
+<h2 id="Pan-Zoom">Pan Zoom<a class="anchor-link" href="#Pan-Zoom">&#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="n">xs_pz</span> <span class="o">=</span> <span class="n">DateScale</span><span class="p">(</span><span class="nb">min</span><span class="o">=</span><span class="n">np</span><span class="o">.</span><span class="n">datetime64</span><span class="p">(</span><span class="n">py_dtime</span><span class="p">(</span><span class="mi">2007</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">)))</span>
+<span class="n">ys_pz</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</span>
+<span class="n">line_pz</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">dates_actual</span><span class="p">,</span> <span class="n">y</span><span class="o">=</span><span class="n">sec2_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">xs_pz</span><span class="p">,</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="n">ys_pz</span><span class="p">},</span> <span class="n">colors</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">panzoom</span> <span class="o">=</span> <span class="n">PanZoom</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="p">[</span><span class="n">xs_pz</span><span class="p">],</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="p">[</span><span class="n">ys_pz</span><span class="p">]})</span>
+<span class="n">xax</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">xs_pz</span><span class="p">,</span> <span class="n">label</span><span class="o">=</span><span class="s2">&quot;Date&quot;</span><span class="p">,</span> <span class="n">grids</span><span class="o">=</span><span class="s2">&quot;off&quot;</span><span class="p">)</span>
+<span class="n">yax</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">ys_pz</span><span class="p">,</span> <span class="n">label</span><span class="o">=</span><span class="s2">&quot;Price&quot;</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">grid_lines</span><span class="o">=</span><span class="s2">&quot;none&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_pz</span><span class="p">],</span> <span class="n">axes</span><span class="o">=</span><span class="p">[</span><span class="n">xax</span><span class="p">,</span> <span class="n">yax</span><span class="p">],</span> <span class="n">interaction</span><span class="o">=</span><span class="n">panzoom</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="Hand-Draw">Hand Draw<a class="anchor-link" href="#Hand-Draw">&#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="n">xs_hd</span> <span class="o">=</span> <span class="n">DateScale</span><span class="p">(</span><span class="nb">min</span><span class="o">=</span><span class="n">np</span><span class="o">.</span><span class="n">datetime64</span><span class="p">(</span><span class="n">py_dtime</span><span class="p">(</span><span class="mi">2007</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">)))</span>
+<span class="n">ys_hd</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</span>
+<span class="n">line_hd</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">dates_actual</span><span class="p">,</span> <span class="n">y</span><span class="o">=</span><span class="n">sec2_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">xs_hd</span><span class="p">,</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="n">ys_hd</span><span class="p">},</span> <span class="n">colors</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">handdraw</span> <span class="o">=</span> <span class="n">HandDraw</span><span class="p">(</span><span class="n">lines</span><span class="o">=</span><span class="n">line_hd</span><span class="p">)</span>
+<span class="n">xax</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">xs_hd</span><span class="p">,</span> <span class="n">label</span><span class="o">=</span><span class="s2">&quot;Date&quot;</span><span class="p">,</span> <span class="n">grid_lines</span><span class="o">=</span><span class="s2">&quot;none&quot;</span><span class="p">)</span>
+<span class="n">yax</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">ys_hd</span><span class="p">,</span> <span class="n">label</span><span class="o">=</span><span class="s2">&quot;Price&quot;</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">grid_lines</span><span class="o">=</span><span class="s2">&quot;none&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_hd</span><span class="p">],</span> <span class="n">axes</span><span class="o">=</span><span class="p">[</span><span class="n">xax</span><span class="p">,</span> <span class="n">yax</span><span class="p">],</span> <span class="n">interaction</span><span class="o">=</span><span class="n">handdraw</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">
+<h1 id="Unified-Figure-with-All-Interactions">Unified Figure with All Interactions<a class="anchor-link" href="#Unified-Figure-with-All-Interactions">&#182;</a></h1>
+</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">dt_x</span> <span class="o">=</span> <span class="n">DateScale</span><span class="p">(</span><span class="n">date_format</span><span class="o">=</span><span class="n">date_fmt</span><span class="p">,</span> <span class="nb">min</span><span class="o">=</span><span class="n">py_dtime</span><span class="p">(</span><span class="mi">2007</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">))</span>
+<span class="n">lc1_x</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</span>
+<span class="n">lc2_y</span> <span class="o">=</span> <span class="n">LinearScale</span><span class="p">()</span>
+
+<span class="n">lc2</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">np</span><span class="o">.</span><span class="n">linspace</span><span class="p">(</span><span class="mf">0.0</span><span class="p">,</span> <span class="mf">10.0</span><span class="p">,</span> <span class="nb">len</span><span class="p">(</span><span class="n">prices</span><span class="p">)),</span>
+    <span class="n">y</span><span class="o">=</span><span class="n">prices</span> <span class="o">*</span> <span class="mf">0.25</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">lc1_x</span><span class="p">,</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="n">lc2_y</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;Security 1&quot;</span><span class="p">],</span>
+<span class="p">)</span>
+
+<span class="n">lc3</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">dates_actual</span><span class="p">,</span>
+    <span class="n">y</span><span class="o">=</span><span class="n">sec2_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">dt_x</span><span class="p">,</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="n">lc2_y</span><span class="p">},</span>
+    <span class="n">colors</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;red&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="n">labels</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;Security 2&quot;</span><span class="p">],</span>
+<span class="p">)</span>
+
+<span class="n">lc4</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">np</span><span class="o">.</span><span class="n">linspace</span><span class="p">(</span><span class="mf">0.0</span><span class="p">,</span> <span class="mf">10.0</span><span class="p">,</span> <span class="nb">len</span><span class="p">(</span><span class="n">prices</span><span class="p">)),</span>
+    <span class="n">y</span><span class="o">=</span><span class="n">sec2_data</span> <span class="o">*</span> <span class="mf">0.75</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">LinearScale</span><span class="p">(</span><span class="nb">min</span><span class="o">=</span><span class="mi">5</span><span class="p">,</span> <span class="nb">max</span><span class="o">=</span><span class="mi">10</span><span class="p">),</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="n">lc2_y</span><span class="p">},</span>
+    <span class="n">colors</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;green&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="n">labels</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;Security 2 squared&quot;</span><span class="p">],</span>
+<span class="p">)</span>
+
+<span class="n">x_ax1</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">label</span><span class="o">=</span><span class="s2">&quot;Date&quot;</span><span class="p">,</span> <span class="n">scale</span><span class="o">=</span><span class="n">dt_x</span><span class="p">)</span>
+<span class="n">x_ax2</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">label</span><span class="o">=</span><span class="s2">&quot;Time&quot;</span><span class="p">,</span> <span class="n">scale</span><span class="o">=</span><span class="n">lc1_x</span><span class="p">,</span> <span class="n">side</span><span class="o">=</span><span class="s2">&quot;top&quot;</span><span class="p">,</span> <span class="n">grid_lines</span><span class="o">=</span><span class="s2">&quot;none&quot;</span><span class="p">)</span>
+<span class="n">x_ay2</span> <span class="o">=</span> <span class="n">Axis</span><span class="p">(</span><span class="n">label</span><span class="o">=</span><span class="p">(</span><span class="n">symbol</span> <span class="o">+</span> <span class="s2">&quot; Price&quot;</span><span class="p">),</span> <span class="n">scale</span><span class="o">=</span><span class="n">lc2_y</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">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">lc2</span><span class="p">,</span> <span class="n">lc3</span><span class="p">,</span> <span class="n">lc4</span><span class="p">],</span> <span class="n">axes</span><span class="o">=</span><span class="p">[</span><span class="n">x_ax1</span><span class="p">,</span> <span class="n">x_ax2</span><span class="p">,</span> <span class="n">x_ay2</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">## declaring the interactions</span>
+<span class="n">multi_sel</span> <span class="o">=</span> <span class="n">MultiSelector</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="n">dt_x</span><span class="p">,</span> <span class="n">marks</span><span class="o">=</span><span class="p">[</span><span class="n">lc2</span><span class="p">,</span> <span class="n">lc3</span><span class="p">])</span>
+<span class="n">br_intsel</span> <span class="o">=</span> <span class="n">BrushIntervalSelector</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="n">lc1_x</span><span class="p">,</span> <span class="n">marks</span><span class="o">=</span><span class="p">[</span><span class="n">lc2</span><span class="p">,</span> <span class="n">lc3</span><span class="p">])</span>
+<span class="n">index_sel</span> <span class="o">=</span> <span class="n">IndexSelector</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="n">dt_x</span><span class="p">,</span> <span class="n">marks</span><span class="o">=</span><span class="p">[</span><span class="n">lc2</span><span class="p">,</span> <span class="n">lc3</span><span class="p">])</span>
+<span class="n">int_sel</span> <span class="o">=</span> <span class="n">FastIntervalSelector</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="n">dt_x</span><span class="p">,</span> <span class="n">marks</span><span class="o">=</span><span class="p">[</span><span class="n">lc3</span><span class="p">,</span> <span class="n">lc2</span><span class="p">])</span>
+
+<span class="n">hd</span> <span class="o">=</span> <span class="n">HandDraw</span><span class="p">(</span><span class="n">lines</span><span class="o">=</span><span class="n">lc2</span><span class="p">)</span>
+<span class="n">hd2</span> <span class="o">=</span> <span class="n">HandDraw</span><span class="p">(</span><span class="n">lines</span><span class="o">=</span><span class="n">lc3</span><span class="p">)</span>
+<span class="n">pz</span> <span class="o">=</span> <span class="n">PanZoom</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="p">[</span><span class="n">dt_x</span><span class="p">],</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="p">[</span><span class="n">lc2_y</span><span class="p">]})</span>
+
+<span class="n">deb</span> <span class="o">=</span> <span class="n">HTML</span><span class="p">()</span>
+<span class="n">deb</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="s2">&quot;[]&quot;</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 handler for the interactions</span>
+<span class="k">def</span> <span class="nf">test_callback</span><span class="p">(</span><span class="n">change</span><span class="p">):</span>
+    <span class="n">deb</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="nb">str</span><span class="p">(</span><span class="n">change</span><span class="o">.</span><span class="n">new</span><span class="p">)</span>
+
+
+<span class="n">multi_sel</span><span class="o">.</span><span class="n">observe</span><span class="p">(</span><span class="n">test_callback</span><span class="p">,</span> <span class="n">names</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;selected&quot;</span><span class="p">])</span>
+<span class="n">br_intsel</span><span class="o">.</span><span class="n">observe</span><span class="p">(</span><span class="n">test_callback</span><span class="p">,</span> <span class="n">names</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;selected&quot;</span><span class="p">])</span>
+<span class="n">index_sel</span><span class="o">.</span><span class="n">observe</span><span class="p">(</span><span class="n">test_callback</span><span class="p">,</span> <span class="n">names</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;selected&quot;</span><span class="p">])</span>
+<span class="n">int_sel</span><span class="o">.</span><span class="n">observe</span><span class="p">(</span><span class="n">test_callback</span><span class="p">,</span> <span class="n">names</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;selected&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="kn">from</span> <span class="nn">collections</span> <span class="kn">import</span> <span class="n">OrderedDict</span>
+
+<span class="n">selection_interacts</span> <span class="o">=</span> <span class="n">ToggleButtons</span><span class="p">(</span>
+    <span class="n">options</span><span class="o">=</span><span class="n">OrderedDict</span><span class="p">(</span>
+        <span class="p">[</span>
+            <span class="p">(</span><span class="s2">&quot;HandDraw1&quot;</span><span class="p">,</span> <span class="n">hd</span><span class="p">),</span>
+            <span class="p">(</span><span class="s2">&quot;HandDraw2&quot;</span><span class="p">,</span> <span class="n">hd2</span><span class="p">),</span>
+            <span class="p">(</span><span class="s2">&quot;PanZoom&quot;</span><span class="p">,</span> <span class="n">pz</span><span class="p">),</span>
+            <span class="p">(</span><span class="s2">&quot;FastIntervalSelector&quot;</span><span class="p">,</span> <span class="n">int_sel</span><span class="p">),</span>
+            <span class="p">(</span><span class="s2">&quot;IndexSelector&quot;</span><span class="p">,</span> <span class="n">index_sel</span><span class="p">),</span>
+            <span class="p">(</span><span class="s2">&quot;BrushIntervalSelector&quot;</span><span class="p">,</span> <span class="n">br_intsel</span><span class="p">),</span>
+            <span class="p">(</span><span class="s2">&quot;MultiSelector&quot;</span><span class="p">,</span> <span class="n">multi_sel</span><span class="p">),</span>
+            <span class="p">(</span><span class="s2">&quot;None&quot;</span><span class="p">,</span> <span class="kc">None</span><span class="p">),</span>
+        <span class="p">]</span>
+    <span class="p">)</span>
+<span class="p">)</span>
+
+<span class="n">link</span><span class="p">((</span><span class="n">selection_interacts</span><span class="p">,</span> <span class="s2">&quot;value&quot;</span><span class="p">),</span> <span class="p">(</span><span class="n">fig</span><span class="p">,</span> <span class="s2">&quot;interaction&quot;</span><span class="p">))</span>
+<span class="n">VBox</span><span class="p">([</span><span class="n">deb</span><span class="p">,</span> <span class="n">fig</span><span class="p">,</span> <span class="n">selection_interacts</span><span class="p">],</span> <span class="n">align_self</span><span class="o">=</span><span class="s2">&quot;stretch&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"># Set the scales of lc4 to the ones of lc2 and check if panzoom pans the two.</span>
+<span class="n">lc4</span><span class="o">.</span><span class="n">scales</span> <span class="o">=</span> <span class="n">lc2</span><span class="o">.</span><span class="n">scales</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+  </div>
+