Skip to content

Commit

Permalink
docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@g-filomena
g-filomena committed Mar 20, 2024
1 parent da0c06e commit 3759ff3
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 42 deletions.
59 changes: 25 additions & 34 deletions docs/labs/w08_dashboards.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -3902,7 +3894,6 @@ <h2 data-number="8.6" class="anchored" data-anchor-id="alternative-widgets"><spa
</div>


</section>
</section>

</main> <!-- /main -->
Expand Down
10 changes: 2 additions & 8 deletions index.tex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
{
Expand Down Expand Up @@ -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}.

Expand Down Expand Up @@ -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}[]
Expand Down

0 comments on commit 3759ff3

Please sign in to comment.