j1-template 2022.5.0.rc1 → 2022.5.0.rc4

data/lib/starter_web/pages/public/_jupyter/notebooks/textbooks/Fast Interval Selector.html

@@ -0,0 +1,182 @@
+  <div class="cell text_cell">
+    <button class="js-nbinteract-widget">
+      Loading widgets...
+    </button>
+  </div>
+
+
+
+<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
+<div class="text_cell_render border-box-sizing rendered_html">
+<h1 id="Linking-Plots-Using-Fast-Interval-Selector">Linking Plots Using Fast Interval Selector<a class="anchor-link" href="#Linking-Plots-Using-Fast-Interval-Selector">&#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">
+<p>Details on how to use the fast interval selector can be found in <a href="../Interactions/Selectors.ipynb#fastintervalselector">this</a> notebook. In this tutorial notebook, we will look at linking plots using the fast interval selector. Interval selectors are ideally suited for time series analysis where we want to perform statistical computations on different time periods.</p>
+<p>When creating an interval selector we need pass in the x scale. We can additionally pass in the marks on which the interval selector operates. When the interval selector moves, it updates the following traits (on which callbacks can be registered)</p>
+<ul>
+<li><code>selected</code> trait of the interval selector object itself. This trait contains the start and end of the x axis obtained from the x scale. Note that these values may not be present in the <code>x</code> attribute of the marks!</li>
+<li><code>selected</code> trait of the marks on which the selector operates. This trait contains <em>all</em> the <em>indices</em> of the line.x which are spanned by the interval selector.</li>
+</ul>
+<p>The recipe for linking plots is as follows:</p>
+<ol>
+<li>Create an interval selector object by passing in the X-scale and marks on which the selector should operate on (optional)</li>
+<li>Pass it to the figure through the <code>interaction</code> argument</li>
+<li>Register a callback (which potentially updates other plots) on either the <code>selected</code> attribute of the interval selector object or <code>selected</code> attribute of the marks objects in the figure</li>
+</ol>
+<p><br><code>FastIntervalSelector</code> updates the <code>selected</code> trait <strong>continuously</strong>. Therefore, registering computationally intensive callbacks is <em>not</em> recommended with <code>FastIntervalSelector</code></p>
+<p>Let's now look at an example of linking a time series plot to a scatter plot using a <code>FastIntervalSelector</code></p>
+
+</div>
+</div>
+</div>
+
+  
+
+  <div class="
+      cell border-box-sizing code_cell rendered">
+    <div class="input">
+
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">import</span> <span class="nn">numpy</span> <span class="k">as</span> <span class="nn">np</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">ipywidgets</span> <span class="kn">import</span> <span class="n">Layout</span><span class="p">,</span> <span class="n">HTML</span><span class="p">,</span> <span class="n">VBox</span>
+<span class="kn">import</span> <span class="nn">bqplot.pyplot</span> <span class="k">as</span> <span class="nn">plt</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+  </div>
+<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
+<div class="text_cell_render border-box-sizing rendered_html">
+<p>Let's set up an interval selector on a figure containing two time series plots. The interval selector can be activated by clicking on the figure</p>
+
+</div>
+</div>
+</div>
+
+  
+
+  <div class="
+      cell border-box-sizing code_cell rendered">
+    <div class="input">
+
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">from</span> <span class="nn">bqplot.interacts</span> <span class="kn">import</span> <span class="n">FastIntervalSelector</span>
+
+<span class="n">y1</span><span class="p">,</span> <span class="n">y2</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">randn</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">200</span><span class="p">)</span><span class="o">.</span><span class="n">cumsum</span><span class="p">(</span><span class="n">axis</span><span class="o">=</span><span class="mi">1</span><span class="p">)</span>  <span class="c1"># two simple random walks</span>
+
+<span class="n">fig_layout</span> <span class="o">=</span> <span class="n">Layout</span><span class="p">(</span><span class="n">width</span><span class="o">=</span><span class="s2">&quot;900px&quot;</span><span class="p">,</span> <span class="n">height</span><span class="o">=</span><span class="s2">&quot;500px&quot;</span><span class="p">)</span>
+<span class="n">time_series_fig</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">figure</span><span class="p">(</span><span class="n">layout</span><span class="o">=</span><span class="n">fig_layout</span><span class="p">)</span>
+<span class="n">line</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">plot</span><span class="p">([</span><span class="n">y1</span><span class="p">,</span> <span class="n">y2</span><span class="p">])</span>
+
+<span class="c1"># create a fast interval selector by passing in the X scale and the line mark on which the selector operates</span>
+<span class="n">intsel</span> <span class="o">=</span> <span class="n">FastIntervalSelector</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">scale</span><span class="o">=</span><span class="n">line</span><span class="o">.</span><span class="n">scales</span><span class="p">[</span><span class="s2">&quot;x&quot;</span><span class="p">])</span>
+<span class="n">time_series_fig</span><span class="o">.</span><span class="n">interaction</span> <span class="o">=</span> <span class="n">intsel</span>  <span class="c1"># set the interval selector on the figure</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+  </div>
+<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
+<div class="text_cell_render border-box-sizing rendered_html">
+<p>Let's now create a scatter plot of the two time series and stack it below the time series plot using a <code>VBox</code></p>
+
+</div>
+</div>
+</div>
+
+  
+
+  <div class="
+      cell border-box-sizing code_cell rendered">
+    <div class="input">
+
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython3"><pre><span></span><span class="n">scat_fig</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">figure</span><span class="p">(</span>
+    <span class="n">layout</span><span class="o">=</span><span class="n">fig_layout</span><span class="p">,</span>
+    <span class="n">title</span><span class="o">=</span><span class="s2">&quot;Scatter of time series slice selected by the interval selector&quot;</span><span class="p">,</span>
+<span class="p">)</span>
+<span class="c1"># set the x and y attributes to the y values of line.y</span>
+<span class="n">scat</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">scatter</span><span class="p">(</span><span class="o">*</span><span class="n">line</span><span class="o">.</span><span class="n">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">stroke</span><span class="o">=</span><span class="s2">&quot;black&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"># define a callback for the interval selector</span>
+<span class="k">def</span> <span class="nf">update_scatter</span><span class="p">(</span><span class="o">*</span><span class="n">args</span><span class="p">):</span>
+    <span class="c1"># get the start and end indices of the interval</span>
+    <span class="n">start_ix</span><span class="p">,</span> <span class="n">end_ix</span> <span class="o">=</span> <span class="n">line</span><span class="o">.</span><span class="n">selected</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="n">line</span><span class="o">.</span><span class="n">selected</span><span class="p">[</span><span class="o">-</span><span class="mi">1</span><span class="p">]</span>
+
+    <span class="c1"># update the x and y attributes of the scatter by slicing line.y</span>
+    <span class="k">with</span> <span class="n">scat</span><span class="o">.</span><span class="n">hold_sync</span><span class="p">():</span>
+        <span class="n">scat</span><span class="o">.</span><span class="n">x</span><span class="p">,</span> <span class="n">scat</span><span class="o">.</span><span class="n">y</span> <span class="o">=</span> <span class="n">line</span><span class="o">.</span><span class="n">y</span><span class="p">[:,</span> <span class="n">start_ix</span><span class="p">:</span><span class="n">end_ix</span><span class="p">]</span>
+
+
+<span class="c1"># register the callback with line.selected trait</span>
+<span class="n">line</span><span class="o">.</span><span class="n">observe</span><span class="p">(</span><span class="n">update_scatter</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">help_label</span> <span class="o">=</span> <span class="n">HTML</span><span class="p">(</span>
+    <span class="s1">&#39;&lt;div style=&quot;color: blue; font-size: 16px; margin:20px 0px 0px 50px&quot;&gt;</span><span class="se">\</span>
+<span class="s1">                  Click on the time series plot to activate the interval selector&lt;/div&gt;&#39;</span>
+<span class="p">)</span>
+<span class="n">VBox</span><span class="p">([</span><span class="n">help_label</span><span class="p">,</span> <span class="n">time_series_fig</span><span class="p">,</span> <span class="n">scat_fig</span><span class="p">])</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+  </div>
+