Досить “гратися зі шрифтами”!

Quarto: презентації, сайти та звіти, які верстають себе самі

Ігор Мірошниченко

Київська школа економіки

Про мене

  • Кандидат економічних наук, доцент

    Факультет комп’ютерних наук, KSE

Quarto-документи

Про біль…

Quarto — це…

науково-технічна

система публікації

з відкритим кодом

побудована на Pandoc.

З Quarto …

ви можете поєднувати текст та код для створення елегантно оформлених документів, веб-сторінок, блогів, книг, інформаційних панелей тощо.

  • Створюйте динамічний контент за допомогою , , та
  • Редагуйте документи у вашому улюбленому редакторі
  • Публікуйте технічний контент у форматі HTML, PDF, MS Word тощо
  • Діліться технічним контентом, публікуючи його в Quarto Pub, GitHub Pages, Netlify або інших системах публікації

“Літературне програмування”

Формати Quarto

Feature

Basic Formats html, pdf, docx, typst
Beamer beamer
PowerPoint pptx
HTML Slides revealjs
Advanced Layout Quarto Article Layout
Cross References Quarto Crossrefs
Websites & Blogs Quarto Websites, Quarto Blogs
Books Quarto Books
Interactivity Quarto Interactive Documents
Journal Articles Journal Articles
Dashboards Quarto Dashboards

Що під капотом?

  • jupyter або knitr виконують код Python, Julia, R або Observable і повертають файл .md разом з кодом.
  • застосовує фільтри Lua + CSS/LaTeX, які потім оцінюються разом з файлом .md за допомогою Pandoc і перетворюються в кінцевий формат виводу.

IDE:

A screenshot of a Quarto document rendered inside JupyterLab

A screenshot of a Quarto document rendered inside VSCode

A screenshot of a Quarto document rendered inside RStudio

Анатомія

Анатомія

Metadata (YAML)

format: html
jupyter: python3
format: html
engine: knitr

Code

```{python}
import polars as pl
result = (
    mtcars.group_by("cyl")
    .agg(pl.col("mpg").mean().alias("mean")))
```
```{r}
library(dplyr)
mtcars |> 
  group_by(cyl) |> 
  summarize(mean = mean(mpg))
```

Text

# Heading 1
This is a sentence with some **bold text**, some *italic text* and an 
![image](image.png){fig-alt="Alt text for this image"}.

Автозаповнення

YAML

A gif of auto-completion and search for YAML options inside RStudio

Chunk option

A gif of auto-completion of a R chunk inside RStudio

Markdown

Markdown syntax Output
*italics* and **bold**
italics and bold
superscript^2^ / subscript~2~
superscript2 / subscript2
~~strikethrough~~
strikethrough
`verbatim code`
verbatim code

Inline code

my-document.qmd
```{python}
import math

radius = 7
circle_area = math.pi * pow(radius, 2)
```

Площа кола з радіусом `{python} radius` складає `{python} round(circle_area, 2)`.

Результат:

Площа кола з радіусом 7 складає 153.94.

Налаштування коду

```{python}
#| echo: false
import altair as alt

(
    alt.Chart(df).mark_point(tooltip=True).encode(
        x="sepal_length",
        y="sepal_width",
        color="species",
    )
    .properties(width=500)
    .configure_scale(zero=False)
)
```
Опція Опис
eval Оцінити фрагмент коду
echo Включити вихідний код
warning Включити попередження
include Включити код і результати

Інші варіанти: https://quarto.org/docs/computations/execution-options.html

Зображення та посилання

Синтаксис Markdown Результат
<https://kse.ua/>
https://kse.ua/
[KSE](https://kse.ua/)
KSE
![](penguin.png)

Таблиці

```{markdown}
| Right | Left | Default | Center |
|------:|:-----|---------|:------:|
|    12 | 12   | 12      |   12   |
|   123 | 123  | 123     |  123   |
|     1 | 1    | 1       |   1    |
```
Right Left Default Center
12 12 12 12
123 123 123 123
1 1 1 1

Таблиці

```{markdown}
| Right | Left | Default | Center |
|------:|:-----|---------|:------:|
|    12 | 12   | 12      |   12   |
|   123 | 123  | 123     |  123   |
|     1 | 1    | 1       |   1    |

: Table Column Widths {tbl-colwidths="[10,30,30,30]"}
```
Table Column Widths
Right Left Default Center
12 12 12 12
123 123 123 123
1 1 1 1

Анотований код

Markdown

```{python}
df = sns.load_dataset("penguins") # <1>

df = df.assign( # <2>
    bill_ratio = df['bill_depth_mm'] / df['bill_length_mm'],
    bill_area  = df['bill_depth_mm'] * df['bill_length_mm']
)

print(df[['species', 'bill_ratio', 'bill_area']].head()) # <3>
```

1. Візьміть `penguins`, а потім...
2. ...додайте нові стовпці.
3. ...виведіть результат.

Код

1df = sns.load_dataset("penguins")

2df = df.assign(
    bill_ratio = df['bill_depth_mm'] / df['bill_length_mm'],
    bill_area  = df['bill_depth_mm'] * df['bill_length_mm'] 
)

3print(df[['species', 'bill_ratio', 'bill_area']].head())
1
Візьміть penguins, а потім…
2
…додайте нові стовпці…
3
…виведіть результат.
  species  bill_ratio  bill_area
0  Adelie    0.478261     731.17
1  Adelie    0.440506     687.30
2  Adelie    0.446650     725.40
3  Adelie         NaN        NaN
4  Adelie    0.525886     708.31

Callout blocks

my-document.qmd
:::{.callout-note}

Note that there are five types of callouts, including: 
`note`, `tip`, `warning`, `caution`, and `important`.
:::

Примітка

Note that there are five types of callouts, including: note, warning, important, tip, and caution.


my-document.qmd
::: {.callout-caution}
## Caution with Title

This is an example of a callout with a title.
:::

Caution with Title

This is an example of a callout with a title.


my-document.qmd
::: {#tip-example .callout-tip}
## Cross-Referencing a Tip

Add an ID starting with `#tip-` to reference a tip.
:::

See @tip-example...

Порада 1: Cross-Referencing a Tip

Add an ID starting with #tip- to reference a tip.

See Tip 1…

Уніфікований макет документа

quarto render gentoo-penguin.qmd --to html


quarto render gentoo-penguin.qmd --to pdf

HTML

PDF

Уніфікований синтаксис для markdown та коду

Зображення у два стовпця

::: {layout-ncol=2}
![Gentoo Colony](img/gentoo-colony.jpg)

![A close-up of head](img/close-up-of-head.jpg)
:::

Gentoo Colony

A close-up of head

Два графіка з коду у два стовпця

```{python}
#| layout-ncol: 2
#| fig-cap: ["Boxplot", "Scatter"]

import seaborn as sns
import matplotlib.pyplot as plt

df = sns.load_dataset("penguins")
cols = ["#FEA232", "#32A1A1", "#B24CF2"]

plt.figure(figsize=(8, 6))
sns.boxplot(data=df, x="species", y="flipper_length_mm", width=0.3, palette=cols, showfliers=False)
sns.stripplot(data=df, x="species", y="flipper_length_mm", palette=cols, jitter=0.2, alpha=0.5, size=4)

sns.lmplot(data=df, x="bill_length_mm", y="bill_depth_mm", hue="species", palette=cols, 
               markers=['o', 's', '^'], ci=None, height=6, aspect=1.3, legend=False, 
               scatter_kws={"s": 60, "alpha": 0.8})
```

Boxplot

Scatter

Вкладки

::: {.panel-tabset group="language"}
## R

`library(dplyr)`

## Python

`import pandas as pd`
:::

library(dplyr)

import pandas as pd

Діаграми

🔗Mermaid

```{mermaid}
flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}
  C --> D[Result one]
  C --> E[Result two]
```

flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}
  C --> D[Result one]
  C --> E[Result two]

🔗Graphviz

```{dot}
graph MathTriangle {
    rankdir=LR;
    A -- B [label="3"];
    B -- C [label="4"];
    C -- A [label="5"];
}
```

MathTriangle A A B B A--B 3 C C B--C 4 C--A 5

Інтерактивність, Observable

viewof temp = Inputs.range([0, 100], {step: 1, value: 34, label: htl.html`Temp &#x2103;`})

Converting temperature from ℃ to ℉

Celsius = ℃ and Fahrenheit = ℉.

```{ojs}
viewof temp = Inputs.range([0, 100], {step: 1, value: 34, label: htl.html`Temp &#x2103;`})
```

Converting temperature from &#x2103; to &#x2109; <br>  
Celsius = ${d3.format(".0f")(temp)}&#x2103; and Fahrenheit = ${d3.format(".1f")(temp * 9/5 + 32)}&#x2109;.

Quarto-презентації

Формати файлів

підтримує різноманітні формати для створення презентацій, зокрема:

  • revealjs
  • pptx
  • beamer

Перетворення в reveal.js

Перетворіть ваш документ у презентацію reveal.js, редагуючи format у заголовку YAML:

format: revealjs

Приклад

---
title: "Звички пінгвіна"
author: "Шкіпер"
format: html
lang: ua
---

# Ранок в Антарктиці

## Пробудження

- Розправити ласти
- Скотитися з крижини у воду

## Сніданок

- Спіймати жирного оселедця
- Закусити свіжим крилем

# Вечір на березі

## Вечеря

- З'їсти кальмара
- Пожувати чистий сніжок

## Сон

- Збитися в щільну купу
- Гріти яйце на лапах

Приклад

---
title: "Звички пінгвіна"
author: "Шкіпер"
format: revealjs
lang: ua
---

# Ранок в Антарктиці

## Пробудження

- Розправити ласти
- Скотитися з крижини у воду

## Сніданок

- Спіймати жирного оселедця
- Закусити свіжим крилем

# Вечір на березі

## Вечеря

- З'їсти кальмара
- Пожувати чистий сніжок

## Сон

- Збитися в щільну купу
- Гріти яйце на лапах

Переходи між слайдами

Наступні кілька слайдів будуть переходити за допомогою переходу slide

Перехід Опис
none Без переходу (за замовчуванням, миттєве перемикання)
fade Перехід з ефектом зникання
slide Горизонтальний перехід
convex Перехід під опуклим кутом
concave Зсув під увігнутим кутом
zoom Масштабування вхідного слайда так, щоб він збільшувався від центру екрана.

Розміщення колонок

Колонки різної ширини:


df.head()
species island bill_length_mm bill_depth_mm flipper_length_mm body_mass_g sex
0 Adelie Torgersen 39.1 18.7 181.0 3750.0 Male
1 Adelie Torgersen 39.5 17.4 186.0 3800.0 Female
2 Adelie Torgersen 40.3 18.0 195.0 3250.0 Female
3 Adelie Torgersen NaN NaN NaN NaN NaN
4 Adelie Torgersen 36.7 19.3 193.0 3450.0 Female

Розміщення колонок

Колонки різної ширини:

::: columns
::: {.column width="35%"}
#### Пінгвіни Палмера

Дані були зібрані та надані [доктором Крістен Горман](https://www.uaf.edu/cfos/people/faculty/detail/kristen-gorman.php) та [станцією Палмер, Антарктида LTER](https://pallter.marine.rutgers.edu/), членом [Мережі довгострокових екологічних досліджень](https://lternet.edu/).
:::

::: {.column width="3%"}
:::

::: {.column width="62%"}
```{python}
df.head()
```
:::
:::

Підсвічування рядків коду

``` {.python code-line-numbers="4-5|7|10"}
```
import numpy as np
import matplotlib.pyplot as plt

x = np.arange(-4, 4, .012)
y = np.arange(-4, 4, .012)
X, Y = np.meshgrid(x, y)
Z = 1 - np.abs(X) - np.sin(Y**2)
W = 1 + Y - np.cos(X**2)

fig = plt.figure(figsize=(8, 8))
ax = fig.add_subplot(projection='polar')
plt.scatter(Z, W, alpha=.03, s=0.2)
plt.axis('off')
plt.show()

Куди вивести результат

fragment Відображати вихідні дані як фрагмент (відкласти відображення до тих пір, поки не буде явно перейдено до наступного слайду).
slide Відображати вихідні дані на наступному слайді.
column Відображати вихідні дані в стовпці, сусідньому з кодом.
column-fragment Відображати вихідні дані в стовпці, сусідньому з кодом, і відкласти відображення до тих пір, поки не буде явно перейдено до наступного слайду.

Куди вивести результат: column

```{python}
#| output-location: column

x = np.arange(-4, 4, .012)
y = np.arange(-4, 4, .012)
X, Y = np.meshgrid(x, y)
Z = 1 - np.abs(X) - np.sin(Y**2)
W = 1 + Y - np.cos(X**2)

fig = plt.figure(figsize=(8, 8))
ax = fig.add_subplot(projection='polar')
plt.scatter(Z, W, alpha=.03, s=0.2)
plt.axis('off')
plt.show()
```

Рівняння

MathJax рендерить рівняння для HTML

\begin{cases} 
n b_0 + b_1 \sum x_i = \sum y_i \\ 
b_0 \sum x_i + b_1 \sum x_i^2 = \sum x_i y_i 
\end{cases}




$$
P(k) = \frac{\lambda^k e^{-\lambda}}{k!}
$$
\[\begin{cases} n b_0 + b_1 \sum x_i = \sum y_i \\ b_0 \sum x_i + b_1 \sum x_i^2 = \sum x_i y_i \end{cases}\]

\[ P(k) = \frac{\lambda^k e^{-\lambda}}{k!} \]

Покрокові списки

Списки можуть бути відображені покроково:

  • Перший 🐧
  • Другий 🐧
  • Третій 🐧


Вставте паузи, щоб інші типи вмісту відображалися поступово.

Покрокові списки

Списки можуть бути відображені покроково:

::: incremental
-   Перший 🐧
-   Другий 🐧
-   Третій 🐧
:::

. . .

<br/> Вставте паузи, щоб інші типи вмісту відображалися поступово.

Фрагменти

Поступове відображення тексту та анімація:


Поява 🐧

Слайд знизу вверх 🦭

Слайд та поява ліворуч 🦦

Поява та часткове зникнення ❄️

Закреслення 🦈

Виділити червоним 🐙🦞🍤🦪🦐🦀

Фрагменти

::: {.fragment .fade-in}
Поява 🐧
:::

::: {.fragment .fade-up}
Слайд знизу вверх 🦭
:::

::: {.fragment .fade-left}
Слайд та поява ліворуч 🦦
:::

::: {.fragment .fade-in-then-semi-out}
Поява та часткове зникнення ❄️
:::

. . .

::: {.fragment .strike}
Закреслення 🦈
:::

::: {.fragment .highlight-red}
Виділити червоним 🐙🦞🍤🦪🦐🦀
:::

Абсолютне положення

Розміщуйте зображення або інші елементи в точних місцях

Абсолютне положення

![](img/lter_penguins.png){.absolute top="170" height="400"}

![](img/culmen_depth.png){.absolute .fragment top="200" right="80" width="450"}

![](img/palmerpenguins.png){.absolute .fragment bottom="10" right="400" width="250"}

Інтерактивні слайди

Додаємо віджети Jupyter та htmlwidgets у свої презентації

```{python}
import folium

m = folium.Map(location=[50.4585, 30.4298], zoom_start=15)

folium.Marker(
    location=[50.4585, 30.4298],
    popup="❤️ Kyiv School of Economics 🐙"
).add_to(m)

m
```
Make this Notebook Trusted to load map: File -> Trust Notebook

Інтерактивні слайди

Виконуємо код у :

Проста навігація

Швидкий перехід до інших частин презентації

Перемикайте меню слайдів за допомогою кнопки меню (у нижньому лівому куті слайда), щоб перейти до інших слайдів і отримати доступ до інструментів презентації.

Ви також можете натиснути m, щоб відкрити або закрити меню.

Дошка

Увімкніть, додавши:

format:
  revealjs:
    chalkboard: true


Використовуйте кнопку дошки в нижньому лівому куті слайда, щоб перемикати дошку.

Використовуйте кнопку “Нотатки” у нижньому лівому куті слайда, щоб переключитися на малювання поверх поточного слайда.

Ви також можете натиснути b, щоб переключитися на дошку, або c, щоб переключитися на полотно для нотаток.

PoV

Натисніть o, щоб перейти в режим огляду:

Утримуйте клавіші Alt/Option і клацніть на будь-якому елементі, щоб наблизити його.

Вигляд доповідача

Натисніть s (або скористайтеся інструментами в меню презентації ) , щоб відкрити вигляд доповідача

## Slide with speaker notes

Slide content

::: {.notes}
Speaker notes go here.
:::

Quarto та PDF

Hello, Typst!

Щоб використовувати Typst з Quarto, встановіть формат у YAML вашого документа Quarto:

---
format: typst
---

Screenshot of one page of PDF document. The document shows a single column of text.

Page layout

Керуйте розміром сторінки (papersize), полями сторінки (margin) та кількістю колонок (columns):

---
title: Page Layout
format:
  typst:
    papersize: a5
    margin:
      x: 1cm
      y: 1cm
    columns: 2
---

Screenshot of one page of PDF document. The document shows a two columns of text. Compared to the previous screenshot, the page is narrower and longer, and the margins are smaller.

Розмір паперу

papersize: us-letter

Більше налаштувань

Зміст

toc: true
toc-depth: 2


Нумерація розділів

number-sections: true

Глибина нумерування number-depth:

number-depth: 3

Блоки Typst

Додайте клас .block, щоб змінити зовнішній вигляд блоків:

::: {.block fill="luma(230)" inset="8pt" radius="4pt"}

Це блок із сірим фоном і злегка заокругленими кутами.

:::

Typst і шрифти

Перевірте, які шрифти доступні у вашій системі, за допомогою:

Terminal
quarto typst fonts

Встановіть додаткові шляхи за допомогою font-paths:

---
format: 
  typst:
    font-paths: myfonts
---

Формати Typst

Typst дозволяє створювати власні шаблони для створення документів з гнучкими налаштуваннями.

Screenshot of a page showing a article styled according IEEE standards. The title is centered with authors below in two columns.

IEEE

Screenshot of a poster in landscape orientiation. The poster includes a logo in the top right, a title in the top left, and content arranged in three columns.

Poster

Screenshot of a page showing a letter. A sender address is across the top of the page, followed by a recipient address left justified. The body of the letter includes a subject line in bold.

Letter

Screenshot of a page showing a department newsletter. The page is split vertically with a white column on the left and a red one on the right. An image spans across the column with the text "Award Winning Science" oriented to run vertically down its right side.

Dept News

Формати Typst

Format Usage
Poster quarto use template quarto-ext/typst-templates/poster
IEEE quarto use template quarto-ext/typst-templates/ieee
AMS quarto use template quarto-ext/typst-templates/ams
Letter quarto use template quarto-ext/typst-templates/letter
Fiction quarto use template quarto-ext/typst-templates/fiction
Dept News quarto use template quarto-ext/typst-templates/dept-news

Quarto-проєкти

Вебсторінка

Попередній перегляд

Поточна сторінка

Cmd/Ctrl + Shift + K

Весь сайт

Terminal
quarto preview 

Потребує Quarto Extension

Поточна сторінка

Cmd/Ctrl + Shift + K

Весь сайт

Build > Render Website

Current page

Terminal
quarto preview index.qmd

Whole site

Terminal
quarto preview 

Page Structure

index.qmd
---
title: "Palmer penguins"
execute:
  echo: false
  warning: false
  message: false
---

Data were collected and made available by Dr. Kristen Gorman and the Palmer Station, Antarctica LTER.

```{python}
import seaborn as sns
import matplotlib.pyplot as plt

df = sns.load_dataset("penguins")
```

Вебсторінки схожі на будь-який інший документ Quarto:

  1. Починаються з заголовка YAML
  2. Можуть містити комірки коду
  3. Все інше — це вміст Markdown

Структура веб-сайту

Мінімальний веб-сайт має два файли: index.qmd та _quarto.yml

  • index.qmd: Рендериться в index.html, вашу домашню сторінку.

  • _quarto.yml: Контролює властивості проекту та веб-сайту.

Після рендерингу ви отримаєте папку _site/. Вона містить все необхідне для роботи сайту.

_quarto.yml

_quarto.yml
project:
  type: website

website:
  title: "my-website"
  navbar:
    left:
      - href: index.qmd
        text: Home

format:
  html:
    toc: true

Варіанти публікації

Існує безліч способів публікації документів, презентацій, інформаційних панелей та вебсайтів Quarto.

Quarto Pub

Безкоштовний сервіс публікації статичного контенту, створеного за допомогою Quarto.

Quarto Pub

Найпростіший варіант на сьогодні. https://quartopub.com/.

  1. Запустити
Terminal
quarto publish
  1. Обрати Quarto Pub.

Щось ще?

Quarto Manuscripts

Quarto Manuscripts забезпечують основу для написання та публікації наукових статей.

A screenshot of the content area on the manuscript webpage. Content shows a title block including the article title, authors, and abstract, body text, and an image with a caption.

Контент

A screenshot of the menu on the right hand side of the manuscript webpage. The menu has headings: Table of contents, Other Formats, Notebooks and Other Links.

Навігація

Quarto-Дашборди

Screenshot of a Stock Trader dashboard: a row of three values boxes, then a row with a stock ticker graph and a table of closing values. Navy blue and green theme.

Screenshot of a Customer Churn dashboard: a row of three values boxes, then a row with two plots, then a row with a table. Light blue and yellow theme.

Screenshot of a Palmer Penguins dashboard: a sidebar with checkboxes and a dropdown, and two plots in main panel. Blue theme.

Розширення Quarto

Галерея

KSE Presentation Templates

Дарія Михайлишина створила шаблони презентацій для Київської школи економіки на основі офіційних рекомендацій щодо бренду.

  1. Визначаємо брендинг в одному файлі _brand.yml.
  2. Застосовуємо цей брендинг майже до всіх форматів Quarto.


  • meta: Ідентифікаційна інформація, назва компанії, URL-адреси тощо.
  • logo: Файли або посилання на логотипи бренду.
  • color: Кольори в палітрі кольорів бренду.
  • typography: Шрифти для різних елементів.
  • defaults: Додаткові налаштування, що залежать від контексту.

brand_flow by brand.yml quarto Quarto by->quarto R R by->R Python Python by->Python quarto-websites Websites quarto-presentations Presentations quarto-dashboards Dashboards quarto-typst Typst r-bslib {bslib} r-shiny Shiny for R r-bslib->r-shiny r-rmd R Markdown r-bslib->r-rmd r-pkgdown pkgdown r-bslib->r-pkgdown r-thematic {thematic} r-bslib->r-thematic py-brand_yml brand_yml py-shiny Shiny for Python py-brand_yml->py-shiny py-plots seaborn, matplotlib, etc. py-brand_yml->py-plots quarto-html quarto-html quarto->quarto-html quarto-pdf quarto-pdf quarto->quarto-pdf quarto-html->quarto-websites quarto-html->quarto-presentations quarto-html->quarto-dashboards quarto-emails Emails quarto-html->quarto-emails quarto-pdf->quarto-typst R->r-bslib Python->py-brand_yml

Чому саме “Quarto”?

Posit хотіли використати назву, яка мала б значення в історії видавничої справи, і зупинилися на Quarto — форматі книги або брошури, виготовленої з цілих аркушів, на яких надруковано вісім сторінок тексту, по чотири на кожній стороні, а потім складених двічі, щоб утворити чотири аркуші.

Найдавніша відома європейська друкована книга — це Quarto, Sibyllenbuch, яка, як вважається, була надрукована Йоганном Гутенбергом у 1452–53 роках.

Дякую за увагу!



@araprof

@datamirosh

@ihormiroshnychenko

@aranaur

aranaur.rbind.io