Code Cells: Observable JS

Observable JS is a set of enhancements to vanilla JavaScript created by Mike Bostock (also the author of D3). Observable JS is distinguished by its reactive runtime, which is especially well suited for interactive data exploration and analysis.

Learn more about using Observable JS with Quarto in the articles on Interactive Documents with Observable JS.

Overview

Cell options affect the execution and output of executable code blocks. They are specified within comments at the top of a block. For example:

```{ojs}
#| label: fig-polar
#| echo: false
#| fig-cap: "A line plot on a polar axis"
```

Attributes

label

Unique label for code cell. Used when other code needs to refer to the cell (e.g. for cross references fig-samples or tbl-summary)

classes

Classes to apply to cell container

Code Output

eval

Evaluate code cells (if false just echos the code into output).

echo

Include cell source code in rendered output. Specify fenced to include the cell delimiter as part of the output.

code-fold

Collapse code into an HTML <details> tag so the user can display it on-demand. Specify show to have the code initiallly visible.

code-summary

Summary text to use for code blocks collapsed using code-fold

code-overflow

Choose whether to scroll or wrap when code lines are too wide for their container.

code-line-numbers

Include line numbers in code block output.

lst-label

Unique label for code listing (used in cross references)

lst-cap

Caption for code listing

Cell Output

output

Include the results of executing the code in the output (specify asis to treat output as raw markdown with no enclosing containers).

warning

Including warnings in rendered output.

error

Include errors in the output (note that this implies that errors executing code will not halt processing of the document).

include

Catch all for preventing any output (code or results) from being included in output.

panel

Panel type for cell output (tabset, input, sidebar, fill, center)

Figures

fig-cap

Figure caption

fig-subcap

Figure subcaptions

fig-link

Hyperlink target for the figure

fig-align

Horizontal alignment for the figure (default, left, right, or center)

fig-alt

Alternative text to be used in the alt attribute of HTML images.

fig-env

LaTeX environment for figure output

fig-pos

LaTeX figure position arrangement to be used in \begin{figure}[].

fig-scap

A short caption (only used in LaTeX output). A short caption is inserted in \caption[], and usually displayed in the “List of Figures” of a PDF document.

Tables

tbl-cap

Table caption

tbl-subcap

Table subcaptions

Panel Layout

layout

2d-array of widths where the first dimension specifies columns and the second rows.

For example, to layout the first two output blocks side-by-side on the top with the third block spanning the full width below, use [[3,3], [1]].

Use negative values to create margin. For example, to create space between the output blocks in the top row of the previous example, use [[3,-1, 3], [1]].

layout-ncol

Layout output blocks into columns

layout-nrow

Layout output blocks into rows

layout-align

Horizontal alignment for layout content (default, left, right, or center)

layout-valign

Vertical alignment for layout content (default, top, center, or bottom)

Page Columns

column

Page column for output

fig-column

Page column for figure output

tbl-column

Page column for table output

cap-location

Where to place figure and table captions (top, bottom, or margin)

fig-cap-location

Where to place figure captions (top, bottom, or margin)

tbl-cap-location

Where to place table captions (top, bottom, or margin)