j1-template 2022.5.0.rc1 → 2022.5.0.rc4

data/lib/starter_web/pages/public/_jupyter/notebooks/textbooks/Time Series.html

@@ -0,0 +1,173 @@
+  <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">
+<h3 id="US-Equity-market-performance-from-1995-to-2021">US Equity market performance from 1995 to 2021<a class="anchor-link" href="#US-Equity-market-performance-from-1995-to-2021">&#182;</a></h3><p>In this visualization we'll look S&amp;P 500 Index performance from 1995 to 2021. The visulization consists of two charts:</p>
+<ul>
+<li>Time Series Chart of Index prices</li>
+<li>Histogram of the log returns</li>
+</ul>
+<p>We'll use the <a href="../Interactions/Selectors.ipynb">Fast Interval Selector</a> to quickly select different time slices and perform time series analysis on the selected slice (in this case, displaying the total return and the distribution of log returns). <strong>Click on the time series chart to activate the interval selector!</strong></p>
+<p>Fun things to try:</p>
+<ol>
+<li><code>FastIntervalSelector</code> responds to mouse moves! Move the mouse pointer up to expand the interval, down to contract the interval. Single click toggles between freezing/unfreezing the window length. Double click totally freezes the interval selector. Move the interval selector to perform quick visual time series analysis!</li>
+<li>Notice that the color of the return label changes with the sign of the total return (red for negative returns and green for positive returns)</li>
+<li>What was the index performance from 1995-2005? 2000-2010? 2010-2020?</li>
+<li>Does the return distribution have fat tails? (especially during 2008 financial crisis, 2020 covid crisis)</li>
+</ol>
+
+</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>
+<span class="kn">import</span> <span class="nn">pandas</span> <span class="k">as</span> <span class="nn">pd</span>
+
+<span class="kn">from</span> <span class="nn">ipywidgets</span> <span class="kn">import</span> <span class="o">*</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="kn">import</span> <span class="nn">bqplot.pyplot</span> <span class="k">as</span> <span class="nn">plt</span>
+<span class="kn">from</span> <span class="nn">bqplot.interacts</span> <span class="kn">import</span> <span class="n">FastIntervalSelector</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+  </div>
+
+  
+
+  <div class="
+      cell border-box-sizing code_cell rendered">
+    <div class="input">
+
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">regress</span><span class="p">(</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">):</span>
+    <span class="n">b</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">cov</span><span class="p">(</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">)[</span><span class="mi">0</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">var</span><span class="p">(</span><span class="n">x</span><span class="p">)</span>
+    <span class="n">a</span> <span class="o">=</span> <span class="n">y</span><span class="o">.</span><span class="n">mean</span><span class="p">()</span> <span class="o">-</span> <span class="n">b</span> <span class="o">*</span> <span class="n">x</span><span class="o">.</span><span class="n">mean</span><span class="p">()</span>
+    <span class="k">return</span> <span class="n">a</span><span class="p">,</span> <span class="n">b</span>
+
+<span class="k">def</span> <span class="nf">trend_score</span><span class="p">(</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">):</span>
+    <span class="sd">&quot;&quot;&quot;computes trend score as a cube of correlation coeff&quot;&quot;&quot;</span>
+    <span class="k">return</span> <span class="n">np</span><span class="o">.</span><span class="n">corrcoef</span><span class="p">(</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">)[</span><span class="mi">0</span><span class="p">,</span> <span class="mi">1</span><span class="p">]</span> <span class="o">**</span> <span class="mi">3</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">spx_prices</span> <span class="o">=</span> <span class="n">pd</span><span class="o">.</span><span class="n">read_csv</span><span class="p">(</span><span class="s2">&quot;spx_prices.csv&quot;</span><span class="p">,</span> <span class="n">index_col</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span> 
+                         <span class="n">squeeze</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">parse_dates</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
+<span class="n">dates</span> <span class="o">=</span> <span class="n">spx_prices</span><span class="o">.</span><span class="n">index</span>
+<span class="n">prices</span> <span class="o">=</span> <span class="n">spx_prices</span>
+<span class="n">log_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="o">/</span> <span class="n">prices</span><span class="o">.</span><span class="n">shift</span><span class="p">(</span><span class="mi">1</span><span class="p">))</span><span class="o">.</span><span class="n">dropna</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_title_tmpl</span> <span class="o">=</span> <span class="s2">&quot;S&amp;P Index Prices (from </span><span class="si">{}</span><span class="s2"> to </span><span class="si">{}</span><span class="s2">)&quot;</span>
+<span class="n">fig_title</span> <span class="o">=</span> <span class="n">fig_title_tmpl</span><span class="o">.</span><span class="n">format</span><span class="p">(</span><span class="n">dates</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span><span class="o">.</span><span class="n">strftime</span><span class="p">(</span><span class="s2">&quot;%m/</span><span class="si">%d</span><span class="s2">/%Y&quot;</span><span class="p">),</span> 
+                                  <span class="n">dates</span><span class="p">[</span><span class="o">-</span><span class="mi">1</span><span class="p">]</span><span class="o">.</span><span class="n">strftime</span><span class="p">(</span><span class="s2">&quot;%m/</span><span class="si">%d</span><span class="s2">/%Y&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">title</span><span class="o">=</span><span class="n">fig_title</span><span class="p">,</span> 
+                             <span class="n">layout</span><span class="o">=</span><span class="n">Layout</span><span class="p">(</span><span class="n">width</span><span class="o">=</span><span class="s2">&quot;1300px&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">plt</span><span class="o">.</span><span class="n">scales</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">DateScale</span><span class="p">()})</span>
+<span class="n">axes_options</span> <span class="o">=</span> <span class="p">{</span><span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="p">{</span><span class="s2">&quot;tick_format&quot;</span><span class="p">:</span> <span class="s2">&quot;,&quot;</span><span class="p">}}</span>
+<span class="n">time_series</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">dates</span><span class="p">,</span> <span class="n">prices</span><span class="p">,</span> <span class="n">colors</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;deepskyblue&quot;</span><span class="p">],</span> 
+                       <span class="n">stroke_width</span><span class="o">=</span><span class="mf">1.5</span><span class="p">,</span> <span class="n">axes_options</span><span class="o">=</span><span class="n">axes_options</span><span class="p">)</span>
+<span class="n">return_label</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">label</span><span class="p">([],</span> <span class="n">x</span><span class="o">=</span><span class="p">[],</span> <span class="n">y</span><span class="o">=</span><span class="p">[</span><span class="n">prices</span><span class="o">.</span><span class="n">max</span><span class="p">()</span> <span class="o">*</span> <span class="mf">.9</span><span class="p">],</span> 
+                         <span class="n">align</span><span class="o">=</span><span class="s2">&quot;middle&quot;</span><span class="p">,</span> <span class="n">default_size</span><span class="o">=</span><span class="mi">36</span><span class="p">,</span> 
+                         <span class="n">font_weight</span><span class="o">=</span><span class="s2">&quot;bolder&quot;</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="n">trend_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="p">[])</span>
+<span class="n">intsel</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">time_series</span><span class="o">.</span><span class="n">scales</span><span class="p">[</span><span class="s1">&#39;x&#39;</span><span class="p">],</span> <span class="n">marks</span><span class="o">=</span><span class="p">[</span><span class="n">time_series</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="n">hist_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">title</span><span class="o">=</span><span class="s2">&quot;Histogram Of Daily Returns&quot;</span><span class="p">,</span>
+                      <span class="n">layout</span><span class="o">=</span><span class="n">Layout</span><span class="p">(</span><span class="n">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;450px&quot;</span><span class="p">,</span>
+                                    <span class="n">margin</span><span class="o">=</span><span class="s2">&quot;0px 150px 0px 150px&quot;</span><span class="p">))</span>
+<span class="n">plt</span><span class="o">.</span><span class="n">scales</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="mf">.1</span><span class="p">,</span> <span class="nb">max</span><span class="o">=</span><span class="mf">.1</span><span class="p">)})</span>
+<span class="n">hist</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">hist</span><span class="p">(</span><span class="n">log_returns</span><span class="p">,</span> <span class="n">colors</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;salmon&quot;</span><span class="p">],</span> <span class="n">bins</span><span class="o">=</span><span class="mi">75</span><span class="p">)</span>
+<span class="k">for</span> <span class="n">axis</span> <span class="ow">in</span> <span class="n">hist_fig</span><span class="o">.</span><span class="n">axes</span><span class="p">:</span>
+    <span class="n">axis</span><span class="o">.</span><span class="n">grid_lines</span> <span class="o">=</span> <span class="s2">&quot;none&quot;</span>
+    <span class="k">if</span> <span class="n">axis</span><span class="o">.</span><span class="n">orientation</span> <span class="o">!=</span> <span class="s2">&quot;vertical&quot;</span><span class="p">:</span>
+        <span class="n">axis</span><span class="o">.</span><span class="n">tick_format</span> <span class="o">=</span> <span class="s2">&quot;.0%&quot;</span>
+
+<span class="k">def</span> <span class="nf">update_trend_line</span><span class="p">(</span><span class="o">*</span><span class="n">args</span><span class="p">):</span>
+    <span class="n">selected_idx</span> <span class="o">=</span> <span class="n">time_series</span><span class="o">.</span><span class="n">selected</span>
+    <span class="k">if</span> <span class="n">selected_idx</span> <span class="ow">is</span> <span class="ow">not</span> <span class="kc">None</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">array</span><span class="p">(</span><span class="n">selected_idx</span><span class="p">)</span>
+        <span class="n">y</span> <span class="o">=</span> <span class="n">time_series</span><span class="o">.</span><span class="n">y</span><span class="p">[</span><span class="n">selected_idx</span><span class="p">]</span>
+
+        <span class="n">a</span><span class="p">,</span> <span class="n">b</span> <span class="o">=</span> <span class="n">regress</span><span class="p">(</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">)</span>
+        <span class="n">ts</span> <span class="o">=</span> <span class="n">trend_score</span><span class="p">(</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">)</span>
+        <span class="n">end_points</span> <span class="o">=</span> <span class="p">[</span><span class="n">selected_idx</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="n">selected_idx</span><span class="p">[</span><span class="o">-</span><span class="mi">1</span><span class="p">]]</span>
+        <span class="n">pct_return</span> <span class="o">=</span> <span class="n">prices</span><span class="p">[</span><span class="n">end_points</span><span class="p">[</span><span class="mi">1</span><span class="p">]]</span> <span class="o">/</span> <span class="n">prices</span><span class="p">[</span><span class="n">end_points</span><span class="p">[</span><span class="mi">0</span><span class="p">]]</span> <span class="o">-</span> <span class="mi">1</span>
+        
+        <span class="k">with</span> <span class="n">return_label</span><span class="o">.</span><span class="n">hold_sync</span><span class="p">():</span>
+            <span class="n">return_label</span><span class="o">.</span><span class="n">text</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;</span><span class="si">{:.0%}</span><span class="s1">&#39;</span><span class="o">.</span><span class="n">format</span><span class="p">(</span><span class="n">pct_return</span><span class="p">)]</span>
+            <span class="n">return_label</span><span class="o">.</span><span class="n">x</span> <span class="o">=</span> <span class="p">[</span><span class="n">time_series</span><span class="o">.</span><span class="n">x</span><span class="p">[(</span><span class="n">end_points</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">+</span> <span class="n">end_points</span><span class="p">[</span><span class="mi">1</span><span class="p">])</span> <span class="o">//</span> <span class="mi">2</span><span class="p">]]</span>
+        
+        <span class="k">with</span> <span class="n">trend_line</span><span class="o">.</span><span class="n">hold_sync</span><span class="p">():</span>
+            <span class="n">trend_line</span><span class="o">.</span><span class="n">x</span> <span class="o">=</span> <span class="n">time_series</span><span class="o">.</span><span class="n">x</span><span class="p">[</span><span class="n">end_points</span><span class="p">]</span>
+            <span class="n">trend_line</span><span class="o">.</span><span class="n">y</span> <span class="o">=</span> <span class="n">a</span> <span class="o">+</span> <span class="n">b</span> <span class="o">*</span> <span class="n">np</span><span class="o">.</span><span class="n">array</span><span class="p">(</span><span class="n">end_points</span><span class="p">)</span>
+            <span class="k">if</span> <span class="n">np</span><span class="o">.</span><span class="n">abs</span><span class="p">(</span><span class="n">ts</span><span class="p">)</span> <span class="o">&lt;</span> <span class="mf">.1</span><span class="p">:</span>
+                <span class="n">trend_line</span><span class="o">.</span><span class="n">colors</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;yellow&#39;</span><span class="p">]</span>
+            <span class="k">elif</span> <span class="n">ts</span> <span class="o">&gt;</span> <span class="mf">.1</span><span class="p">:</span>
+                <span class="n">trend_line</span><span class="o">.</span><span class="n">colors</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;lime&#39;</span><span class="p">]</span>
+            <span class="k">else</span><span class="p">:</span>
+                <span class="n">trend_line</span><span class="o">.</span><span class="n">colors</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;red&#39;</span><span class="p">]</span>    
+            <span class="n">trend_line</span><span class="o">.</span><span class="n">stroke_width</span> <span class="o">=</span> <span class="mi">2</span> <span class="o">+</span> <span class="mi">6</span> <span class="o">*</span> <span class="n">np</span><span class="o">.</span><span class="n">abs</span><span class="p">(</span><span class="n">ts</span><span class="p">)</span>
+        <span class="n">time_series_fig</span><span class="o">.</span><span class="n">title</span> <span class="o">=</span> <span class="n">fig_title_tmpl</span><span class="o">.</span><span class="n">format</span><span class="p">(</span><span class="o">*</span><span class="p">[</span><span class="n">dates</span><span class="p">[</span><span class="n">i</span><span class="p">]</span><span class="o">.</span><span class="n">strftime</span><span class="p">(</span><span class="s1">&#39;%m/</span><span class="si">%d</span><span class="s1">/%Y&#39;</span><span class="p">)</span> \
+                                                        <span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="n">end_points</span><span class="p">])</span>
+        <span class="c1"># update hist with returns</span>
+        <span class="n">hist</span><span class="o">.</span><span class="n">sample</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">y</span><span class="p">[</span><span class="mi">1</span><span class="p">:]</span> <span class="o">/</span> <span class="n">y</span><span class="p">[:</span><span class="o">-</span><span class="mi">1</span><span class="p">])</span>
+
+<span class="n">time_series</span><span class="o">.</span><span class="n">observe</span><span class="p">(</span><span class="n">update_trend_line</span><span class="p">,</span> <span class="s1">&#39;selected&#39;</span><span class="p">)</span>
+<span class="n">VBox</span><span class="p">([</span><span class="n">time_series_fig</span><span class="p">,</span> <span class="n">hist_fig</span><span class="p">])</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+  </div>
+

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

@@ -0,0 +1,40 @@
+  <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="Tutorials">Tutorials<a class="anchor-link" href="#Tutorials">&#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="Basic-Plotting">Basic Plotting<a class="anchor-link" href="#Basic-Plotting">&#182;</a></h2><ul>
+<li><a href="Tutorials/Object%20Model.ipynb">Using the Object Model</a></li>
+<li><a href="Tutorials/Pyplot.ipynb">Using <code>pyplot</code></a></li>
+</ul>
+<h2 id="Interactive-Plotting">Interactive Plotting<a class="anchor-link" href="#Interactive-Plotting">&#182;</a></h2><ul>
+<li><a href="Tutorials/Updating%20Plots.ipynb">Updating plots</a></li>
+<li><p>### Integrating with <code>ipywidgets</code></p>
+<ul>
+<li><a href="Tutorials/Linking%20Plots%20With%20Widgets.ipynb">Linking with ipywidgets</a></li>
+<li><a href="Tutorials/Gaussian%20Density.ipynb">Application: Gaussian Density</a></li>
+</ul>
+</li>
+<li><p>### Linking Plots Using Selectors</p>
+<ul>
+<li><a href="Tutorials/Fast%20Interval%20Selector.ipynb">Fast Interval Selector</a></li>
+<li><a href="Tutorials/Brush%20Interval%20Selector.ipynb">Brush Interval Selector</a></li>
+</ul>
+</li>
+</ul>
+
+</div>
+</div>
+</div>
+

data/lib/starter_web/pages/public/_jupyter/notebooks/textbooks/Updating Plots.html

@@ -0,0 +1,228 @@
+  <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="Updating-Plots">Updating Plots<a class="anchor-link" href="#Updating-Plots">&#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><code>bqplot</code> is an interactive plotting library. Attributes of plots can be updated in place without recreating the whole figure and marks. Let's look at idiomatic ways of updating plots in <code>bqplot</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>
+<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 code_cell rendered">
+    <div class="input">
+
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython3"><pre><span></span><span class="n">x</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">linspace</span><span class="p">(</span><span class="o">-</span><span class="mi">10</span><span class="p">,</span> <span class="mi">10</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">sin</span><span class="p">(</span><span class="n">x</span><span class="p">)</span>
+
+<span class="n">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">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">x</span><span class="o">=</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="o">=</span><span class="n">y</span><span class="p">)</span>
+<span class="n">fig</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+<div class="output_wrapper">
+<div class="output">
+
+
+<div class="output_area">
+
+    
+
+
+
+  <div class="output_subarea output_widget_view ">
+    <button class="js-nbinteract-widget">
+      Loading widgets...
+    </button>
+  </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>To update the attributes of the plot(x, y, color etc.) the correct way to do it is to update the attributes of the <strong>mark</strong> objects in place. Recreating figure or mark objects is not recommended</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="c1"># update y attribute of the line object</span>
+<span class="n">line</span><span class="o">.</span><span class="n">y</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">tan</span><span class="p">(</span><span class="n">x</span><span class="p">)</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+  </div>
+<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
+<div class="text_cell_render border-box-sizing rendered_html">
+<p>We can update multiple attributes of the mark object simultaneously by using the <code>hold_sync</code> method like so. (This makes only one round trip from the python kernel to front end)</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="c1"># update both x and y together</span>
+<span class="k">with</span> <span class="n">line</span><span class="o">.</span><span class="n">hold_sync</span><span class="p">():</span>
+    <span class="n">line</span><span class="o">.</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">line</span><span class="o">.</span><span class="n">y</span> <span class="o">=</span> <span class="n">x</span> <span class="o">**</span> <span class="mi">3</span> <span class="o">-</span> <span class="n">x</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>We can also animate the changes to the x, y and other data attributes by setting the <code>animation_duration</code> property on the figure object. More examples of animations can found in the <a href="../Advanced Plotting/Animations.ipynb">Animations</a> notebook</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">fig</span><span class="o">.</span><span class="n">animation_duration</span> <span class="o">=</span> <span class="mi">1000</span>
+<span class="n">line</span><span class="o">.</span><span class="n">y</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">cos</span><span class="p">(</span><span class="n">x</span><span class="p">)</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+  </div>
+<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
+<div class="text_cell_render border-box-sizing rendered_html">
+<p>Let's look at an example to update a scatter plot</p>
+
+</div>
+</div>
+</div>
+
+  
+
+  <div class="
+      cell border-box-sizing code_cell rendered">
+    <div class="input">
+
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython3"><pre><span></span><span class="n">x</span><span class="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">rand</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">10</span><span class="p">)</span>
+
+<span class="n">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">animation_duration</span><span class="o">=</span><span class="mi">1000</span><span class="p">)</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="n">x</span><span class="o">=</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="o">=</span><span class="n">y</span><span class="p">)</span>
+<span class="n">fig</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+<div class="output_wrapper">
+<div class="output">
+
+
+<div class="output_area">
+
+    
+
+
+
+  <div class="output_subarea output_widget_view ">
+    <button class="js-nbinteract-widget">
+      Loading widgets...
+    </button>
+  </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"># update the x and y attreibutes in place using hold_sync</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">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">rand</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">10</span><span class="p">)</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+  </div>
+