Merge pull request #6 from quarto-dev/renderings-examples

light/dark renderings examples

Author: gordonwoodhull

renderings/.gitignore

@@ -0,0 +1,5 @@
+/.quarto/
+_site
+_site/
+*_files/
+*.html.md

renderings/_publish.yml

@@ -0,0 +1,4 @@
+- source: project
+  quarto-pub:
+    - id: a22b69eb-2309-4489-8eb4-6432f489b51f
+      url: https://examples.quarto.pub/lightdark-renderings-examples

renderings/_quarto.yml

@@ -0,0 +1,31 @@
+project:
+  type: website
+website:
+  title: "light/dark renderings examples"
+  sidebar:
+    style: "docked"
+    contents:
+      - altair.qmd
+      - bokeh.qmd
+      - flextable.qmd
+      - ggiraph.qmd
+      - ggplot.qmd
+      - great-tables.qmd
+      - gt.qmd
+      - heatmaply.qmd
+      - leaflet.qmd
+      - matplotlib.qmd
+      - plotly-python.qmd
+      - plotly-r.qmd
+      - plotnine.qmd
+      - pygal.qmd
+      - seaborn.qmd
+      - thematic.qmd
+
+brand:
+  light: light-brand.yml
+  dark: dark-brand.yml
+
+theme:
+  light: brand
+  dark: [brand, dark-fixups.scss]

renderings/altair.qmd

@@ -0,0 +1,120 @@
+---
+title: altair
+engine: jupyter
+keep-md: true
+---
+
+
+```{python}
+from quarto import theme_brand_altair
+import altair as alt
+
+light_theme = theme_brand_altair('light-brand.yml')
+dark_theme = theme_brand_altair('dark-brand.yml')
+
+alt.theme.register('light_theme', enable=False)(light_theme)
+alt.theme.register('dark_theme', enable=False)(dark_theme);
+```
+
+```{python}
+#| echo: false
+
+# load a sample dataset as a pandas DataFrame
+from vega_datasets import data
+cars = data.cars()
+_ = alt.renderers.enable('html')
+```
+
+### No crossref or caption
+
+```{python}
+#| echo: false
+#| renderings: [light, dark]
+
+chart = alt.Chart(cars).mark_point().encode(
+        x='Horsepower',
+        y='Miles_per_Gallon',
+        color='Origin',
+    ).properties(width=800, height=500).interactive()
+
+alt.theme.enable('light_theme')
+chart.show()
+
+alt.theme.enable('dark_theme')
+chart.show()
+```
+
+
+### with crossref but no caption
+
+::: {#fig-altair-hp-year}
+
+```{python}
+#| echo: false
+#| renderings: [light, dark]
+
+chart = alt.Chart(cars).mark_point().encode(
+        x='Year',
+        y='Horsepower',
+        color='Origin',
+    ).properties(width=800, height=500).interactive()
+
+alt.theme.enable('light_theme')
+chart.show()
+
+alt.theme.enable('dark_theme')
+chart.show()
+```
+
+:::
+
+### caption but no crossref
+
+::: {}
+
+```{python}
+#| echo: false
+#| renderings: [light, dark]
+
+chart = alt.Chart(cars).mark_point().encode(
+        x='Horsepower',
+        y='Acceleration',
+        color='Origin',
+    ).properties(width=800, height=500).interactive()
+
+alt.theme.enable('light_theme')
+chart.show()
+
+alt.theme.enable('dark_theme')
+chart.show()
+```
+
+cars dataset, acceleration by horsepower
+:::
+
+### with crossref and caption
+
+
+::: {#fig-altair-cars-acc-year}
+
+```{python}
+#| echo: false
+#| renderings: [light, dark]
+
+chart = alt.Chart(cars).mark_point().encode(
+        x='Year',
+        y='Acceleration',
+        color='Origin',
+    ).properties(width=800, height=500).interactive()
+
+alt.theme.enable('light_theme')
+chart.show()
+
+alt.theme.enable('dark_theme')
+chart.show()
+```
+
+cars dataset, acceleration by year
+:::
+
+{{< lipsum 2 >}}

renderings/bokeh.qmd

@@ -0,0 +1,140 @@
+---
+title: bokeh
+author: "anthropic claude-3-5-sonnet-latest"
+date: 2025-01-06
+---
+
+## Question
+
+How can we create a working scatter plot matrix (SPLOM) of the iris dataset using Bokeh?
+
+## Overview
+
+We’ll create an interactive scatter plot matrix visualization of the iris dataset using Bokeh, with correct color mapping for different species.
+
+Note: Bokeh dark theme helper is incomplete due to lack of documentation (?)
+
+## Code
+
+```{python}
+#| echo: false
+from quarto import theme_brand_bokeh
+
+light_theme = theme_brand_bokeh('light-brand.yml')
+dark_theme = theme_brand_bokeh('dark-brand.yml')
+```
+
+```{python}
+#| echo: false
+#| renderings: [light, dark]
+from bokeh.plotting import figure, show
+from bokeh.layouts import gridplot
+from bokeh.io import output_notebook
+from bokeh.sampledata.iris import flowers
+from bokeh.models import ColumnDataSource, ColorBar
+from bokeh.transform import factor_cmap
+
+# Enable notebook output; hiding banner helps the first plot
+# with issue described below
+output_notebook(hide_banner=True)
+
+# Create ColumnDataSource for the data
+source = ColumnDataSource(flowers)
+
+# Define the features we want to plot
+features = ['petal_length', 'petal_width', 'sepal_length', 'sepal_width']
+
+# Create color mapper
+color_mapper = factor_cmap('species',
+                         ['#1f77b4', '#ff7f0e', '#2ca02c'],
+                         ['setosa', 'versicolor', 'virginica'])
+
+# Create the plots matrix
+plots = []
+tooltips = [
+    ('Species', '@species'),
+    ('Value', '$data_x, $data_y')
+]
+
+for i, y in enumerate(features):
+    row = []
+    for x in features:
+        plot = figure(width=200, height=200,
+                     tooltips=tooltips,
+                     title="" if x != features[0] or i != 0 else "Iris SPLOM")
+
+        # Add scatter points with proper color mapping
+        plot.scatter(x, y,
+                    color=color_mapper,
+                    size=8,
+                    alpha=0.5,
+                    legend_field='species',
+                    source=source)
+
+        # Configure axes
+        if i != len(features)-1:
+            plot.xaxis.visible = False
+        else:
+            plot.xaxis.axis_label = x
+
+        if x != features[0]:
+            plot.yaxis.visible = False
+        else:
+            plot.yaxis.axis_label = y
+
+        # Show legend only on top-right plot
+        if i != 0 or x != features[-1]:
+            plot.legend.visible = False
+        else:
+            plot.legend.click_policy = "hide"
+
+        plot.grid.grid_line_color = None
+        row.append(plot)
+    plots.append(row)
+
+# Create and show the grid
+grid = gridplot(plots)
+
+light_theme()
+show(grid)
+
+dark_theme()
+show(grid)
+```
+
+Bokeh has issues with emitting extra outputs. Quarto is partly fixing this up but the second plot will currently not work with `renderings`:
+
+```{python}
+#| renderings: [light, dark]
+light_theme()
+show(grid)
+
+dark_theme()
+show(grid)
+```
+
+## Explanation
+
+This code creates a violin plot of the sepal length distribution for each species in the Iris dataset using Bokeh. Here's a breakdown of what the code does:
+
+1. We start by importing the necessary libraries, including Pandas for data manipulation, NumPy for numerical operations, and various Bokeh modules for plotting.
+
+2. We load the Iris dataset using scikit-learn's `load_iris()` function and convert it to a Pandas DataFrame for easy manipulation.
+
+3. We prepare the data for the violin plot by defining the categories (iris species) and choosing a color palette.
+
+4. We create a Bokeh figure with appropriate titles and labels.
+
+5. For each iris species, we:
+   - Subset the data for that species.
+   - Compute the kernel density estimation (KDE) using NumPy's histogram function.
+   - Scale the KDE to create the violin shape.
+   - Add the violin shape to the plot using Bokeh's `patch` method, creating a symmetrical violin by mirroring the shape.
+
+6. We customize the plot by removing the x-axis grid, setting the y-axis range, and adding axis labels.
+
+7. Finally, we display the plot using Bokeh's `show` function.
+
+The resulting violin plot will show the distribution of sepal lengths for each iris species. The width of each "violin" represents the frequency of data points at that y-value, giving us a clear visualization of the data distribution. This allows us to compare not just the central tendencies of each species' sepal length, but also the spread and shape of the distributions.
+
+This visualization can help us identify differences between the species. For example, we might see that one species has a broader distribution of sepal lengths, while another has a more concentrated distribution. We might also observe multimodal distributions or other interesting patterns that wouldn't be apparent from simple summary statistics.

renderings/dark-brand.yml

@@ -0,0 +1,12 @@
+color:
+  background: "#282B30"
+  foreground: "#aaaaaa"
+  primary: white
+typography:
+  fonts:
+    - family: "Montserrat"
+      source: google
+  base:
+    family: "Montserrat"
+  monospace-block:
+    background-color: "rgba(233, 236, 239, 0.14)"

renderings/dark-fixups.scss

@@ -0,0 +1,5 @@
+/*-- scss:rules --*/
+
+nav.sidebar.sidebar-navigation:not(.rollup) {
+  background-color: #282B30;
+}

renderings/flextable.qmd

@@ -0,0 +1,37 @@
+---
+title: flextable
+execute:
+  echo: false
+  warning: false
+---
+
+```{r}
+#| echo: false
+#| warning: false
+library(flextable)
+library(quarto)
+
+light_theme <- theme_brand_flextable('light-brand.yml')
+dark_theme <- theme_brand_flextable('dark-brand.yml')
+```
+
+```{r}
+#| renderings: [light, dark]
+
+ft <- flextable(airquality[ sample.int(10),])
+ft <- add_header_row(ft,
+  colwidths = c(4, 2),
+  values = c("Air quality", "Time")
+)
+ft <- theme_vanilla(ft)
+ft <- add_footer_lines(ft, "Daily air quality measurements in New York, May to September 1973.")
+ft <- color(ft, part = "footer", color = "#666666")
+ft <- set_caption(ft, caption = "New York Air Quality Measurements")
+
+ft |> light_theme()
+ft |> dark_theme()
+```
+
+Here's a [link](https://example.com).
+
+{{< lipsum 2 >}}

renderings/ggiraph.qmd

@@ -0,0 +1,24 @@
+---
+title: ggiraph
+---
+
+```{r}
+#| echo: false
+#| warning: false
+library(quarto)
+library(ggplot2)
+library(ggiraph)
+
+light_theme <- theme_brand_ggplot("light-brand.yml")
+dark_theme <- theme_brand_ggplot("dark-brand.yml")
+```
+
+```{r}
+#| renderings: [light, dark]
+cars <- ggplot(mtcars, aes(mpg, wt)) +
+  geom_point_interactive(aes(colour = factor(cyl), tooltip = rownames(mtcars))) +
+  scale_colour_manual(values = c("darkorange", "purple", "cyan4"))
+
+girafe(ggobj = cars + light_theme)
+girafe(ggobj = cars + dark_theme)
+```