Add Altair example to Python HTML output

r-wasm · Aug 28, 2024 · 23494ec · 23494ec
1 parent e33a900
commit 23494ec
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 4 deletions.
diff --git a/docs/_quarto.yml b/docs/_quarto.yml
@@ -35,7 +35,7 @@ website:
  - other/tables.qmd
  - other/resources.qmd
  - other/htmlwidgets.qmd
- - other/jupyter.qmd
+ - other/py_output.qmd
  - other/slides.qmd
  - text: "---"
  - section: Reference

diff --git a/docs/other/htmlwidgets.qmd b/docs/other/htmlwidgets.qmd
@@ -21,7 +21,7 @@ library(gt)
 library(leaflet)
 ```
 
-The `quarto-live` extension has support for displaying the output of R's popular [`htmltools`](https://rstudio.github.io/htmltools/) and [htmlWidgets](https://www.htmlwidgets.org/) packages, making rich HTML and JavaScript output possible with interactive code blocks.
+The `quarto-live` extension has support for displaying the output of R's popular [`htmltools`](https://rstudio.github.io/htmltools/) and [htmlwidgets](https://www.htmlwidgets.org/) packages, making rich HTML and JavaScript output possible with interactive code blocks.
 
 ## Example: `htmltools`
 

diff --git a/docs/other/jupyter.qmd → docs/other/py_output.qmd b/docs/other/jupyter.qmd → docs/other/py_output.qmd
@@ -1,5 +1,6 @@
 ---
-title: Jupyter Widgets
+title: Python HTML Output
+subtitle: Rich IPython output, HTML content, and Jupyter Widgets
 format: live-html
 toc: true
 resources:
@@ -8,11 +9,14 @@ pyodide:
  packages:
  - matplotlib
  - ipywidgets
+ - altair
+ - numpy
+ - pandas
 ---
 
 The `quarto-live` extension has support for displaying several types of `ipython` [rich output](https://ipython.readthedocs.io/en/stable/interactive/plotting.html#rich-outputs) and [Jupyter Widgets](https://ipywidgets.readthedocs.io/en/latest/) with interactive code blocks.
 
-## Example: `ipython` rich output
+## Example: IPython rich output
 
 ```{pyodide}
 from IPython.display import HTML
@@ -22,6 +26,32 @@ display(HTML("<p>This is HTML output, and below is an image.</p>"))
 Image(filename='images/python-logo.png') 
 ```
 
+## Example: Visualisation using Altair
+
+```{pyodide}
+import altair as alt
+import numpy as np
+import pandas as pd
+
+x, y = np.meshgrid(range(-5, 5), range(-5, 5))
+z = x ** 2 + y ** 2
+
+source = pd.DataFrame({'x': x.ravel(),
+ 'y': y.ravel(),
+ 'z': z.ravel()})
+
+alt.Chart(source).mark_rect().encode(
+ x='x:O',
+ y='y:O',
+ color='z:Q',
+ tooltip=['x', 'y', 'z']
+).properties(
+ width='container',
+ height=300
+)
+```
+
+
 ## Example: Jupyter Widgets
 
 ```{pyodide}