Non-designer’s Quarto Presentation

Kazuharu Yanagimoto

March 4, 2023


Kazuharu Yanagimoto

Website  GitHub  Twitter



  所属: CEMFI経済学博士課程２年

  専門: 労働, マクロ, 家族経済学

  • ジェンダーギャップ
  • 少子化

  趣味: スマブラ, スペイン語

  Quartoにハマり, WebsiteもQuarto化

Quartoとは



  • Rを使う場合 knitr が動くので, ほとんどRmarkdownと変わらない
  • Rmarkdown と大きく違う点 \(\Rightarrow\) Revealjs スライド

Quarto Revealjs


HTML   PDF   qmd

HTML   PDF

なぜQuarto/Revealjsなのか?

デザイン性 労力 保守性
Powerpoint 👩‍🎨 ❌ ❌
Beamer ❌ ✔️ ✔️
Quarto ✔️ ✔️ ✔️


  • PowerPointでおしゃれにするには時間がかかる. 内容変更に弱い
  • Beamerはダサい.1 デザインの自由度が低く, カスタマイズに \(\LaTeX\) の知識がいる
  • Quartoはそこそこの労力でそこそこのデザインのスライドが作れる.

Quarto Revealjsの基本

スライド


---
title: "私のスライド"
author: "柳本和春"
format: revealjs
---

## 最初のスライド

- あれ
- これ

## 二番目のスライド

**これが太字**で*これが斜体*. $x = \pi$として,

$$
e^{ix} + 1 = 0
$$
  • h2レベルのヘッダーでスライドが区切られます
  • タイトルなしのスライドは---で区切ります

フラグメント


## インクリメンタルリスト

::: {.incremental}
- あれ
- これ
- それ
:::

## ポーズ

まずこれを見せ

. . .

その後これを見せる

より複雑な例はTom Mockのこの部分のプレゼンをみるとよいと思います

コラムレイアウト


## Column Layout

:::: {.columns}
::: {.column width="50%"}
Left column

略
:::

::: {.column width="50%"}
Right column

略
:::

::::

.columns というクラスの中で.column とその widthを指定することで, 縦割りにできます. ３つ以上の分割も可能です.

コード


## Plot

```{r}
library(ggplot2)

ggplot(airquality, aes(Temp, Ozone)) +
  geom_point() +
  geom_smooth(method = "loess")
```

コード: コード表示


## Code Display

```{r}
#| echo: true
library(ggplot2)

ggplot(airquality, aes(Temp, Ozone)) +
  geom_point() +
  geom_smooth(method = "loess")
```

コード: コラム表示


## Column Layout

```{r}
#| echo: true
#| output-location: column
library(ggplot2)

airquality |>
  ggplot(aes(Temp, Ozone)) +
    geom_point() +
    geom_smooth(method = "loess")
```

コード: コードハイライト


## Code Highlight

```{r}
#| echo: true
#| output-location: column
#| code-line-numbers: "7"
library(ggplot2)

airquality |>
  ggplot(aes(Temp, Ozone)) +
    geom_point() +
    geom_smooth(method = "loess") +
    theme_minimal()
```

Quarto Design Tips

Quartoのカスタムテーマ


custom.scss
// fonts
$font-family-sans-serif: Montserrat, sans-serif !default;
$font-family-monospace: "Fira Code", monospace  !default;

// colors
$body-bg: #fff !default;
$body-color: #272822 !default;
$link-color: #055099 !default;

// headings
$presentation-heading-font: "Josefin Sans", sans-serif !default;
$presentation-heading-color: #1C5253 !default;

$h1-font-size: 1.6em !default;
$h2-font-size: 1.3em !default;
$h3-font-size: 1.15em !default;
$h4-font-size: 1em !default;
slides.qmd
---
title: "Presentation"
format:
  revealjs: 
    theme: [default, custom.scss]
---


SASS変数(リスト) をscssファイルの中で指定することで, テーマをカスタムできます

ggplot2: フォント

  • サンプルの様に, スライドのフォントと色がグラフとマッチしているとかっこいい
  • フォントは以下のように設定すると, 何度も設定しなくて済む

グローバル設定

font_title <- "Josefin Sans"
font_text <- "Montserrat"
size_base <- 20

theme_set(theme_minimal(
            base_size = size_base,
            base_family = font_text))
theme_update(
  plot.title = element_text(
                size = size_base * 1.2,
                face = "bold",
                family = font_title),
  panel.grid.minor = element_blank(),
  legend.position = "bottom",
  plot.title.position = "plot"
)

オリジナルテーマ

theme_quarto <- function(
                  font_title = "Josefin Sans",
                  font_text = "Montserrat",
                  size_base = 20) {

  theme_minimal(base_family = font_text,
                base_size = size_base) +
    theme(
      plot.title = element_text(
                    size = size_base * 1.2,
                    face = "bold",
                    family = font_title),
      panel.grid.minor = element_blank(),
      legend.position = "bottom",
      plot.title.position = "plot"
    )
}

ggplot2: 色


デフォルトのカラーパレットを替えたければ, 以下のようにできます

scale_colour_discrete <- function(...) {
  scale_colour_manual(values = c("#00AFBB", "#E7B800", "#FC4E07"))
}

scale_fill_discrete <- function(...) {
  scale_fill_manual(values = c("#00AFBB", "#E7B800", "#FC4E07"))
}


しかし, このやり方だと例外が多く発生してしまったので, 私は基本的に

  • scale_*_manual() で毎回指定
  • geom_point(color = color_base) なども毎回指定しています

70:25:5の法則


メインとアクセントカラーの選び方は, HUE/360などを参考にすればいいと思います

カラーマップ


ベースカラー, アクセントカラー, グレー とその薄色があれば大体こと足ります

gghighlight


  • プレゼンの中で話をしたい変数の数は限られていると思います
  • すべての色付けを考えるより, gghighlightで色を絞りましょう

quartomonothemer


kazuyanagimoto/quartomonothemerというパッケージを作りました.


  1. style_mono_quarto() を実行するとcustom.scssが作られる
  2. theme_quarto() というggplot2のテーマが作られる (フォントのみ)
  3. 色は各プロット毎に指定
library(showtext)
library(quartomonothemer)
font_title <- "Noto Sans JP"
font_text <- "Noto Sans JP"
font_code <- "Fira Code"
color_base <- "#0086AB"

font_add_google(font_title)
font_add_google(font_code)
showtext_auto()

style_mono_quarto(
  font_title = font_title,
  font_text = font_text,
  font_code = font_code,
  google_fonts = c(font_title, font_code),
  color_base = color_base
)

テーブル

MarkdownやkableExtraもいいですが, プレゼン用ではgtExtrasが便利だと思います.

  • gtは文法がkableExtraより, 洗練されている
  • gt_highlight_rows() が簡単できれい. 色はベースカラーの薄い色がおすすめ

細かい調整

一部だけをCSSで見た目を変更したい場合は, 以下のようにstyle環境で調整します.

::: {style="font-size:0.68em;"}
少し小さくしたい部分
:::

SASS変数にない部分でデザインの変更をしたい場合は, custom.scssに書くか, Quartoファイルにコードブロックとして書きましょう

```{css, echo=FALSE}
#title-slide {
  background-color: #ffffffbb;
  border-radius: 10px
}
```

VSCode Draw.io Intergration

ちょっとした図の挿入にはDraw.io Intergrationがいいです

  • VSCodeであれば, Quartoと同じエディターで図を作成することができる
  • *.drawio.svg, *.drawio.pngというファイル名ならエクスポートせずに図を使える

Enjoy!


kazuyanagimoto/quartomonothemer・ Codes for Today’s Slides