Computo Journal Format

The Computo Team; a friend

doi:10.5072/computo.0000

Abstract

This document provides a template based on the quarto system for contributions to Computo. The github repository in itself provides a specific quarto extension useful for authors (and editors!).

1 About this document

This document provides a template based on the quarto system for contributions to Computo (Computo Team 2021). We show how Python (Perez et al. 2011) or R (R Core Team 2020) code can be included.

2 Formatting

This section covers basic formatting guidelines. Quarto is a versatile formatting system for authoring HTML based on markdown, integrating $\LaTeX$ and various code block interpreted either via Jupyter or Knitr (and thus deal with Python, R and many other langages). It relies on the Pandoc Markdown markup language.

Note

We will only give some formatting elements. Authors can refer to the Quarto web page for a complete view of the formatting possibilities.

Note

Quarto itself is a work-in-progress and a lot of bugs are constantly fixed or features added. As such, we recommend:

searching any encountered issue with renders in the upstream quarto dev repo
using a version of quarto > 1.2

To render/compile a document, run quarto render. A document will be generated that includes both content and the output of any embedded code chunks within the document:

quarto render content.qmd # will render to html

2.1 Basic markdown formatting

Bold text or italic

This is a list
With more elements
It isn’t numbered.

But we can also do a numbered list

This is my first item
This is my second item
This is my third item

2.2 Mathematics

2.2.1 Mathematical formulae

$\LaTeX$ code is natively supported¹, which makes it possible to use mathematical formulae:

will render

\[ f(x_1, \dots, x_n; \mu, \sigma^2) = \frac{1}{\sigma \sqrt{2\pi}} \exp{\left(- \frac{1}{2\sigma^2}\sum_{i=1}^n(x_i - \mu)^2\right)} \]

It is also possible to cross-reference an equation, see Equation 1:

\[ \begin{aligned} D_{x_N} & = \frac12 \left[\begin{array}{cc} x_L^\top & x_N^\top \end{array}\right] \, \left[\begin{array}{cc} L_L & B \\ B^\top & L_N \end{array}\right] \, \left[\begin{array}{c} x_L \\ x_N \end{array}\right] \\ & = \frac12 (x_L^\top L_L x_L + 2 x_N^\top B^\top x_L + x_N^\top L_N x_N), \end{aligned} \tag{1}\]

2.2.2 Theorems and other amsthem-like environments

Quarto includes a nice support for theorems, with predefined prefix labels for theorems, lemmas, proposition, etc. see this page. Here is a simple example:

Theorem 1 (Strong law of large numbers) The sample average converges almost surely to the expected value:

\[\overline{X}_n\ \xrightarrow{\text{a.s.}}\ \mu \qquad\textrm{when}\ n \to \infty.\]

See Theorem 1.

2.3 Code

Quarto uses either Jupyter or knitr to render code chunks. This can be triggered in the yaml header, e.g., for Jupyter (should be installed on your computer) use

---
title: "My Document"
author "Jane Doe"
jupyter: python3
---

For knitr (R + knitr must be installed on your computer)

---
title: "My Document"
author "Jane Doe"
---

You can use Jupyter for Python code and more. And R + KnitR for if you want to mix R with Python (via the package reticulate Ushey et al. (2020)).

2.3.1 R

R code (R Core Team 2020) chunks may be embedded as follows:

Hide/Show the code

x <- rnorm(10)

2.3.2 Python

reticulate (Ushey et al. 2020) manages the Python side: declare the packages you need with py_require() and it provisions an isolated environment (via uv) the first time Python is actually used, no separate conda/virtualenv setup required.

Hide/Show the code

import plotly.io as pio
import plotly.express as px

# Force a kaleido-based static renderer: the default auto-detected
# "notebook" renderer relies on IPython's rich display machinery, which
# isn't available in this R/knitr + reticulate execution context.
pio.renderers.default = "png"

df = px.data.tips()
fig = px.histogram(df, x="total_bill", y="tip", color="sex",
                   marginal="box", # or violin, rug
                   hover_data=df.columns)
fig

Figure 1: A simple python plotly example

For a demonstration of a line plot on a polar axis, see Figure 2

Hide/Show the code

import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(
  subplot_kw = {'projection': 'polar'} 
)
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()

2.4 Figures

Plots can be generated as follows and referenced. See plot Figure 3:

Hide/Show the code

library("ggplot2")
p <- ggplot(mpg, aes(displ, hwy)) +
  geom_point() +
  geom_smooth() + theme_bw()
p

Plots combining semi-transparent layers with a viridis colour scale mapping missing values to a transparent colour (na.value = NA) render correctly in both formats, see Figure 4. Prior to v1.0.4, R’s Cairo-based svg() device (the previous HTML figure backend) emulated this kind of transparency through SVG filter chains that most browsers fail to render, showing a solid black rectangle instead of the plot; the HTML backend was switched to svglite, which supports transparency natively, to fix this.

Hide/Show the code

library("ggplot2")
library("viridis")
set.seed(42)
df <- data.frame(x = rnorm(500), y = rnorm(500), v = rnorm(500))
df$v[sample(nrow(df), 50)] <- NA
ggplot(df, aes(x, y)) +
  geom_ribbon(aes(ymin = -2, ymax = 2), fill = "red", alpha = 0.2) +
  geom_point(aes(color = v), size = 2, shape = 15) +
  scale_color_viridis(na.value = NA) +
  theme_bw()

Figure 4: A scatter plot mixing a transparent-NA viridis colour scale with an alpha-blended confidence ribbon

Interactive plots may also be produced in the HTML output of the document²:

Hide/Show the code

library("plotly")
ggplotly(p)

Figure 5: A simple ggplotly interactive example

It is also possible to create figures from static images:

Figure 6: SFdS logo (c.a. 2021)

2.5 Tables

2.5.1 Markdown syntax

Tables (with label: @tbl-mylabel renders Table 1) can be generated with markdown as follows

| Tables   |      Are      |  Cool |
|----------|:-------------:|------:|
| col 1 is |  left-aligned | $1600 |
| col 2 is |    centered   |   $12 |
| col 3 is | right-aligned |    $1 |
: my table caption {#tbl-mylabel}

Table 1: my table caption

Tables	Are	Cool
col 1 is	left-aligned	$1600
col 2 is	centered	$12
col 3 is	right-aligned	$1

2.5.2 List-table filter

We also integrate the list tables filter from Pandoc, so that you may alternatively use this format , easier to write and maintain:

:::list-table
   * - row 1, column 1
     - row 1, column 2
     - row 1, column 3

   * - row 2, column 1
     -
     - row 2, column 3

   * - row 3, column 1
     - row 3, column 2
:::

row 1, column 1	row 1, column 2	row 1, column 3
row 2, column 1		row 2, column 3
row 3, column 1	row 3, column 2

2.5.3 Table generated from code

Table can also be generated by some code, for instance with knitr here:

Hide/Show the code

knitr::kable(summary(cars), caption = "Table caption.")

Table caption.
	speed	dist
	Min. : 4.0	Min. : 2.00
	1st Qu.:12.0	1st Qu.: 26.00
	Median :15.0	Median : 36.00
	Mean :15.4	Mean : 42.98
	3rd Qu.:19.0	3rd Qu.: 56.00
	Max. :25.0	Max. :120.00

2.6 Algorithms

A solution to typeset pseudocode just like you would do with $\LaTeX$, yet with HTML output is to rely on the JavaScript pseudocode.js. Your pseudocode is written inside a Code Block with the pseudocode class. Do not forget the class tag, that will trigger the rendering process of your pseudo-code. The result is as follows³:

```pseudocode
#| label: algo-quicksort
#| html-indent-size: "1.2em"
#| html-comment-delimiter: "//"
#| html-line-number: true
#| html-line-number-punc: ":"
#| html-no-end: false
#| pdf-placement: "htb!"
#| pdf-line-number: true

\begin{algorithm}
\caption{Quicksort}
\begin{algorithmic}
\Procedure{Quicksort}{$A, p, r$}
  \If{$p < r$}
    \State $q = $ \Call{Partition}{$A, p, r$}
    \State \Call{Quicksort}{$A, p, q - 1$}
    \State \Call{Quicksort}{$A, q + 1, r$}
  \EndIf
\EndProcedure
\Procedure{Partition}{$A, p, r$}
  \State $x = A[r]$
  \State $i = p - 1$
  \For{$j = p, \dots, r - 1$}
    \If{$A[j] < x$}
      \State $i = i + 1$
      \State exchange
      $A[i]$ with     $A[j]$
    \EndIf
    \State exchange $A[i]$ with $A[r]$
  \EndFor
\EndProcedure
\end{algorithmic}
\end{algorithm}
```

\begin{algorithm} \caption{Quicksort} \begin{algorithmic} \Procedure{Quicksort}{$A, p, r$} \If{$p < r$} \State $q = $ \Call{Partition}{$A, p, r$} \State \Call{Quicksort}{$A, p, q - 1$} \State \Call{Quicksort}{$A, q + 1, r$} \EndIf \EndProcedure \Procedure{Partition}{$A, p, r$} \State $x = A[r]$ \State $i = p - 1$ \For{$j = p, \dots, r - 1$} \If{$A[j] < x$} \State $i = i + 1$ \State exchange $A[i]$ with $A[j]$ \EndIf \State exchange $A[i]$ with $A[r]$ \EndFor \EndProcedure \end{algorithmic} \end{algorithm}

Algorithm 1 is extracted from Chapter 7, Introduction to Algorithms (3rd edition).

2.7 Diagrams

In addition of quarto supported diagrams, we also support tikz diagrams. The following example⁴ is rendered as follows.

:::{#fig-tikz}

``` tikz
%%| filename: ../figure-tikz/fig-tikz
\begin{tikzpicture}[node distance=2cm, auto, thick, scale=2, every node/.style={transform shape}]
\node (P) {$P$};
\node (B) [right of=P] {$B$};
\node (A) [below of=P] {$A$};
\node (C) [below of=B] {$C$};
\node (P1) [node distance=1.4cm, left of=P, above of=P] {$\hat{P}$};
\draw[->] (P) to node {$f$} (B);
\draw[->] (P) to node [swap] {$g$} (A);
\draw[->] (A) to node [swap] {$f$} (C);
\draw[->] (B) to node {$g$} (C);
\draw[->, bend right] (P1) to node [swap] {$\hat{g}$} (A);
\draw[->, bend left] (P1) to node {$\hat{f}$} (B);
\draw[->, dashed] (P1) to node {$k$} (P);
\end{tikzpicture}
```

A simple example of a commutative diagram with $\texttt{tikz}$.

:::

%%| filename: ../figure-tikz/fig-tikz
\begin{tikzpicture}[node distance=2cm, auto, thick, scale=2, every node/.style={transform shape}]
\node (P) {$P$};
\node (B) [right of=P] {$B$};
\node (A) [below of=P] {$A$};
\node (C) [below of=B] {$C$};
\node (P1) [node distance=1.4cm, left of=P, above of=P] {$\hat{P}$};
\draw[->] (P) to node {$f$} (B);
\draw[->] (P) to node [swap] {$g$} (A);
\draw[->] (A) to node [swap] {$f$} (C);
\draw[->] (B) to node {$g$} (C);
\draw[->, bend right] (P1) to node [swap] {$\hat{g}$} (A);
\draw[->, bend left] (P1) to node {$\hat{f}$} (B);
\draw[->, dashed] (P1) to node {$k$} (P);
\end{tikzpicture}

Figure 7: A simple example of a commutative diagram with $\texttt{tikz}$.

You may refer to it as Figure 7.

2.8 Handling references

2.8.1 Bibliographic references

References are displayed as footnotes using BibTeX, e.g. [@computo] will be displayed as (Computo Team 2021), where computo is the bibtex key for this specific entry. The bibliographic information is automatically retrieved from the .bib file specified in the header of this document (here:references.bib).

2.8.2 Other cross-references

As already (partially) seen, Quarto includes a mecanism similar to the bibliographic references for sections, equations, theorems, figures, lists, etc. Have a look at this page.

2.9 To go further

One last note

To go into more involved details, you can also simply check the source code of this document (button at the top), or have a look at the source of our t-sne remake example.

Bibliography

Computo Team. 2021. “Computo: Reproducible Computational/Algorithmic Contributions in Statistics and Machine Learning.” Computo.

Perez, Fernando, Brian E Granger, and John D Hunter. 2011. “Python: An Ecosystem for Scientific Computing.” Computing in Science
& Engineering 13 (2): 13–21.

R Core Team. 2020. R: A Language and Environment for Statistical Computing. R Foundation for Statistical Computing. https://www.R-project.org/.

Ushey, Kevin, JJ Allaire, and Yuan Tang. 2020. Reticulate: Interface to Python. https://github.com/rstudio/reticulate.

Footnotes

We use katex for this purpose.↩︎
The pdf output is just a screenshot of the interactive plot from the html output↩︎
For proper pdf rendering, use Camel cased names for all algorithmic keywords, not upper case ones, like the examples in pseudocode.js’s documentation, which are not compatible with LaTeX.↩︎
This is the new syntax for cross-references since quarto 1.4, see Crossreferenceable elements ↩︎

Reuse

CC BY 4.0

Citation

BibTeX citation:

@article{computo_team2023,
  author = {Computo Team, The and friend, a},
  title = {Computo {Journal} {Format}},
  journal = {Computo},
  date = {2023-01-02},
  doi = {10.5072/computo.0000},
  issn = {2824-7795},
  langid = {en},
  abstract = {This document provides a template based on the quarto
    system for contributions to Computo. The github repository in itself
    provides a specific quarto extension useful for authors (and
    editors!).}
}

For attribution, please cite this work as:

Computo Team, The, and a friend. 2023. “Computo Journal Format.” Computo, accepted, January 2. https://doi.org/10.5072/computo.0000.

# About this document This document provides a template based on the [quarto system](https://quarto.org/) for contributions to **Computo** [@computo]. We show how `Python` [@perez2011python] or `R` [@R-base] code can be included. # Formatting This section covers basic formatting guidelines. [Quarto](https://quarto.org/) is a versatile formatting system for authoring HTML based on markdown, integrating {{< latex >}} and various code block interpreted either via Jupyter or Knitr (and thus deal with Python, R and many other langages). It relies on the [Pandoc Markdown](https://rmarkdown.rstudio.com/authoring_pandoc_markdown.html) markup language. :::{.callout-note} We will only give some formatting elements. Authors can refer to the [Quarto web page](https://quarto.org/) for a complete view of the formatting possibilities. ::: :::{.callout-note} Quarto itself is a work-in-progress and a lot of bugs are constantly fixed or features added. As such, we recommend: - searching any encountered issue with renders in [the upstream quarto dev repo](https://github.com/quarto-dev/quarto-cli/issues) - using a [version of quarto > 1.2](https://github.com/quarto-dev/quarto-cli/releases) ::: To render/compile a document, run `quarto render`. A document will be generated that includes both content and the output of any embedded code chunks within the document: ``` .bash quarto render content.qmd # will render to html ``` ## Basic markdown formatting **Bold text** or _italic_ - This is a list - With more elements - It isn't numbered. But we can also do a numbered list 1. This is my first item 2. This is my second item 3. This is my third item ## Mathematics ### Mathematical formulae [{{< latex >}}](https://www.latex-project.org/) code is natively supported[^katex], which makes it possible to use mathematical formulae: [^katex]: We use [katex](https://katex.org/) for this purpose. will render $$ f(x_1, \dots, x_n; \mu, \sigma^2) = \frac{1}{\sigma \sqrt{2\pi}} \exp{\left(- \frac{1}{2\sigma^2}\sum_{i=1}^n(x_i - \mu)^2\right)} $$ It is also possible to cross-reference an equation, see @eq-mylabel: $$ \begin{aligned} D_{x_N} & = \frac12 \left[\begin{array}{cc} x_L^\top & x_N^\top \end{array}\right] \, \left[\begin{array}{cc} L_L & B \\ B^\top & L_N \end{array}\right] \, \left[\begin{array}{c} x_L \\ x_N \end{array}\right] \\ & = \frac12 (x_L^\top L_L x_L + 2 x_N^\top B^\top x_L + x_N^\top L_N x_N), \end{aligned} $$ {#eq-mylabel} ### Theorems and other amsthem-like environments Quarto includes a nice support for theorems, with predefined prefix labels for theorems, lemmas, proposition, etc. see [this page](https://quarto.org/docs/authoring/cross-references.html#theorems-and-proofs). Here is a simple example: ::: {#thm-slln} ### Strong law of large numbers The sample average converges almost surely to the expected value: $$\overline{X}_n\ \xrightarrow{\text{a.s.}}\ \mu \qquad\textrm{when}\ n \to \infty.$$ ::: See @thm-slln. ## Code Quarto uses either Jupyter or knitr to render code chunks. This can be triggered in the yaml header, e.g., for Jupyter (should be installed on your computer) use ``` yaml --- title: "My Document" author "Jane Doe" jupyter: python3 --- ``` For knitr (R + knitr must be installed on your computer) ``` yaml --- title: "My Document" author "Jane Doe" --- ``` You can use Jupyter for Python code and more. And R + KnitR for if you want to mix R with Python (via the package reticulate @R-reticulate). ### R `R` code [@R-base] chunks may be embedded as follows: ```{r r-code, echo=TRUE} x <- rnorm(10) ``` ### Python `reticulate` [@R-reticulate] manages the Python side: declare the packages you need with `py_require()` and it provisions an isolated environment (via `uv`) the first time Python is actually used, no separate conda/virtualenv setup required. ```{r setup-python-env, include=FALSE, cache=TRUE} library(reticulate) py_require( packages = c("ipython", "plotly==6.8.0", "numpy", "pandas", "kaleido==1.3.0", "matplotlib"), python_version = "3.13" ) ``` ```{python} #| label: fig-plotly #| fig-cap: "A simple python plotly example" import plotly.io as pio import plotly.express as px # Force a kaleido-based static renderer: the default auto-detected # "notebook" renderer relies on IPython's rich display machinery, which # isn't available in this R/knitr + reticulate execution context. pio.renderers.default = "png" df = px.data.tips() fig = px.histogram(df, x="total_bill", y="tip", color="sex", marginal="box", # or violin, rug hover_data=df.columns) fig ``` For a demonstration of a line plot on a polar axis, see @fig-polar ```{python} #| label: fig-polar #| fig-cap: "A line plot on a polar axis" #| dev: svg import numpy as np import matplotlib.pyplot as plt r = np.arange(0, 2, 0.01) theta = 2 * np.pi * r fig, ax = plt.subplots( subplot_kw = {'projection': 'polar'} ) ax.plot(theta, r) ax.set_rticks([0.5, 1, 1.5, 2]) ax.grid(True) plt.show() ``` ## Figures Plots can be generated as follows and referenced. See plot @fig-gg: ```{r} #| label: fig-gg #| fig-cap: "A simple ggplot example" #| message: false library("ggplot2") p <- ggplot(mpg, aes(displ, hwy)) + geom_point() + geom_smooth() + theme_bw() p ``` Plots combining semi-transparent layers with a `viridis` colour scale mapping missing values to a transparent colour (`na.value = NA`) render correctly in both formats, see @fig-viridis-alpha. Prior to `v1.0.4`, R's Cairo-based `svg()` device (the previous HTML figure backend) emulated this kind of transparency through SVG filter chains that most browsers fail to render, showing a solid black rectangle instead of the plot; the HTML backend was switched to `svglite`, which supports transparency natively, to fix this. ```{r} #| label: fig-viridis-alpha #| fig-cap: "A scatter plot mixing a transparent-NA viridis colour scale with an alpha-blended confidence ribbon" #| message: false #| warning: false library("ggplot2") library("viridis") set.seed(42) df <- data.frame(x = rnorm(500), y = rnorm(500), v = rnorm(500)) df$v[sample(nrow(df), 50)] <- NA ggplot(df, aes(x, y)) + geom_ribbon(aes(ymin = -2, ymax = 2), fill = "red", alpha = 0.2) + geom_point(aes(color = v), size = 2, shape = 15) + scale_color_viridis(na.value = NA) + theme_bw() ``` Interactive plots may also be produced in the HTML output of the document^[The pdf output is just a screenshot of the interactive plot from the html output]: ```{r} #| label: fig-ggplotly #| fig-cap: "A simple ggplotly interactive example" #| message: false #| warning: false library("plotly") ggplotly(p) ``` It is also possible to create figures from static images: :::{#fig-logo} ![](figures/sfds.png) SFdS logo (c.a. 2021) ::: ## Tables ### Markdown syntax Tables (with label: `@tbl-mylabel` renders @tbl-mylabel) can be generated with markdown as follows ```markdown | Tables | Are | Cool | |----------|:-------------:|------:| | col 1 is | left-aligned | $1600 | | col 2 is | centered | $12 | | col 3 is | right-aligned | $1 | : my table caption {#tbl-mylabel} ``` | Tables | Are | Cool | |----------|:-------------:|------:| | col 1 is | left-aligned | $1600 | | col 2 is | centered | $12 | | col 3 is | right-aligned | $1 | : my table caption {#tbl-mylabel} ### List-table filter We also integrate the [list tables](https://github.com/pandoc-ext/list-table) filter from Pandoc, so that you may alternatively use this format , easier to write and maintain: ```markdown :::list-table * - row 1, column 1 - row 1, column 2 - row 1, column 3 * - row 2, column 1 - - row 2, column 3 * - row 3, column 1 - row 3, column 2 ::: ``` :::list-table * - row 1, column 1 - row 1, column 2 - row 1, column 3 * - row 2, column 1 - - row 2, column 3 * - row 3, column 1 - row 3, column 2 ::: ### Table generated from code Table can also be generated by some code, for instance with ```knitr``` here: ```{r cars} knitr::kable(summary(cars), caption = "Table caption.") ``` ## Algorithms A solution to typeset pseudocode just like you would do with {{< latex >}}, yet with HTML output is to rely on the JavaScript [pseudocode.js](https://github.com/SaswatPadhi/pseudocode.js). Your pseudocode is written inside a [Code Block](https://quarto.org/docs/authoring/markdown-basics.html#source-code) with the `pseudocode` class. Do not forget the class tag, that will trigger the rendering process of your pseudo-code. The result is as follows^[For proper pdf rendering, use [Camel cased](https://en.wikipedia.org/wiki/Camel_case) names for all `algorithmic` keywords, not upper case ones, like the examples in `pseudocode.js`’s documentation, which are not compatible with LaTeX.]: ````markdown ```pseudocode #| label: algo-quicksort #| html-indent-size: "1.2em" #| html-comment-delimiter: "//" #| html-line-number: true #| html-line-number-punc: ":" #| html-no-end: false #| pdf-placement: "htb!" #| pdf-line-number: true \begin{algorithm} \caption{Quicksort} \begin{algorithmic} \Procedure{Quicksort}{$A, p, r$} \If{$p < r$} \State $q = $ \Call{Partition}{$A, p, r$} \State \Call{Quicksort}{$A, p, q - 1$} \State \Call{Quicksort}{$A, q + 1, r$} \EndIf \EndProcedure \Procedure{Partition}{$A, p, r$} \State $x = A[r]$ \State $i = p - 1$ \For{$j = p, \dots, r - 1$} \If{$A[j] < x$} \State $i = i + 1$ \State exchange $A[i]$ with $A[j]$ \EndIf \State exchange $A[i]$ with $A[r]$ \EndFor \EndProcedure \end{algorithmic} \end{algorithm} ``` ```` ```pseudocode #| label: algo-quicksort #| html-indent-size: "1.2em" #| html-comment-delimiter: "//" #| html-line-number: true #| html-line-number-punc: ":" #| html-no-end: false #| pdf-placement: "htb!" #| pdf-line-number: true \begin{algorithm} \caption{Quicksort} \begin{algorithmic} \Procedure{Quicksort}{$A, p, r$} \If{$p < r$} \State $q = $ \Call{Partition}{$A, p, r$} \State \Call{Quicksort}{$A, p, q - 1$} \State \Call{Quicksort}{$A, q + 1, r$} \EndIf \EndProcedure \Procedure{Partition}{$A, p, r$} \State $x = A[r]$ \State $i = p - 1$ \For{$j = p, \dots, r - 1$} \If{$A[j] < x$} \State $i = i + 1$ \State exchange $A[i]$ with $A[j]$ \EndIf \State exchange $A[i]$ with $A[r]$ \EndFor \EndProcedure \end{algorithmic} \end{algorithm} ``` @algo-quicksort is extracted from Chapter 7, Introduction to Algorithms (3rd edition). ## Diagrams In addition of [quarto supported diagrams](https://quarto.org/docs/authoring/diagrams.html), we also support [tikz](https://www.overleaf.com/learn/latex/TikZ_package) diagrams. The following example^[This is the new syntax for cross-references since quarto 1.4, see [Crossreferenceable elements](https://quarto.org/docs/prerelease/1.4/crossref.html)] is rendered as follows. ````markdown :::{#fig-tikz} ``` tikz %%| filename: ../figure-tikz/fig-tikz \begin{tikzpicture}[node distance=2cm, auto, thick, scale=2, every node/.style={transform shape}] \node (P) {$P$}; \node (B) [right of=P] {$B$}; \node (A) [below of=P] {$A$}; \node (C) [below of=B] {$C$}; \node (P1) [node distance=1.4cm, left of=P, above of=P] {$\hat{P}$}; \draw[->] (P) to node {$f$} (B); \draw[->] (P) to node [swap] {$g$} (A); \draw[->] (A) to node [swap] {$f$} (C); \draw[->] (B) to node {$g$} (C); \draw[->, bend right] (P1) to node [swap] {$\hat{g}$} (A); \draw[->, bend left] (P1) to node {$\hat{f}$} (B); \draw[->, dashed] (P1) to node {$k$} (P); \end{tikzpicture} ``` A simple example of a commutative diagram with $\texttt{tikz}$. ::: ```` :::{#fig-tikz} ``` tikz %%| filename: ../figure-tikz/fig-tikz \begin{tikzpicture}[node distance=2cm, auto, thick, scale=2, every node/.style={transform shape}] \node (P) {$P$}; \node (B) [right of=P] {$B$}; \node (A) [below of=P] {$A$}; \node (C) [below of=B] {$C$}; \node (P1) [node distance=1.4cm, left of=P, above of=P] {$\hat{P}$}; \draw[->] (P) to node {$f$} (B); \draw[->] (P) to node [swap] {$g$} (A); \draw[->] (A) to node [swap] {$f$} (C); \draw[->] (B) to node {$g$} (C); \draw[->, bend right] (P1) to node [swap] {$\hat{g}$} (A); \draw[->, bend left] (P1) to node {$\hat{f}$} (B); \draw[->, dashed] (P1) to node {$k$} (P); \end{tikzpicture} ``` A simple example of a commutative diagram with $\texttt{tikz}$. ::: You may refer to it as @fig-tikz. ## Handling references {#sec-references} ### Bibliographic references References are displayed as footnotes using [BibTeX](http://www.bibtex.org/), e.g. `[@computo]` will be displayed as [@computo], where `computo` is the bibtex key for this specific entry. The bibliographic information is automatically retrieved from the `.bib` file specified in the header of this document (here:`references.bib`). ### Other cross-references As already (partially) seen, Quarto includes a mecanism similar to the bibliographic references for sections, equations, theorems, figures, lists, etc. Have a look at [this page](https://quarto.org/docs/authoring/cross-references.html). ## To go further :::{.callout-note} ### One last note To go into more involved details, you can also simply check the source code of this document (button at the top), or have a look at the source of our [t-sne remake example](https://computo-journal.org/published-paper-tsne/). ::: ## Bibliography {.unnumbered} ::: {#refs} :::