From 3759ff3ddb91b8d732e8bdba475b6d20b1a49ea8 Mon Sep 17 00:00:00 2001
From: Filomena <gfilo@liverpool.ac.uk>
Date: Wed, 20 Mar 2024 10:02:18 +0000
Subject: [PATCH] docs

---
 docs/labs/w08_dashboards.html | 59 +++++++++++++++--------------------
 index.tex                     | 10 ++----
 2 files changed, 27 insertions(+), 42 deletions(-)

diff --git a/docs/labs/w08_dashboards.html b/docs/labs/w08_dashboards.html
index 63a5a32..6b8bf5c 100644
--- a/docs/labs/w08_dashboards.html
+++ b/docs/labs/w08_dashboards.html
@@ -224,24 +224,20 @@
     <h2 id="toc-title">Table of contents</h2>
    
   <ul>
-  <li><a href="#building-dasbhboards" id="toc-building-dasbhboards" class="nav-link active" data-scroll-target="#building-dasbhboards"><span class="header-section-number">8</span> Building Dasbhboards</a>
+  <li><a href="#creating-a-basic-dashboard-map-date-slider" id="toc-creating-a-basic-dashboard-map-date-slider" class="nav-link active" data-scroll-target="#creating-a-basic-dashboard-map-date-slider"><span class="header-section-number">7.1</span> Creating a Basic Dashboard: Map + Date Slider</a>
   <ul class="collapse">
-  <li><a href="#importing-the-data" id="toc-importing-the-data" class="nav-link" data-scroll-target="#importing-the-data"><span class="header-section-number">8.1</span> Importing the Data</a></li>
-  <li><a href="#creating-a-basic-dashboard-map-date-slider" id="toc-creating-a-basic-dashboard-map-date-slider" class="nav-link" data-scroll-target="#creating-a-basic-dashboard-map-date-slider"><span class="header-section-number">8.2</span> Creating a Basic Dashboard: Map + Date Slider</a>
-  <ul class="collapse">
-  <li><a href="#the-bind-function" id="toc-the-bind-function" class="nav-link" data-scroll-target="#the-bind-function"><span class="header-section-number">8.2.1</span> The <code>bind</code> function</a></li>
+  <li><a href="#the-bind-function" id="toc-the-bind-function" class="nav-link" data-scroll-target="#the-bind-function"><span class="header-section-number">7.1.1</span> The <code>bind</code> function</a></li>
   </ul></li>
-  <li><a href="#some-more-widgets" id="toc-some-more-widgets" class="nav-link" data-scroll-target="#some-more-widgets"><span class="header-section-number">8.3</span> Some More Widgets</a>
+  <li><a href="#some-more-widgets" id="toc-some-more-widgets" class="nav-link" data-scroll-target="#some-more-widgets"><span class="header-section-number">7.2</span> Some More Widgets</a>
   <ul class="collapse">
-  <li><a href="#subsetting-the-dataframe-on-the-basis-of-categorical-variables" id="toc-subsetting-the-dataframe-on-the-basis-of-categorical-variables" class="nav-link" data-scroll-target="#subsetting-the-dataframe-on-the-basis-of-categorical-variables"><span class="header-section-number">8.3.1</span> Subsetting the Dataframe on the basis of categorical variables</a></li>
+  <li><a href="#subsetting-the-dataframe-on-the-basis-of-categorical-variables" id="toc-subsetting-the-dataframe-on-the-basis-of-categorical-variables" class="nav-link" data-scroll-target="#subsetting-the-dataframe-on-the-basis-of-categorical-variables"><span class="header-section-number">7.2.1</span> Subsetting the Dataframe on the basis of categorical variables</a></li>
   </ul></li>
-  <li><a href="#complex-layouts" id="toc-complex-layouts" class="nav-link" data-scroll-target="#complex-layouts"><span class="header-section-number">8.4</span> Complex Layouts</a>
+  <li><a href="#complex-layouts" id="toc-complex-layouts" class="nav-link" data-scroll-target="#complex-layouts"><span class="header-section-number">7.3</span> Complex Layouts</a>
   <ul class="collapse">
-  <li><a href="#using-folium-maps" id="toc-using-folium-maps" class="nav-link" data-scroll-target="#using-folium-maps"><span class="header-section-number">8.4.1</span> Using Folium Maps</a></li>
-  </ul></li>
-  <li><a href="#grid-layouts" id="toc-grid-layouts" class="nav-link" data-scroll-target="#grid-layouts"><span class="header-section-number">8.5</span> Grid Layouts</a></li>
-  <li><a href="#alternative-widgets" id="toc-alternative-widgets" class="nav-link" data-scroll-target="#alternative-widgets"><span class="header-section-number">8.6</span> Alternative Widgets</a></li>
+  <li><a href="#using-folium-maps" id="toc-using-folium-maps" class="nav-link" data-scroll-target="#using-folium-maps"><span class="header-section-number">7.3.1</span> Using Folium Maps</a></li>
   </ul></li>
+  <li><a href="#grid-layouts" id="toc-grid-layouts" class="nav-link" data-scroll-target="#grid-layouts"><span class="header-section-number">7.4</span> Grid Layouts</a></li>
+  <li><a href="#alternative-widgets" id="toc-alternative-widgets" class="nav-link" data-scroll-target="#alternative-widgets"><span class="header-section-number">7.5</span> Alternative Widgets</a></li>
   </ul>
 <div class="toc-actions"><div><i class="bi bi-github"></i></div><div class="action-links"><p><a href="https://github.dev/GDSL-UL/wma/blob/main/labs/w08_dashboards.ipynb" class="toc-action">Edit this page</a></p></div></div></nav>
     </div>
@@ -277,8 +273,6 @@ <h1 class="title"><span class="chapter-number">7</span>&nbsp; <span class="chapt
 
 </header>
 
-<section id="building-dasbhboards" class="level1" data-number="8">
-<h1 data-number="8"><span class="header-section-number">8</span> Building Dasbhboards</h1>
 <p>The <strong>Lecture slides</strong> can be found <a href="https://github.com/GDSL-UL/wma/raw/main/lectures/w08.pdf">here</a>.</p>
 <p>This <strong>lab</strong>’s notebook can be downloaded from <a href="https://github.com/GDSL-UL/wma/blob/main/labs/w08_dashboards.ipynb">here</a>.</p>
 <div class="cell" data-execution_count="1">
@@ -1466,8 +1460,7 @@ <h1 data-number="8"><span class="header-section-number">8</span> Building Dasbhb
 </style>
 </div>
 </div>
-<section id="importing-the-data" class="level2" data-number="8.1">
-<h2 data-number="8.1" class="anchored" data-anchor-id="importing-the-data"><span class="header-section-number">8.1</span> Importing the Data</h2>
+<p><strong>Importing the Data</strong></p>
 <div class="cell" data-execution_count="3">
 <div class="sourceCode cell-code" id="cb3"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a>df <span class="op">=</span> pd.read_csv(<span class="st">'../data/GTD_2022.csv'</span>, low_memory<span class="op">=</span><span class="va">False</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
 </div>
@@ -1548,9 +1541,8 @@ <h2 data-number="8.1" class="anchored" data-anchor-id="importing-the-data"><span
 </div>
 </div>
 </div>
-</section>
-<section id="creating-a-basic-dashboard-map-date-slider" class="level2" data-number="8.2">
-<h2 data-number="8.2" class="anchored" data-anchor-id="creating-a-basic-dashboard-map-date-slider"><span class="header-section-number">8.2</span> Creating a Basic Dashboard: Map + Date Slider</h2>
+<section id="creating-a-basic-dashboard-map-date-slider" class="level2" data-number="7.1">
+<h2 data-number="7.1" class="anchored" data-anchor-id="creating-a-basic-dashboard-map-date-slider"><span class="header-section-number">7.1</span> Creating a Basic Dashboard: Map + Date Slider</h2>
 <p>We are going to use <code>Panel</code> a Python library for creating interactive and dynamic web-based dashboards and applications. It allows data scientists, analysts, and so forth, to turn data sets into interactive dashboards using a wide array of widgets, plots, and layouts without requiring deep web development skills. Panel supports various plotting libraries like Matplotlib, Bokeh, and Plotly, as well as our friend Folium, and allows working with Pandas, NumPy, and others. It’s flexible enough to serve either as a standalone app or embedded in existing web applications, and it can be deployed easily. Have a look at this <a href="https://medium.com/@marcskovmadsen/i-prefer-to-use-panel-for-my-data-apps-here-is-why-1ff5d2b98e8f">article</a> for some insights on how to exploit <code>Panel</code> for nice data visualisations.</p>
 <div class="cell" data-execution_count="5">
 <div class="sourceCode cell-code" id="cb5"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true" tabindex="-1"></a>df[<span class="st">'date'</span>]<span class="op">=</span> pd.to_datetime(df[<span class="st">'date'</span>], dayfirst<span class="op">=</span><span class="va">True</span>)</span>
@@ -1725,8 +1717,8 @@ <h2 data-number="8.2" class="anchored" data-anchor-id="creating-a-basic-dashboar
 </div>
 </div>
 <p><code>dashboard.servable()</code> makes the dashboard “servable,” meaning it can be run as a standalone app or served via a notebook, depending on how you’re using <code>Panel</code>. When you call <code>.servable()</code> on a Panel object, you’re essentially telling Panel that this is the object you want to display when the dashboard is run. If you’re working in a Jupyter notebook, this allows the dashboard to be rendered inline.</p>
-<section id="the-bind-function" class="level3" data-number="8.2.1">
-<h3 data-number="8.2.1" class="anchored" data-anchor-id="the-bind-function"><span class="header-section-number">8.2.1</span> The <code>bind</code> function</h3>
+<section id="the-bind-function" class="level3" data-number="7.1.1">
+<h3 data-number="7.1.1" class="anchored" data-anchor-id="the-bind-function"><span class="header-section-number">7.1.1</span> The <code>bind</code> function</h3>
 <p>In <code>Panel</code>, <code>pn.bind</code> is a function that creates a dynamic link between widget values and a function, enabling interactive and reactive applications without the need for explicit callbacks or event handlers. When you use <code>pn.bind</code>, you’re essentially telling Panel to watch certain parameters (like the value of a widget) and call a specified function whenever those parameters change, automatically passing the new values to the function.</p>
 <p>Here’s a breakdown of how <code>pn.bind</code> works:</p>
 <ul>
@@ -1823,8 +1815,8 @@ <h3 data-number="8.2.1" class="anchored" data-anchor-id="the-bind-function"><spa
 <p><code>pn.Column(...)</code> creates a vertical layout (column) containing the row with certain elements/widgets/panes. <code>pn.Column</code> is used when you want to stack components vertically. Contrarily, <code>pn.Row()</code>: creates a horizontal layout (row). <code>pn.Row</code> is used when you want to place components side by side horizontally. In both cases you can add one or more elements.</p>
 </section>
 </section>
-<section id="some-more-widgets" class="level2" data-number="8.3">
-<h2 data-number="8.3" class="anchored" data-anchor-id="some-more-widgets"><span class="header-section-number">8.3</span> Some More Widgets</h2>
+<section id="some-more-widgets" class="level2" data-number="7.2">
+<h2 data-number="7.2" class="anchored" data-anchor-id="some-more-widgets"><span class="header-section-number">7.2</span> Some More Widgets</h2>
 <p><code>Panel</code> offers a range of widgets for interactive user inputs. These widgets can be used to receive input from users and update the dashboards/panels accordingly. Have a look <a href="https://panel.holoviz.org/reference/index.html#widgets">here</a> for a list of other widgets and usage examples.</p>
 <div class="cell" data-execution_count="10">
 <div class="sourceCode cell-code" id="cb10"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb10-1"><a href="#cb10-1" aria-hidden="true" tabindex="-1"></a><span class="co"># Select widget for choosing a city</span></span>
@@ -1921,8 +1913,8 @@ <h2 data-number="8.3" class="anchored" data-anchor-id="some-more-widgets"><span
 })(window);</script>
 </div>
 </div>
-<section id="subsetting-the-dataframe-on-the-basis-of-categorical-variables" class="level3" data-number="8.3.1">
-<h3 data-number="8.3.1" class="anchored" data-anchor-id="subsetting-the-dataframe-on-the-basis-of-categorical-variables"><span class="header-section-number">8.3.1</span> Subsetting the Dataframe on the basis of categorical variables</h3>
+<section id="subsetting-the-dataframe-on-the-basis-of-categorical-variables" class="level3" data-number="7.2.1">
+<h3 data-number="7.2.1" class="anchored" data-anchor-id="subsetting-the-dataframe-on-the-basis-of-categorical-variables"><span class="header-section-number">7.2.1</span> Subsetting the Dataframe on the basis of categorical variables</h3>
 <div class="cell" data-execution_count="12">
 <div class="sourceCode cell-code" id="cb12"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb12-1"><a href="#cb12-1" aria-hidden="true" tabindex="-1"></a><span class="co"># Create a dataset just for Iraq (feel free to change it)</span></span>
 <span id="cb12-2"><a href="#cb12-2" aria-hidden="true" tabindex="-1"></a>iraq_df <span class="op">=</span> df[df.country_txt <span class="op">==</span> <span class="st">'Iraq'</span>].copy()</span>
@@ -2044,8 +2036,8 @@ <h3 data-number="8.3.1" class="anchored" data-anchor-id="subsetting-the-datafram
 </div>
 </section>
 </section>
-<section id="complex-layouts" class="level2" data-number="8.4">
-<h2 data-number="8.4" class="anchored" data-anchor-id="complex-layouts"><span class="header-section-number">8.4</span> Complex Layouts</h2>
+<section id="complex-layouts" class="level2" data-number="7.3">
+<h2 data-number="7.3" class="anchored" data-anchor-id="complex-layouts"><span class="header-section-number">7.3</span> Complex Layouts</h2>
 <p>Layouts in Panel are used to organize widgets and plots in a structured manner. We are mainly working with <code>pn.Row()</code> and <code>pn.Column()</code> but familiarise yourself with other possible layouts (<a href="https://panel.holoviz.org/reference/index.html#layouts">see here</a>).</p>
 <div class="cell" data-execution_count="15">
 <div class="sourceCode cell-code" id="cb15"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb15-1"><a href="#cb15-1" aria-hidden="true" tabindex="-1"></a><span class="co"># still using the country selector here</span></span>
@@ -2161,8 +2153,8 @@ <h2 data-number="8.4" class="anchored" data-anchor-id="complex-layouts"><span cl
 })(window);</script>
 </div>
 </div>
-<section id="using-folium-maps" class="level3" data-number="8.4.1">
-<h3 data-number="8.4.1" class="anchored" data-anchor-id="using-folium-maps"><span class="header-section-number">8.4.1</span> Using Folium Maps</h3>
+<section id="using-folium-maps" class="level3" data-number="7.3.1">
+<h3 data-number="7.3.1" class="anchored" data-anchor-id="using-folium-maps"><span class="header-section-number">7.3.1</span> Using Folium Maps</h3>
 <p>As mentioned, <code>Panel</code> allows us to incoporate <code>folium</code> maps.</p>
 <div class="cell" data-execution_count="18">
 <div class="sourceCode cell-code" id="cb18"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb18-1"><a href="#cb18-1" aria-hidden="true" tabindex="-1"></a><span class="co"># let's reset variables to avoid interactions between different functions/dashboards</span></span>
@@ -2934,8 +2926,8 @@ <h3 data-number="8.4.1" class="anchored" data-anchor-id="using-folium-maps"><spa
 </div>
 </section>
 </section>
-<section id="grid-layouts" class="level2" data-number="8.5">
-<h2 data-number="8.5" class="anchored" data-anchor-id="grid-layouts"><span class="header-section-number">8.5</span> Grid Layouts</h2>
+<section id="grid-layouts" class="level2" data-number="7.4">
+<h2 data-number="7.4" class="anchored" data-anchor-id="grid-layouts"><span class="header-section-number">7.4</span> Grid Layouts</h2>
 <p><code>GridSpec</code> in <code>Panel</code> is a layout object that allows you to arrange your visual components in a grid-like structure, specifying the position and size of each component by defining rows and columns. You can access and assign components to specific areas of the grid using slicing syntax, e.g., <code>grid[0, 0] = component</code> places a component in the first row and first column of the grid.</p>
 <p>Now, let’s try to combine the map, the scatterplot, and the dataframe panel in a unique dashboard. We are going to create a <code>GridSpecLayout</code>, see https://panel.holoviz.org/reference/layouts/GridSpec.html.</p>
 <div class="cell" data-execution_count="65">
@@ -3737,8 +3729,8 @@ <h2 data-number="8.5" class="anchored" data-anchor-id="grid-layouts"><span class
 <p>Think about including other widgets to improve the visualisation. For some countries it’s impossible to look at the scatter plot at first, because the amount of records associated with it.</p>
 <p>Also consider using <code>Spacer</code>s to organise your layout, see: https://panel.holoviz.org/reference/layouts/GridSpec.html</p>
 </section>
-<section id="alternative-widgets" class="level2" data-number="8.6">
-<h2 data-number="8.6" class="anchored" data-anchor-id="alternative-widgets"><span class="header-section-number">8.6</span> Alternative Widgets</h2>
+<section id="alternative-widgets" class="level2" data-number="7.5">
+<h2 data-number="7.5" class="anchored" data-anchor-id="alternative-widgets"><span class="header-section-number">7.5</span> Alternative Widgets</h2>
 <p>Let’s play with another widget that we briefly mentioned above, the <code>RadioButtonGroup</code> widget.</p>
 <div class="cell">
 <div class="sourceCode cell-code" id="cb29"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb29-1"><a href="#cb29-1" aria-hidden="true" tabindex="-1"></a><span class="co"># let's reset variables to avoid interactions between different functions/dashboards</span></span>
@@ -3902,7 +3894,6 @@ <h2 data-number="8.6" class="anchored" data-anchor-id="alternative-widgets"><spa
 </div>
 
 
-</section>
 </section>
 
 </main> <!-- /main -->
diff --git a/index.tex b/index.tex
index fe06681..51f4af3 100644
--- a/index.tex
+++ b/index.tex
@@ -196,7 +196,7 @@
 
 \begin{document}
 \maketitle
-\ifdefined\Shaded\renewenvironment{Shaded}{\begin{tcolorbox}[frame hidden, enhanced, breakable, sharp corners, boxrule=0pt, interior hidden, borderline west={3pt}{0pt}{shadecolor}]}{\end{tcolorbox}}\fi
+\ifdefined\Shaded\renewenvironment{Shaded}{\begin{tcolorbox}[frame hidden, boxrule=0pt, interior hidden, borderline west={3pt}{0pt}{shadecolor}, sharp corners, enhanced, breakable]}{\end{tcolorbox}}\fi
 
 \renewcommand*\contentsname{Table of contents}
 {
@@ -13078,11 +13078,6 @@ \subsubsection{Public Transport Bus
 \hypertarget{dashboards}{%
 \chapter{Dashboards}\label{dashboards}}
 
-\bookmarksetup{startatroot}
-
-\hypertarget{building-dasbhboards}{%
-\chapter{Building Dasbhboards}\label{building-dasbhboards}}
-
 The \textbf{Lecture slides} can be found
 \href{https://github.com/GDSL-UL/wma/raw/main/lectures/w08.pdf}{here}.
 
@@ -13143,8 +13138,7 @@ \chapter{Building Dasbhboards}\label{building-dasbhboards}}
 Unable to display output for mime type(s): text/html
 \end{verbatim}
 
-\hypertarget{importing-the-data}{%
-\section{Importing the Data}\label{importing-the-data}}
+\textbf{Importing the Data}
 
 \begin{Shaded}
 \begin{Highlighting}[]