Example Interactive Notebook

Sample notebook demonstrating execution parameters and interactive visualizations

Introduction

This example demonstrates how Quarto notebooks work on hosted websites:

• Code executes during build - Python runs when you build the site, not in the browser
• Results are static - The output is saved as HTML
• Widgets are interactive - Plotly, Leaflet, and other JS-based widgets remain interactive after hosting

Execution Parameters

This notebook includes the following execution settings (see raw metadata above):

• eval: true - Execute code during build
• echo: true - Show source code
• warning: false - Hide warnings
• cache: true - Cache results for faster rebuilds
• code-fold: show - Code is visible but can be collapsed
• code-tools: true - Adds download source button

# Basic Python execution
import numpy as np
import pandas as pd

# This code executes during site build, results are saved as HTML
data = {
    'Category': ['Geospatial', 'Data Science', 'Python', 'Visualization'],
    'Count': [15, 12, 20, 8]
}
df = pd.DataFrame(data)
print("Sample data:")
df

Sample data:

	Category	Count
0	Geospatial	15
1	Data Science	12
2	Python	20
3	Visualization	8

Next Steps

Replace this notebook with your own content or delete this example directory.

How This Works After Hosting

When you run quarto render or quarto publish:

1. ✅ Python code executes and generates outputs
2. ✅ Outputs are saved as static HTML
3. ✅ JavaScript widgets (Plotly, Leaflet) remain interactive
4. ❌ Python code does not re-execute in the browser

For truly executable Python in the browser, you’d need solutions like JupyterLite or Pyodide integration (advanced setup).

# Example with Plotly - remains interactive after hosting
# Uncomment to use (requires: pip install plotly)

import plotly.express as px
import plotly.io as pio

# Set renderer for notebook/HTML output
pio.renderers.default = "notebook"

fig = px.bar(df, x='Category', y='Count', 
             title='Interactive Bar Chart (Try hovering!)',
             color='Count')
fig.show()

# Other interactive widget libraries that work well:
# - plotly (charts and graphs)
# - folium (maps)
# - ipyleaflet (geospatial maps)
# - bokeh (visualizations)

Interactive Visualization Example

For true interactivity after hosting, use JavaScript-based widgets like Plotly. These remain interactive in the browser without re-executing Python code.