RubyGems - j1-template - Versions diffs - 2022.4.2 → 2022.4.3 - Mend

j1-template 2022.4.2 → 2022.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

data/lib/starter_web/pages/public/jupyter/notebooks/textbooks/nbi_docs_recipes_layout.html DELETED Viewed

@@ -1,496 +0,0 @@
-  <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="Page-Layout-and-Dashboarding">Page Layout and Dashboarding<a class="anchor-link" href="#Page-Layout-and-Dashboarding">&#182;</a></h3><p><code>nbinteract</code> gives basic page layout functionality using special comments in your code. Include one or more of these markers in a Python. Outputting the HTML code by <code>nbinteract</code> add their corresponding CSS classes to the generated cells.</p>
-<table>
-<thead><tr>
-<th>Marker</th>
-<th>Description</th>
-<th>CSS class added</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>nbi:left</code></td>
-<td>Floats cell to the left</td>
-<td><code>nbinteract-left</code></td>
-</tr>
-<tr>
-<td><code>nbi:right</code></td>
-<td>Floats cell to the right</td>
-<td><code>nbinteract-right</code></td>
-</tr>
-<tr>
-<td><code>nbi:hide_in</code></td>
-<td>Hides cell input</td>
-<td><code>nbinteract-hide_in</code></td>
-</tr>
-<tr>
-<td><code>nbi:hide_out</code></td>
-<td>Hides cell output</td>
-<td><code>nbinteract-hide_out</code></td>
-</tr>
-</tbody>
-</table>
-<p>By default, only the <code>full</code> template will automatically provide styling for these classes. For other templates, <code>nbinteract</code> assumes that the embedding page will use the CSS classes to style the cells.</p>
-<p>You can use the layout markers to create simple dashboards. In this page, we create a dashboard using a dataset of trending videos on YouTube. We first create a dashboard showing the code used to generate the plots. Further down the page, we replicate the dashboard without showing the code.</p>
-</div>
-</div>
-</div>
-  <div class="nbinteract-hide_in
-      cell border-box-sizing code_cell rendered">
-    <div class="input">
-<div class="inner_cell">
-    <div class="input_area">
-<div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># nbi:hide_in</span>
-<span class="kn">import</span> <span class="nn">warnings</span>
-<span class="c1"># Ignore numpy dtype warnings. These warnings are caused by an interaction</span>
-<span class="c1"># between numpy and Cython and can be safely ignored.</span>
-<span class="c1"># Reference: https://stackoverflow.com/a/40846742</span>
-<span class="n">warnings</span><span class="o">.</span><span class="n">filterwarnings</span><span class="p">(</span><span class="s2">&quot;ignore&quot;</span><span class="p">,</span> <span class="n">message</span><span class="o">=</span><span class="s2">&quot;numpy.dtype size changed&quot;</span><span class="p">)</span>
-<span class="n">warnings</span><span class="o">.</span><span class="n">filterwarnings</span><span class="p">(</span><span class="s2">&quot;ignore&quot;</span><span class="p">,</span> <span class="n">message</span><span class="o">=</span><span class="s2">&quot;numpy.ufunc size changed&quot;</span><span class="p">)</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">matplotlib.pyplot</span> <span class="k">as</span> <span class="nn">plt</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">nbinteract</span> <span class="k">as</span> <span class="nn">nbi</span>
-<span class="c1"># Jupyter Specifics</span>
-<span class="c1">#</span>
-<span class="kn">import</span> <span class="nn">ipywidgets</span> <span class="k">as</span> <span class="nn">widgets</span>
-<span class="c1"># from ipywidgets import interact, interactive, fixed, interact_manual</span>
-<span class="kn">from</span> <span class="nn">ipywidgets.widgets</span> <span class="kn">import</span> <span class="n">interact</span><span class="p">,</span> <span class="n">IntSlider</span><span class="p">,</span> <span class="n">FloatSlider</span><span class="p">,</span> <span class="n">Layout</span>
-<span class="n">np</span><span class="o">.</span><span class="n">set_printoptions</span><span class="p">(</span><span class="n">threshold</span><span class="o">=</span><span class="mi">20</span><span class="p">,</span> <span class="n">precision</span><span class="o">=</span><span class="mi">2</span><span class="p">,</span> <span class="n">suppress</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
-<span class="n">pd</span><span class="o">.</span><span class="n">options</span><span class="o">.</span><span class="n">display</span><span class="o">.</span><span class="n">max_rows</span> <span class="o">=</span> <span class="mi">7</span>
-<span class="n">pd</span><span class="o">.</span><span class="n">options</span><span class="o">.</span><span class="n">display</span><span class="o">.</span><span class="n">max_columns</span> <span class="o">=</span> <span class="mi">8</span>
-<span class="n">pd</span><span class="o">.</span><span class="n">set_option</span><span class="p">(</span><span class="s1">&#39;precision&#39;</span><span class="p">,</span> <span class="mi">2</span><span class="p">)</span>
-<span class="c1"># This option stops scientific notation for pandas</span>
-<span class="n">pd</span><span class="o">.</span><span class="n">set_option</span><span class="p">(</span><span class="s1">&#39;display.float_format&#39;</span><span class="p">,</span> <span class="s1">&#39;</span><span class="si">{:.2f}</span><span class="s1">&#39;</span><span class="o">.</span><span class="n">format</span><span class="p">)</span>
-<span class="n">style</span> <span class="o">=</span> <span class="p">{</span><span class="s1">&#39;description_width&#39;</span><span class="p">:</span> <span class="s1">&#39;150px&#39;</span><span class="p">}</span>
-<span class="n">slider_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="s1">&#39;90%&#39;</span><span class="p">)</span>
-<span class="c1"># Some Magics</span>
-<span class="c1">#</span>
-<span class="o">%</span><span class="k">matplotlib</span> inline
-</pre></div>
-    </div>
-</div>
-</div>
-  </div>
-  <div class="nbinteract-hide_in
-      cell border-box-sizing code_cell rendered">
-    <div class="input">
-<div class="inner_cell">
-    <div class="input_area">
-<div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># nbi:hide_in</span>
-<span class="k">def</span> <span class="nf">df_interact</span><span class="p">(</span><span class="n">df</span><span class="p">,</span> <span class="n">nrows</span><span class="o">=</span><span class="mi">7</span><span class="p">,</span> <span class="n">ncols</span><span class="o">=</span><span class="mi">7</span><span class="p">):</span>
-    <span class="sd">&#39;&#39;&#39;</span>
-<span class="sd">    Outputs sliders that show rows and columns of df</span>
-<span class="sd">    &#39;&#39;&#39;</span>
-    <span class="k">def</span> <span class="nf">peek</span><span class="p">(</span><span class="n">row</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span> <span class="n">col</span><span class="o">=</span><span class="mi">0</span><span class="p">):</span>
-        <span class="k">return</span> <span class="n">df</span><span class="o">.</span><span class="n">iloc</span><span class="p">[</span><span class="n">row</span><span class="p">:</span><span class="n">row</span> <span class="o">+</span> <span class="n">nrows</span><span class="p">,</span> <span class="n">col</span><span class="p">:</span><span class="n">col</span> <span class="o">+</span> <span class="n">ncols</span><span class="p">]</span>
-    <span class="k">if</span> <span class="nb">len</span><span class="p">(</span><span class="n">df</span><span class="o">.</span><span class="n">columns</span><span class="p">)</span> <span class="o">&lt;=</span> <span class="n">ncols</span><span class="p">:</span>
-        <span class="n">interact</span><span class="p">(</span><span class="n">peek</span><span class="p">,</span> <span class="n">row</span><span class="o">=</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nb">len</span><span class="p">(</span><span class="n">df</span><span class="p">)</span> <span class="o">-</span> <span class="n">nrows</span><span class="p">,</span> <span class="n">nrows</span><span class="p">),</span> <span class="n">col</span><span class="o">=</span><span class="n">fixed</span><span class="p">(</span><span class="mi">0</span><span class="p">))</span>
-    <span class="k">else</span><span class="p">:</span>
-        <span class="n">interact</span><span class="p">(</span><span class="n">peek</span><span class="p">,</span>
-                 <span class="n">row</span><span class="o">=</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nb">len</span><span class="p">(</span><span class="n">df</span><span class="p">)</span> <span class="o">-</span> <span class="n">nrows</span><span class="p">,</span> <span class="n">nrows</span><span class="p">),</span>
-                 <span class="n">col</span><span class="o">=</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nb">len</span><span class="p">(</span><span class="n">df</span><span class="o">.</span><span class="n">columns</span><span class="p">)</span> <span class="o">-</span> <span class="n">ncols</span><span class="p">))</span>
-    <span class="nb">print</span><span class="p">(</span><span class="s1">&#39;(</span><span class="si">{}</span><span class="s1"> rows, </span><span class="si">{}</span><span class="s1"> columns) total&#39;</span><span class="o">.</span><span class="n">format</span><span class="p">(</span><span class="n">df</span><span class="o">.</span><span class="n">shape</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="n">df</span><span class="o">.</span><span class="n">shape</span><span class="p">[</span><span class="mi">1</span><span class="p">]))</span>
-</pre></div>
-    </div>
-</div>
-</div>
-  </div>
-  <div class="nbinteract-hide_in
-      cell border-box-sizing code_cell rendered">
-    <div class="input">
-<div class="inner_cell">
-    <div class="input_area">
-<div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># nbi:hide_in</span>
-<span class="n">videos</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="s1">&#39;https://github.com/SamLau95/nbinteract/raw/master/notebooks/youtube_trending.csv&#39;</span><span class="p">,</span>
-                     <span class="n">parse_dates</span><span class="o">=</span><span class="p">[</span><span class="s1">&#39;publish_time&#39;</span><span class="p">],</span>
-                     <span class="n">index_col</span><span class="o">=</span><span class="s1">&#39;publish_time&#39;</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">df_interact</span><span class="p">(</span><span class="n">videos</span><span class="p">)</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 class="output_area">
-<div class="output_subarea output_stream output_stdout output_text">
-<pre>(2435 rows, 8 columns) total
-</pre>
-</div>
-</div>
-</div>
-</div>
-  </div>
-<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
-<div class="text_cell_render border-box-sizing rendered_html">
-<h4 id="Dashboard-1">Dashboard 1<a class="anchor-link" href="#Dashboard-1">&#182;</a></h4>
-</div>
-</div>
-</div>
-  <div class="nbinteract-left
-      cell border-box-sizing code_cell rendered">
-    <div class="input">
-<div class="inner_cell">
-    <div class="input_area">
-<div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># nbi:left</span>
-<span class="n">options</span> <span class="o">=</span> <span class="p">{</span>
-    <span class="s1">&#39;title&#39;</span><span class="p">:</span> <span class="s1">&#39;Views for Trending Videos&#39;</span><span class="p">,</span>
-    <span class="s1">&#39;xlabel&#39;</span><span class="p">:</span> <span class="s1">&#39;Date Trending&#39;</span><span class="p">,</span>
-    <span class="s1">&#39;ylabel&#39;</span><span class="p">:</span> <span class="s1">&#39;Views [1k]&#39;</span><span class="p">,</span>
-    <span class="s1">&#39;animation_duration&#39;</span><span class="p">:</span> <span class="mi">500</span><span class="p">,</span>
-    <span class="s1">&#39;aspect_ratio&#39;</span><span class="p">:</span> <span class="mf">1.0</span><span class="p">,</span>
-<span class="p">}</span>
-<span class="k">def</span> <span class="nf">xs</span><span class="p">(</span><span class="n">channel</span><span class="p">):</span>
-    <span class="k">return</span> <span class="n">videos</span><span class="o">.</span><span class="n">loc</span><span class="p">[</span><span class="n">videos</span><span class="p">[</span><span class="s1">&#39;channel_title&#39;</span><span class="p">]</span>
-            <span class="o">==</span> <span class="n">channel</span><span class="p">]</span><span class="o">.</span><span class="n">index</span>
-<span class="k">def</span> <span class="nf">ys</span><span class="p">(</span><span class="n">xs</span><span class="p">):</span>
-    <span class="k">return</span> <span class="p">(</span><span class="n">videos</span><span class="o">.</span><span class="n">loc</span><span class="p">[</span><span class="n">xs</span><span class="p">,</span> <span class="s1">&#39;views&#39;</span><span class="p">])</span><span class="o">/</span><span class="mi">1000</span>
-<span class="n">nbi</span><span class="o">.</span><span class="n">scatter</span><span class="p">(</span><span class="n">xs</span><span class="p">,</span> <span class="n">ys</span><span class="p">,</span>
-  <span class="n">channel</span> <span class="o">=</span>
-    <span class="n">videos</span><span class="p">[</span><span class="s1">&#39;channel_title&#39;</span><span class="p">]</span><span class="o">.</span><span class="n">unique</span><span class="p">()[</span><span class="mi">9</span><span class="p">:</span><span class="mi">15</span><span class="p">],</span>
-    <span class="n">options</span> <span class="o">=</span> <span class="n">options</span><span class="p">)</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="nbinteract-right
-      cell border-box-sizing code_cell rendered">
-    <div class="input">
-<div class="inner_cell">
-    <div class="input_area">
-<div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># nbi:right</span>
-<span class="n">options</span><span class="o">=</span><span class="p">{</span>
-    <span class="s1">&#39;ylabel&#39;</span><span class="p">:</span> <span class="s1">&#39;Proportion per Unit [1k]&#39;</span><span class="p">,</span>
-    <span class="s1">&#39;xlabel&#39;</span><span class="p">:</span> <span class="s1">&#39;Units&#39;</span><span class="p">,</span>
-    <span class="s1">&#39;bins&#39;</span><span class="p">:</span> <span class="mi">100</span><span class="p">,</span>
-    <span class="s1">&#39;aspect_ratio&#39;</span><span class="p">:</span> <span class="mf">1.0</span><span class="p">,</span>
-<span class="p">}</span>
-<span class="k">def</span> <span class="nf">values</span><span class="p">(</span><span class="n">col</span><span class="p">):</span>
-    <span class="n">vals</span> <span class="o">=</span> <span class="n">videos</span><span class="p">[</span><span class="n">col</span><span class="p">]</span>
-    <span class="k">return</span> <span class="p">(</span><span class="n">vals</span><span class="p">[</span><span class="n">vals</span> <span class="o">&lt;</span> <span class="n">vals</span><span class="o">.</span><span class="n">quantile</span><span class="p">(</span><span class="mf">0.8</span><span class="p">)])</span><span class="o">/</span><span class="mi">1000</span>
-<span class="n">nbi</span><span class="o">.</span><span class="n">hist</span><span class="p">(</span>
- <span class="n">values</span><span class="p">,</span><span class="n">col</span> <span class="o">=</span>
- <span class="n">widgets</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="p">[</span><span class="s1">&#39;comment_count&#39;</span><span class="p">,</span> <span class="s1">&#39;likes&#39;</span><span class="p">,</span> <span class="s1">&#39;dislikes&#39;</span><span class="p">,</span> <span class="s1">&#39;views&#39;</span><span class="p">]),</span>
-  <span class="n">options</span> <span class="o">=</span> <span class="n">options</span><span class="p">)</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">
-</div>
-</div>
-</div>
-<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
-<div class="text_cell_render border-box-sizing rendered_html">
-<h4 id="Dashboard-2">Dashboard 2<a class="anchor-link" href="#Dashboard-2">&#182;</a></h4><p>This dashboard example is using the same widgets used for <em>Dashboard 1</em>, but <strong>without</strong> showing the code.</p>
-</div>
-</div>
-</div>
-  <div class="nbinteract-hide_in
-      cell border-box-sizing code_cell rendered">
-    <div class="input">
-<div class="inner_cell">
-    <div class="input_area">
-<div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># nbi:hide_in</span>
-<span class="n">df_interact</span><span class="p">(</span><span class="n">videos</span><span class="p">)</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 class="output_area">
-<div class="output_subarea output_stream output_stdout output_text">
-<pre>(2435 rows, 8 columns) total
-</pre>
-</div>
-</div>
-</div>
-</div>
-  </div>
-  <div class="nbinteract-left nbinteract-hide_in
-      cell border-box-sizing code_cell rendered">
-    <div class="input">
-<div class="inner_cell">
-    <div class="input_area">
-<div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># nbi:hide_in</span>
-<span class="c1"># nbi:left</span>
-<span class="n">options</span> <span class="o">=</span> <span class="p">{</span>
-    <span class="s1">&#39;title&#39;</span><span class="p">:</span> <span class="s1">&#39;Views for Trending Videos&#39;</span><span class="p">,</span>
-    <span class="s1">&#39;xlabel&#39;</span><span class="p">:</span> <span class="s1">&#39;Date Trending&#39;</span><span class="p">,</span>
-    <span class="s1">&#39;ylabel&#39;</span><span class="p">:</span> <span class="s1">&#39;Views [1k]&#39;</span><span class="p">,</span>
-    <span class="s1">&#39;animation_duration&#39;</span><span class="p">:</span> <span class="mi">500</span><span class="p">,</span>
-    <span class="s1">&#39;aspect_ratio&#39;</span><span class="p">:</span> <span class="mf">1.0</span><span class="p">,</span>
-<span class="p">}</span>
-<span class="k">def</span> <span class="nf">xs</span><span class="p">(</span><span class="n">channel</span><span class="p">):</span>
-    <span class="k">return</span> <span class="n">videos</span><span class="o">.</span><span class="n">loc</span><span class="p">[</span><span class="n">videos</span><span class="p">[</span><span class="s1">&#39;channel_title&#39;</span><span class="p">]</span> <span class="o">==</span> <span class="n">channel</span><span class="p">]</span><span class="o">.</span><span class="n">index</span>
-<span class="k">def</span> <span class="nf">ys</span><span class="p">(</span><span class="n">xs</span><span class="p">):</span>
-    <span class="k">return</span> <span class="p">(</span><span class="n">videos</span><span class="o">.</span><span class="n">loc</span><span class="p">[</span><span class="n">xs</span><span class="p">,</span> <span class="s1">&#39;views&#39;</span><span class="p">])</span><span class="o">/</span><span class="mi">1000</span>
-<span class="n">nbi</span><span class="o">.</span><span class="n">scatter</span><span class="p">(</span><span class="n">xs</span><span class="p">,</span> <span class="n">ys</span><span class="p">,</span>
-  <span class="n">channel</span><span class="o">=</span><span class="n">videos</span><span class="p">[</span><span class="s1">&#39;channel_title&#39;</span><span class="p">]</span><span class="o">.</span><span class="n">unique</span><span class="p">()[</span><span class="mi">9</span><span class="p">:</span><span class="mi">15</span><span class="p">],</span>
-  <span class="n">options</span> <span class="o">=</span> <span class="n">options</span><span class="p">)</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="nbinteract-right nbinteract-hide_in
-      cell border-box-sizing code_cell rendered">
-    <div class="input">
-<div class="inner_cell">
-    <div class="input_area">
-<div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># nbi:hide_in</span>
-<span class="c1"># nbi:right</span>
-<span class="n">options</span><span class="o">=</span><span class="p">{</span>
-    <span class="s1">&#39;ylabel&#39;</span><span class="p">:</span> <span class="s1">&#39;Proportion per Unit [1k]&#39;</span><span class="p">,</span>
-    <span class="s1">&#39;xlabel&#39;</span><span class="p">:</span> <span class="s1">&#39;Units&#39;</span><span class="p">,</span>
-    <span class="s1">&#39;bins&#39;</span><span class="p">:</span> <span class="mi">100</span><span class="p">,</span>
-    <span class="s1">&#39;aspect_ratio&#39;</span><span class="p">:</span> <span class="mf">1.0</span><span class="p">,</span>
-<span class="p">}</span>
-<span class="k">def</span> <span class="nf">values</span><span class="p">(</span><span class="n">col</span><span class="p">):</span>
-    <span class="n">vals</span> <span class="o">=</span> <span class="n">videos</span><span class="p">[</span><span class="n">col</span><span class="p">]</span>
-    <span class="k">return</span> <span class="p">(</span><span class="n">vals</span><span class="p">[</span><span class="n">vals</span> <span class="o">&lt;</span> <span class="n">vals</span><span class="o">.</span><span class="n">quantile</span><span class="p">(</span><span class="mf">0.8</span><span class="p">)])</span><span class="o">/</span><span class="mi">1000</span>
-<span class="n">nbi</span><span class="o">.</span><span class="n">hist</span><span class="p">(</span>
-    <span class="n">values</span><span class="p">,</span><span class="n">col</span> <span class="o">=</span>
-    <span class="n">widgets</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="p">[</span><span class="s1">&#39;comment_count&#39;</span><span class="p">,</span> <span class="s1">&#39;likes&#39;</span><span class="p">,</span> <span class="s1">&#39;dislikes&#39;</span><span class="p">,</span> <span class="s1">&#39;views&#39;</span><span class="p">]),</span>
-      <span class="n">options</span> <span class="o">=</span> <span class="n">options</span><span class="p">)</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>