My name is Isabella Velásquez.
(Quick) Intro to Quarto
Quarto Dashboards
Dashboard Basics
Layout Options
Data Display
Inputs
Interactivity
Theming
Deployment
Wrap Up
Quarto® is an
open-source
technical
content creation system.
---
title: "ggplot2 demo"
format:
html:
code-fold: true
---
## Meet Quarto
Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.
```{r}
#| label: plot-penguins
#| echo: false
#| message: false
#| warning: false
library(tidyverse)
library(palmerpenguins)
ggplot(penguins,
aes(x = flipper_length_mm, y = bill_length_mm)) +
geom_point(aes(color = species, shape = species)) +
scale_color_manual(values = c("darkorange","purple","cyan4")) +
labs(
title = "Flipper and bill length",
subtitle = "Dimensions for penguins at Palmer Station LTER",
x = "Flipper length (mm)", y = "Bill length (mm)",
color = "Penguin species", shape = "Penguin species"
) +
theme_minimal()
```
Intro to Quarto - Isabella Velásquez
Building a Website in R - Federica Gazzelloni
Branded Quarto - Emil Hvitfeldt
(Quick) Intro to Quarto
Quarto Dashboards
Dashboard Basics
Layout Options
Data Display
Inputs
Interactivity
Theming
Deployment
Wrap Up
Goal is to make it simple to build compelling interactive dashboards using R, Python, Julia, and Observable.
https://quarto.org/docs/dashboards/examples/
(Quick) Intro to Quarto
Quarto Dashboards
Dashboard Basics
Layout Options
Data Display
Inputs
Interactivity
Theming
Deployment
Wrap Up
Dashboards are composed of cards.
Cards are arranged into rows and columns.
Pages, tabsets, and sidebars allow for more advanced layouts.
Begin with front matter:
Add a card:
Add a card:
Continue adding cards:
Add a title to your cards:
(Quick) Intro to Quarto
Quarto Dashboards
Dashboard Basics
Layout Options
Data Display
Inputs
Interactivity
Theming
Deployment
Wrap Up
By default, cards are laid out in rows:
By default, cards are laid out in rows:
We can change it to be columns instead:
Alternatively, we can use headings to arrange cards:
Alternatively, we can use headings to arrange cards:
Make another row with content:
Continue adding content:
We can add columns within our rows:
Or use tabsets to put content in different tabs:
Use a Level 1 heading to create new pages:
Use a Level 1 heading to create new pages:
Add a logo and buttons to your navigation bar:
dashboard.qmd
---
title: "My first Quarto dashboard"
format:
dashboard:
logo: images/car.png
nav-buttons:
- reddit
- icon: gitlab
href: https://gitlab.com/ivelasq
---
## Row
Here is my dashboard:
# Page 1
```{r}
#| title: "Plot 1"
plot(mtcars)
```
```{r}
#| title: "Plot 2"
plot(mtcars$mpg)
```
# Page 2
```{r}
#| title: "Plot 3"
plot(mtcars$hp)
```
Add a logo and buttons to your navigation bar:
dashboard.qmd
---
title: "My first Quarto dashboard"
format:
dashboard:
logo: images/car.png
nav-buttons:
- reddit
- icon: gitlab
href: https://gitlab.com/
---
## Row
Here is my dashboard:
# Page 1
```{r}
#| title: "Plot 1"
plot(mtcars)
```
```{r}
#| title: "Plot 2"
plot(mtcars$mpg)
```
# Page 2
```{r}
#| title: "Plot 3"
plot(mtcars$hp)
```
See more options: https://quarto.org/docs/reference/projects/websites.html#navbar
(Quick) Intro to Quarto
Quarto Dashboards
Dashboard Basics
Layout Options
Data Display
Inputs
Interactivity
Theming
Deployment
Wrap Up
Cards are the fundamental unit of display within dashboards.
Cards can also have arbitrary markdown:
Enclose the both the cell and the content in a .card div to include content alongside the output of a cell:
Content that is included at the top of a dashboard is considered leading content, and will be included as is with no card styling:
Both interactive JavaScript-based plots and standard raster based plots are supported.
Size plots in static dashboards using code chunk options:
Produce tabular output within cards:
Produce tabular output within cards:
Value boxes display simple values within a dashboard:
dashboard.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---
## Row
::: {.valuebox color="#F52A32"}
Last updated:
`{{r}} Sys.Date()`
:::
```{r}
#| content: valuebox
#| title: "Spam per day"
n <- mtcars |> tibble::as_tibble() |> dplyr::count() |> dplyr::pull(n)
list(
icon = "trash",
color = "#F52A32",
value = n
)
```
## Row
```{r}
#| title: "Plot 2"
plot(mtcars$mpg)
```
dashboard.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---
## Row
::: {.valuebox color="#F52A32"}
Last updated:
2024-07-18
:::
```{r}
#| content: valuebox
#| title: "Spam per day"
n <- mtcars |> tibble::as_tibble() |> dplyr::count() |> dplyr::pull(n)
list(
icon = "trash",
color = "#F52A32",
value = n
)
```
## Row
```{r}
#| title: "Plot 2"
plot(mtcars$mpg)
```
(Quick) Intro to Quarto
Quarto Dashboards
Dashboard Basics
Layout Options
Data Display
Inputs
Interactivity
Theming
Deployment
Wrap Up
There are several ways to layout inputs within interactive dashboards:
Sidebars provide a collapsible vertical panel for inputs.
Toolbars provide a horizontal panel for inputs.
Card Inputs provide a panel for card-specific inputs.
There are several ways to layout inputs within interactive dashboards:
Sidebars provide a collapsible vertical panel for inputs.
Toolbars provide a horizontal panel for inputs.
Card Inputs provide a panel for card-specific inputs.
To include a sidebar, add the .sidebar class to a Level 2 heading:
dashboard.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---
## {.sidebar}
Sidebar text here!
## Column
### Row
::: {.valuebox color="#F52A32"}
Last updated:
`{{r}} Sys.Date()`
:::
```{r}
#| content: valuebox
#| title: "Spam per day"
n <- mtcars |> tibble::as_tibble() |> dplyr::count() |> dplyr::pull(n)
list(
icon = "trash",
color = "#F52A32",
value = n
)
```
### Row
```{r}
#| title: "Plot 2"
plot(mtcars$mpg)
```
To include a sidebar, add the .sidebar class to a Level 2 heading:
dashboard.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---
## {.sidebar}
Sidebar text here!
## Column
### Row
::: {.valuebox color="#F52A32"}
Last updated:
2024-07-18
:::
```{r}
#| content: valuebox
#| title: "Spam per day"
n <- mtcars |> tibble::as_tibble() |> dplyr::count() |> dplyr::pull(n)
list(
icon = "trash",
color = "#F52A32",
value = n
)
```
### Row
```{r}
#| title: "Plot 2"
plot(mtcars$mpg)
```
(Quick) Intro to Quarto
Quarto Dashboards
Dashboard Basics
Layout Options
Data Display
Inputs
Interactivity
Theming
Deployment
Wrap Up
Why not both?
https://forum.posit.co/t/quarto-dashboards-vs-shiny/178402
dashboard.qmd
---
title: "My first Quarto dashboard"
format:
dashboard:
orientation: rows
server: shiny
---
```{r}
#| context: setup
library(ggplot2)
```
## {.sidebar}
```{r}
selectInput(
"variableChoice",
"Choose a variable:",
choices = names(mtcars)
)
```
## Column
### Row
Here is my dashboard:
### Row
```{r}
#| title: "Plot 2"
plotOutput("variablePlot")
```
```{r}
#| context: server
output$variablePlot <- renderPlot({
yVar <- mtcars[[input$variableChoice]]
plot(mtcars$index, yVar)
})
```
dashboard.qmd
---
title: "My first Quarto dashboard"
format:
dashboard:
orientation: rows
server: shiny
---
```{r}
#| context: setup
library(ggplot2)
```
## {.sidebar}
```{r}
selectInput(
"variableChoice",
"Choose a variable:",
choices = names(mtcars)
)
```
## Column
### Row
Here is my dashboard:
### Row
```{r}
#| title: "Plot 2"
plotOutput("variablePlot")
```
```{r}
#| context: server
output$variablePlot <- renderPlot({
yVar <- mtcars[[input$variableChoice]]
plot(mtcars$index, yVar)
})
```
(Quick) Intro to Quarto
Quarto Dashboards
Dashboard Basics
Layout Options
Data Display
Inputs
Interactivity
Theming
Deployment
Wrap Up
Quarto includes 25 themes from the Bootswatch project:
dashboard.qmd
---
title: "My first Quarto dashboard"
format:
dashboard:
theme: united
server: shiny
---
```{r}
#| context: setup
library(ggplot2)
```
## {.sidebar}
```{r}
selectInput(
"variableChoice",
"Choose a variable:",
choices = names(mtcars)
)
```
## Column
### Row
Here is my dashboard:
### Row
```{r}
#| title: "Plot 2"
plotOutput("variablePlot")
```
```{r}
#| context: server
output$variablePlot <- renderPlot({
yVar <- mtcars[[input$variableChoice]]
plot(mtcars$index, yVar)
})
```
Quarto includes 25 themes from the Bootswatch project:
dashboard.qmd
---
title: "My first Quarto dashboard"
format:
dashboard:
theme: united
server: shiny
---
```{r}
#| context: setup
library(ggplot2)
```
## {.sidebar}
```{r}
selectInput(
"variableChoice",
"Choose a variable:",
choices = names(mtcars)
)
```
## Column
### Row
Here is my dashboard:
### Row
```{r}
#| title: "Plot 2"
plotOutput("variablePlot")
```
```{r}
#| context: server
output$variablePlot <- renderPlot({
yVar <- mtcars[[input$variableChoice]]
plot(mtcars$index, yVar)
})
```
Create an entirely custom theme:
dashboard.qmd
---
title: "My first Quarto dashboard"
format:
dashboard:
theme: style.scss
server: shiny
---
```{r}
#| context: setup
library(ggplot2)
```
## {.sidebar}
```{r}
selectInput(
"variableChoice",
"Choose a variable:",
choices = names(mtcars)
)
```
## Column
### Row
Here is my dashboard:
### Row
```{r}
#| title: "Plot 2"
plotOutput("variablePlot")
```
```{r}
#| context: server
output$variablePlot <- renderPlot({
yVar <- mtcars[[input$variableChoice]]
plot(mtcars$index, yVar)
})
```
style.scss
/*-- scss:defaults --*/
@import url('https://fonts.googleapis.com/css2?family=Baumans&display=swap');
$font-family-sans-serif: "Baumans";
$body-bg: #F2E2C5;
$body-color: #21409A;
$code-color: #5f5f5f;
$input-bg: #F2E2C5;
$navbar-bg: #A6290D;
$h2-font-size: 1.6rem !default;
$headings-font-weight: 500 !default;
/*-- scss:rules --*/
h1, h2, h3, h4, h5, h6 {
text-shadow: -1px -1px 0 rgba(0, 0, 0, .3);
}
(Quick) Intro to Quarto
Quarto Dashboards
Dashboard Basics
Layout Options
Data Display
Inputs
Interactivity
Theming
Deployment
Wrap Up
Dashboards are typically just static HTML pages so can be deployed to any web server or web host.
(Quick) Intro to Quarto
Quarto Dashboards
Dashboard Basics
Layout Options
Data Display
Inputs
Interactivity
Theming
Deployment
Wrap Up
I added a folder of templates for different dashboard layouts in the GitHub repository:
https://bit.ly/quarto-dashboards