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 
tag so the user can display it on-demand. true: collapse code false (default): do not collapse code show: use the 
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)