Dasar-Dasar Pemanfaatan Quarto R

Deri Siswara // Mei 11, 2025
Komunitas belajaR

Deri Siswara

Adjunct Lecturer at Perbanas Institute,
Dept of Data Science

Data Analysis Workflow

Workflow umum pada analisis data secara umum dimulai dari import data, merapikan data, transformasi data, visualisasi data, pemodelan, hingga diakhiri dengan komunikasi hasil analisis data.

Sumber: https://r4ds.hadley.nz/

Reproducibility

Riset yang baik adalah yang dapat direproduksi
Reporoduksi manual memakan waktu dan rentan terhadap kesalahan

Reproducibility spectrum figure by Roger D. Peng (2011)

Manual updates ❌

Illustration of a non-reproducible workflow for creating reports and presentations, highlighting the inefficiencies and error-prone nature of the copy/paste process.

Updates with Quarto ✅

Illustration of a reproducible workflow for creating reports and presentations with R and Quarto, showcasing the streamlined and efficient process.

What is Quarto?

Publishing system that supports multiple languages & outputs

Open source tools for scientific and technical publishing. Pengembangan Quarto disponsori oleh Posit, di mana sebelumnya terdapat hal serupa yaitu R Markdown, yang memiliki tujuan yang sama, tetapi ditargetkan khusus bahasa R.

Artwork from “Hello, Quarto” keynote by Julia Lowndes and Mine Çetinkaya-Rundel, presented at RStudio::Conf(2022). Illustrated by Allison Horst.

R Markdown vs Quarto

R Markdown

Sistem penerbitan untuk ekosistem R
Bergantung pada R

Quarto

Command Line Interface (CLI)
Memperluas ekosistem R Markdown
Multi-bahasa dan multi-mesin

R Markdown akan tetap dipertahankan tetapi kemungkinan tidak ada fitur baru (Xie 2022).

Create all kinds of outputs

Get inspired by the Quarto.org gallery and the Qmd Club website & blog showcase

Anatomy of a `.qmd` file

1. YAML header

“Yet Another Markup Language” atau “YAML”

---
title: Quarto demo
author: Deri Siswara
date: 2025-05-11
format:
  html:
    theme: flatly
    toc: true
---

Ditandai dengan tiga garis (---) di bagian atas dan bawah
Metadata dokumen dan opsi tingkat dokumen menggunakan pasangan kunci-nilai dalam format key: value
Tambahkan 2 spasi untuk setiap tingkat indentasi – YAML sangat sensitif!

See available options in the reference guides: HTML, PDF, MS Word, Revealjs, MS Powerpoint.

2. Narrative

Markdown syntax:

Teks dengan format: **tebal** → tebal
Judul bagian: # Judul 1, # Judul 2
Hyperlink: [google.com](https://google.com) → google.com
Gambar: ![](image.png)
Kode inline: `{r} Sys.Date()` → r Sys.Date()
Matematika inline: `$E = mc^{2}$` → $E = mc^{2}$

Guide to markdown syntax

3. Code chunks (or cells or blocks)

Tiga cara untuk menyisipkan code chunk:

Pintasan keyboard Cmd/Ctrl + Option/Alt + I.
Tombol Insert Chunk di toolbar editor.
Ketik manual pembatas chunk ```{r} dan ```.

Dua cara untuk menjalankan code chunk:

Gunakan tombol Run Current Chunk atau Run All Chunks Above.

Code chunk di RStudio dengan tombol Run All Chunks Above dan Run Current Chunk disorot dan diberi label.

Jalankan code chunk saat ini dengan Cmd/Ctrl + Shift + Enter.

Demo

0-html-demo.qmd

Three ways to render

RStudio/Quarto integration:

Render button in RStudio or Cmd/Ctrl + Shift + K keyboard shortcut

✨ Quarto R package ✨

Console or R script

quarto::quarto_render(
  input = here::here("latihan.qmd"),   # Input Quarto file

Quarto CLI
```
Terminal
```
```
quarto render latihan.qmd
```

Styling with HTML and CSS

HTML format uses Bootswatch themes

Pilih atau sesuaikan salah satu dari 25 tema Bootswatch.

Atur tema di YAML di bawah kunci html:

format:
  html:
    theme: solar

Sesuaikan tema dengan menyertakan file .scss kustom di bawah kunci theme:

format:
  html:
    theme: [solar, theme.scss]

HTML theming Quarto docs

Revealjs has its own themes

Pratinjau tema di revealjs.com/themes.

Atur tema di YAML di bawah kunci revealjs:

format:
  revealjs:
    theme: moon

Sesuaikan tema dengan menyertakan file .scss kustom di bawah kunci theme:

format:
  revealjs:
    theme: [moon, theme.scss]

Revealjs theming Quarto docs

SCSS files

File SCSS memiliki bentuk sebagai berikut:

/*-- scss:defaults --*/
$h2-font-size:          1.6rem !default;
$headings-font-weight:  500 !default;
$body-color:            $gray-700 !default;

/*-- scss:rules --*/
h1, h2, h3, h4, h5, h6 {
  text-shadow: -1px -1px 0 rgba(0, 0, 0, .3);
}