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 in most formats): include source code in output false (default in presentation formats like beamer, revealjs, and pptx): 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). If fig-pos is false, then we don’t use any figure position specifier, which is sometimes necessary with custom figure environments (such as sidewaysfigure).
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
html-table-processing	If none, do not process raw HTML table in cell output and leave it as-is

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)