Skip to content

Commit

Permalink
Add Module 4
Browse files Browse the repository at this point in the history
  • Loading branch information
mine-cetinkaya-rundel committed Aug 12, 2024
1 parent 9e9df4a commit ab48f99
Show file tree
Hide file tree
Showing 6 changed files with 355 additions and 30 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ format:
chalkboard: true
---

## Dashboard Deployment
# Deployment

## Dashboard deployment

Dashboards are typically just static HTML pages so can be deployed to any web server or web host.

Expand Down Expand Up @@ -56,52 +58,90 @@ Dashboards are typically just static HTML pages so can be deployed to any web se
}
</style>
```
## Parameterized Dashboards

# Parameters

## Parameters {auto-animate="true"}

::: {data-id="code"}
::: r-box
```` {.yaml filename="dashboard-r.qmd" code-line-numbers="|6-7|13-14|19-23"}
{{< include _parameters-class-compact-r.qmd >}}
````
:::
:::

## Parameters {.smaller auto-animate="true"}

::: columns
::: column
![](images/stock-explorer-dashboard.png)
::: {.column width="40%"}
::: {data-id="code"}
::: r-box
```` {.yaml filename="dashboard-py.qmd" code-line-numbers="6-7,13-14,19-23"}
{{< include _parameters-class-compact-r.qmd >}}
````
:::
:::
:::

::: column
Add a parameters tag to the first cell (based on [papermill](https://papermill.readthedocs.io/en/latest/usage-parameterize.html)) :
::: {.column width="60%"}
![](images/parameters-class-compact-r.png)
:::
:::

```` python
```{{python}}
#| tags: [parameters]
ticker = "BA"
```
## Parameters {.smaller auto-animate="true"}

::: columns
::: {.column width="40%"}
::: {data-id="code"}
::: r-box
```` {.yaml filename="dashboard-py.qmd" code-line-numbers="6-7"}
{{< include _parameters-class-midsize-r.qmd >}}
````
:::
:::
:::

::: {.column width="60%"}
![](images/parameters-class-midsize-r.png)
:::
:::

## Rendering with parameter

Use the `-P` command line option to vary the parameter:

``` bash
quarto render dashboard.qmd -P ticker:GOOG
quarto render dashboard-r.qmd -P class:"suv"
```
:::

## Parameters

::: python-box
```` {.yaml filename="dashboard-py.qmd" code-line-numbers="|11-15|17-21|25-29"}
{{< include _parameters-py.qmd >}}
````
:::

## Interactive Dashboards
# Interactivity

<https://quarto.org/docs/dashboards/interactivity/shiny-python/>
## Interactivity with Shiny

::: columns
::: {.column width="40%"}
- For interactive exploration, some dashboards can benefit from a live Python backend
::: incremental
- The Shiny package (for R and for Python) provides an easy way to build web applications with R.

- To do this with Quarto Dashboards, add interactive [Shiny](https://shiny.posit.co/py/) components
- Quarto dashboards can include embedded Shiny components (e.g., a plot with sliders that control its inputs) to add interactivity.

- Deploy with or without a server!
- Ladder of complexity/customization: Quarto dashboard > Quarto dashboard with Shiny components > Shiny dashboard
:::

::: {.column width="60%"}
![](images/shiny-homepage.png){.border}
:::
:::
##

## {.no-line background-image="images/dashboards/shiny-penguins.png" background-size="contain"}
```{=html}
<iframe src="https://jjallaire.shinyapps.io/penguins-dashboard/" title = "Palmer Penguins" frameborder="1" height="600" width="1000"></iframe>
```

## Deployment of Interactive Dashboards
## Deployment of interactive dashboards

::: columns
::: {.column width="60%"}
Expand Down Expand Up @@ -130,16 +170,54 @@ quarto render dashboard.qmd -P ticker:GOOG
Using [Pyodide](https://pyodide.org/)

\[[Example](https://wch.github.io/retirement-simulation-dashboard/)\]

Using [ShinyLive](https://posit-dev.github.io/r-shinylive/)
:::
:::

## Other interactivity

- [Observable JS](https://quarto.org/docs/dashboards/interactivity/observable.html) for client-side interactivity using the Observable dialect of JavaScript.

- [Jupyter Widgets](https://quarto.org/docs/interactive/widgets/jupyter.html) or [htmlwidgets](https://quarto.org/docs/interactive/widgets/htmlwidgets.html) for client-side interactivity based on standard Python and R JavaScript widget frameworks.

# Your turn

## Goal

::: your-turn
Deploy your latest dashboard to QuartoPub.

**Stretch goal:** Add parameter and/or interactivity to your dashboard for narrowing down to or picking a year.
:::

# Learning More
{{< countdown minutes=10 >}}

# Wrap up

## Time for Q&A! {.center}

## Feedback

## Resources {style="margin-top: 0.6em; font-size: 1em;"}
Please fill out the workshop survey at <https://pos.it/conf-workshop-survey>.

## Learning More

| | |
|------------------------|-----------------------------------------------|
|-------------------------|-----------------------------------------------|
| About Quarto | <https://quarto.org/> |
| Quarto Dashboards | <https://quarto.org/docs/dashboards/> |
| Shiny for R. | <https://shiny.posit.co/r/> |
| Shiny for R | <https://shiny.posit.co/r/> |
| Shiny for Python | <https://shiny.posit.co/r/getstarted/shiny-basics/lesson1/index.html/> |

## Quarto at posit::conf(2024) - Tuesday

- [Automated Reporting With Quarto: Beyond Copy And Paste](https://reg.conf.posit.co/flow/posit/positconf24/publiccatalog/page/publiccatalog/session/1712004124994001gOid) - 2:40 PM - 4:00 PM PDT Columbia A/B

- [Making Decisions With Data](https://reg.conf.posit.co/flow/posit/positconf24/publiccatalog/page/publiccatalog/session/1712004520332001rWs6) - 2:40 PM - 4:00 PM PDT 300 | Columbia D

... and many more on Wednesday!

## Thank you! {.center}

<https://pos.it/conf-workshop-survey>
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
---
title: "Parameters"
format:
dashboard:
logo: images/beetle.png
params:
class: "compact"
---

```{{r}}
library(ggplot2)
library(dplyr)
mpg <- mpg |>
filter(class == params$class)
```

## Value boxes {height="25%"}

::: {.valuebox icon="car-front-fill" color="info"}
Class

`{r} params$class`
:::

```{{r}}
#| label: calculate-values
lowest_mileage_cty <- mpg |>
filter(cty == min(cty)) |>
distinct(cty) |>
pull(cty)
highest_mileage_cty <- mpg |>
filter(cty == max(cty)) |>
distinct(cty) |>
pull(cty)
rounded_mean_city_mileage <- mpg |>
summarize(round(mean(cty), 2)) |>
pull()
```

```{{r}}
#| content: valuebox
#| title: "Least efficient"
#| icon: fuel-pump-fill
#| color: danger
list(
value = paste(lowest_mileage_cty, "mpg")
)
```

```{{r}}
#| content: valuebox
#| title: "Most efficient"
list(
icon = "fuel-pump",
color = "success",
value = paste(highest_mileage_cty, "mpg")
)
```

::: {.valuebox icon="fuel-pump" color="secondary"}
Average city mileage

`{r} rounded_mean_city_mileage` mpg
:::

## Plots {height="75%"}

```{{r}}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
geom_point()
```

```{{r}}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
geom_bar()
```
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
---
title: "Parameters"
format:
dashboard:
logo: images/beetle.png
params:
class: "midsize"
---

```{{r}}
library(ggplot2)
library(dplyr)
mpg <- mpg |>
filter(class == params$class)
```

## Value boxes {height="25%"}

::: {.valuebox icon="car-front-fill" color="info"}
Class

`{r} params$class`
:::

```{{r}}
#| label: calculate-values
lowest_mileage_cty <- mpg |>
filter(cty == min(cty)) |>
distinct(cty) |>
pull(cty)
highest_mileage_cty <- mpg |>
filter(cty == max(cty)) |>
distinct(cty) |>
pull(cty)
rounded_mean_city_mileage <- mpg |>
summarize(round(mean(cty), 2)) |>
pull()
```

```{{r}}
#| content: valuebox
#| title: "Least efficient"
#| icon: fuel-pump-fill
#| color: danger
list(
value = paste(lowest_mileage_cty, "mpg")
)
```

```{{r}}
#| content: valuebox
#| title: "Most efficient"
list(
icon = "fuel-pump",
color = "success",
value = paste(highest_mileage_cty, "mpg")
)
```

::: {.valuebox icon="fuel-pump" color="secondary"}
Average city mileage

`{r} rounded_mean_city_mileage` mpg
:::

## Plots {height="75%"}

```{{r}}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
geom_point()
```

```{{r}}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
geom_bar()
```
Loading

0 comments on commit ab48f99

Please sign in to comment.