---
title: "Quarto Basics"
# title-block-banner: true
title-block-style: default
date: 2023-05-05
# title-block-banner-color: "#666666"
# title-block-banner: "#666666"
# pandoc:
# - default-image-extension: 'svg'
# title-block-banner-color: "#bdbdbd"
# revealjs:
# embed-resources: true
# theme: dark
# highlight-style: atom-one
# output-file: slides-revealjs.html
author:
name: Sam Foreman
url: https://samforeman.me
affiliation: Argonne National Laboratory
affiliation-url: https://alcf.anl.gov/about/people/sam-foreman
---
## Polar Axis
For a demonstration of a line plot on a polar axis, see @fig-polar
```{python}
#| label: fig-polar
#| fig-cap: "A line plot on a polar axis"
import numpy as np
import matplotlib.pyplot as plt
plt.rcParams.update({
'axes.facecolor' : 'none' ,
'figure.facecolor' : 'none' ,
'savefig.facecolor' : 'none' ,
'savefig.format' : 'svg' ,
'axes.edgecolor' : 'none' ,
'axes.grid' : True ,
'axes.labelcolor' : '#666' ,
'axes.titlecolor' : '#666' ,
'grid.color' : '#666' ,
'text.color' : '#666' ,
'grid.linestyle' : '--' ,
'grid.linewidth' : 0.5 ,
'grid.alpha' : 0.4 ,
'xtick.color' : 'none' ,
'ytick.color' : 'none' ,
'xtick.labelcolor' : '#666' ,
'legend.edgecolor' : 'none' ,
'ytick.labelcolor' : '#666' ,
'savefig.transparent' : True ,
})
r = np.arange(0 , 2 , 0.01 )
theta = 2 * np.pi * r
fix, ax = plt.subplots(
subplot_kw = {'projection' : 'polar' }
)
assert isinstance (ax, plt.PolarAxes)
ax.plot(theta, r)
ax.set_rticks([0.5 , 1. , 1.5 , 2. ])
ax.grid(True )
plt.show()
```
::: {.callout-warning}
In order for a figure to be cross-referenceable, its label must start with the fig- prefix.
:::
---
## Plotly
```{python}
#| label: fig-plotly
#| fig-cap: "A plot made using plotly express"
import plotly.express as px
gapminder = px.data.gapminder()
gapminder2007 = gapminder.query('year == 2007' )
fig = px.scatter(
gapminder2007,
x= "gdpPercap" ,
y= "lifeExp" ,
color= "continent" ,
size= "pop" ,
size_max= 60 ,
hover_name= "country" ,
template= "plotly_dark" ,
)
fig.show()
```
---
## Jupyter Widgets
```{python}
from ipyleaflet import Map, Marker, basemaps, basemap_to_tiles
m = Map(
basemap= basemap_to_tiles(
basemaps.NASAGIBS.ModisTerraTrueColorCR, "2017-04-08"
),
center= (52.204793 , 360.121558 ),
zoom= 4
)
m.add_layer(Marker(location= (52.204793 , 360.121558 )))
m
```
---
## Figures with Subcaptions
```{python}
#| label: fig-charts
#| fig-cap: "Charts"
#| fig-subcap:
#| - "First"
#| - "Second"
#| layout-ncol: 2
import matplotlib.pyplot as plt
plt.plot([1 ,23 ,2 ,4 ])
plt.show()
plt.plot([8 ,65 ,23 ,90 ])
plt.show()
```
---
## Mermaid Diagrams
```{mermaid}
flowchart LR
A[Hard edge] --> B(Round edge)
B --> C{Decision}
C --> D[Result one]
C --> E[Result two]
```
---
## Block Layout
::: {layout-ncol=2}
### List One
- Item A
- Item B
- Item C
### List Two
- Item X
- Item Y
- Item Z
:::
---
## Placing Colorbars
Colorbars indicate the quantitative extent of image data.
Placing in a figure is non-trivial because room needs to
be made for them. The simplest case is just attaching a
colorbar to each axes:^[ See the [Matplotlib Gallery](https://matplotlib.org/stable/gallery/subplots_axes_and_figures/colorbar_placement.html) to explore colorbars further ] .
```{python}
#| code-fold: true
import matplotlib.pyplot as plt
import numpy as np
fig, axs = plt.subplots(2 , 2 , figsize= (16 , 12 ))
assert isinstance (fig, plt.Figure)
cmaps = ['RdBu_r' , 'viridis' ]
for col in range (2 ):
for row in range (2 ):
ax = axs[row, col]
pcm = ax.pcolormesh(
np.random.random((20 , 20 )) * (col + 1 ),
cmap= cmaps[col]
)
fig.colorbar(pcm, ax= ax)
ax.grid(False )
plt.show()
```
---
## Extras
::: {.callout-note}
Note that there are five types of callouts, including:
`note` , `tip` , `warning` , `caution` , and `important` .
:::
- Testing lists
- Testing
- Testing
- Testing again
- triple Checkboxes
- Nested lists
- [x] Checkboxes ??