πŸ’» Week 03, Day 03 - Lab

Building interactive charts and dashboards

Author

Dr Jon Cardoso-Silva

Last updated

30 July 2025

πŸ₯… Learning Objectives

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.

ME204 course icon

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

  1. Create a test Quarto file

    In your project’s docs/ folder, create a new file called alternative.qmd (this is just for testing - don’t worry about it affecting your main website).

  2. 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.)

  3. Render and preview

    • In VS Code, open your alternative.qmd file
    • Press Ctrl+Shift+K (or Cmd+Shift+K on Mac) to render
    • Watch as Quarto processes your markdown and Python code
    • The preview should open showing your polar plot
  4. Experiment with the code

    Try changing the line theta = 2 * np.pi * r to theta = 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?

  1. πŸ—£οΈ 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?

Part 2: Working on your project website (45 min)

Use this time to work on your project website and get help from your teacher.