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).

  • true (default): evaluate code cell
  • false: don’t evaluate code cell
  • [...]: A list of positive or negative line numbers to selectively include or exclude lines (explicit inclusion/excusion of lines is available only when using the knitr engine)
echo

Include cell source code in rendered output.

  • true (default): include source code in output
  • false: do not include source code in output
  • fenced: in addition to echoing, include the cell delimiter as part of the output.
  • [...]: A list of positive or negative line numbers to selectively include or exclude lines (explicit inclusion/excusion of lines is available only when using the knitr engine)
code-fold

Collapse code into an HTML <details> tag so the user can display it on-demand.

  • true: collapse code
  • false (default): do not collapse code
  • show: use the <details> tag, but show the expanded code initially.
code-summary

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

code-overflow

Choose how to handle code overflow, when code lines are too wide for their container. One of:

  • scroll
  • wrap
code-line-numbers

Include line numbers in code block output (true or false).

For revealjs output only, you can also specify a string to highlight specific lines (and/or animate between sets of highlighted lines).

  • Sets of lines are denoted with commas:
    • 3,4,5
    • 1,10,12
  • Ranges can be denoted with dashes and combined with commas:
    • 1-3,5
    • 5-10,12,14
  • Finally, animation steps are separated by |:
    • 1-3|1-3,5 first shows 1-3, then 1-3,5
    • |5|5-10,12 first shows no numbering, then 5, then lines 5-10 and 12
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. Possible values:

  • true: Include results.
  • false: Do not include results.
  • asis: Treat output as raw markdown with no enclosing containers.
warning

Include 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)

output-location

Location of output relative to the code that generated it. The possible values are as follows:

  • default: Normal flow of the slide after the code
  • fragment: In a fragment (not visible until you advance)
  • slide: On a new slide after the curent one
  • ‘column’: In an adjacent column
  • column-fragment: In an adjacent column (not visible until you advance)

Note that this option is supported only for the revealjs format.

Figures

fig-cap

Figure caption

fig-subcap

Figure subcaptions

fig-link

Hyperlink target for the figure

fig-align

Figure horizontal alignment (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}[].

Computational figure output that is accompanied by the code that produced it is given a default value of fig-pos="H" (so that the code and figure are not inordinately separated).

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)