π» Week 03, Day 03 - Lab
Building interactive charts and dashboards
By the end of this lab, you should be able to: i) Create and render Quarto Markdown documents in VS Code, ii) Understand the difference between static websites and interactive dashboards, iii) Build interactive visualisations using Plotly and Streamlit, iv) Deploy a simple dashboard to share your findings, v) Choose appropriate tools for different communication needs.
This morning, we learned how to build static websites with GitHub Pages and style pandas DataFrames for web display. This afternoon, weβll explore more advanced communication tools: Quarto Markdown for enhanced documents and interactive dashboards for dynamic data exploration.
β° Wednesday, 30 July 2025 | Either 2:00-3.30pm or 3.30-5:00pm π Check your timetable for the location of your class
π£οΈ Lab Roadmap
Part 1: Introduction to Quarto Markdown (45 min)
Quarto is a modern publishing system that combines the best of Jupyter notebooks and traditional markdown. It allows you to create beautiful, interactive documents that can include code, visualisations, and rich formatting.
Your teacher will demonstrate:
- How Quarto differs from regular markdown files
- The VS Code Quarto extension and its features
- The basic workflow: write β render β preview
- Why Quarto is powerful for data science communication
Important: Weβre creating a test file called docs/alternative.qmd
- this is just for learning purposes and should NOT be confused with your main docs/index.md
website file.
π― ACTION POINTS
Create a test Quarto file
In your projectβs
docs/
folder, create a new file calledalternative.qmd
(this is just for testing - donβt worry about it affecting your main website).Copy the example code
Copy this exact code into your
alternative.qmd
file:--- title: "Quarto Basics" format: html: code-fold: true self-contained: true theme: cosmo jupyter: python3 --- For a demonstration of a line plot on a polar axis, see @fig-polar.
Then add a line with the following:
```{python}
to identify the next section as a code chunk.Then add this inside the code chunk:
#| label: fig-polar #| fig-cap: "A line plot on a polar axis" import numpy as np import matplotlib.pyplot as plt r = np.arange(0, 2, 0.01) theta = 2 * np.pi * r fig, ax = plt.subplots( subplot_kw = {'projection': 'polar'} ) ax.plot(theta, r) ax.set_rticks([0.5, 1, 1.5, 2]) ax.grid(True) plt.show() ```
(This example was taken from the official Quarto documentation about the VS Code extension.)
Render and preview
- In VS Code, open your
alternative.qmd
file - Press
Ctrl+Shift+K
(orCmd+Shift+K
on Mac) to render - Watch as Quarto processes your markdown and Python code
- The preview should open showing your polar plot
- In VS Code, open your
Experiment with the code
Try changing the line
theta = 2 * np.pi * r
totheta = 4 * np.pi * r
and re-render to see the difference.
What you should observe:
- The YAML header controls document options
- The
#|
syntax provides cell-specific options - Code cells execute and display output inline
- Cross-references work automatically (
@fig-polar
) - The
code-fold: true
option hides code by default
Ask your teacher if: - The render doesnβt work - You get import errors - The preview doesnβt appear - You want to understand any part of the syntax
π Think about it: How is this different from a regular Jupyter notebook? What advantages does Quarto offer for sharing your work?
π£οΈ CLASSROOM DISCUSSION
Your class teacher will guide a conversation about the following questions:
- When would you want to use Quarto instead of the simple
index.md
file?
- When would you want to use Quarto instead of the simple
Part 2: Working on your project website (45 min)
Use this time to work on your project website and get help from your teacher.