• Overview
  • Get Started
  • Guide
  • Reference
  • Gallery
  • Blog
  • Help
    • Report an Issue
    • Quarto Discussions
    • FAQ

Layout

  • Guide
  • Authoring
    • Markdown Basics
    • Figures
    • Tables
    • Diagrams
    • Callout Blocks
    • Article Layout
    • Scholarly Writing
      • Title Blocks
      • Citations & Footnotes
      • Cross References
      • Creating Citeable Articles
      • Appendices
  • Computations
    • Using Python
    • Using R
    • Using Julia
    • Using Observable
    • Execution Options
    • Parameters
  • Formats
    • HTML
      • HTML Basics
      • HTML Code Blocks
      • HTML Theming
      • Publishing HTML
    • PDF
      • PDF Basics
      • PDF Engines
    • MS Word
      • Word Basics
      • Word Templates
    • Presentations
      • Overview
      • Revealjs
        • Reveal Basics
        • Presenting Slides
        • Advanced Reveal
        • Reveal Themes
      • PowerPoint
      • Beamer
    • Markdown
      • GFM
      • Hugo
    • All Formats
  • Tools
    • JupyterLab
    • RStudio IDE
    • VS Code
    • Text Editors
    • Visual Editor
      • Editor Basics
      • Technical Writing
      • Content Editing
      • Shortcuts & Options
      • Markdown Output
  • Interactivity
    • Overview
    • Observable JS
      • Introduction
      • Libraries
      • Data Sources
      • OJS Cells
      • Shiny Reactives
      • Code Reuse
      • Examples
        • Penguins
        • Sunburst
        • Arquero
        • Population
        • NOAA CO2
        • GitHub API
        • Layout
        • Shiny
          • K-Means
          • Binning
          • Data Binding
          • Covid Map
    • Shiny
      • Introduction
      • Running Documents
      • Execution Contexts
      • External Resources
      • Examples
        • Old Faithful
        • K-Means
        • Diamonds
    • Widgets
      • Jupyter Widgets
      • htmlwidgets for R
    • Component Layout
  • Projects
    • Project Basics
    • Managing Execution
    • Virtual Environments
  • Websites
    • Creating a Website
    • Website Navigation
    • Creating a Blog
    • Customizing Websites
      • Website Search
      • Website Tools
      • About Pages
    • Listing Pages
      • Document Listings
      • Custom Listings
    • Publishing Websites
  • Books
    • Creating a Book
    • Book Structure
    • Book Crossrefs
    • Customizing Output
  • Advanced
    • Includes
    • Variables
    • Page Layout
    • Document Language
    • Conditional Content
  • Extensions
    • Filters
    • Shortcodes

Layout

  • Show All Code
  • Hide All Code

  • View Source

This example uses page-layout: full to have its contents occupy the entire width of the page:

---
title: "Layout"
format: 
  html: 
    page-layout: full
---

Enclose the inputs in a sidebar panel and the outputs in a tabset panel (click the “Code” button at top right to see the full source code):

viewof bill_length_min = Inputs.range(
  [32, 50], 
  {value: 35, step: 1, label: "Bill length (min):"}
)
viewof islands = Inputs.checkbox(
  ["Torgersen", "Biscoe", "Dream"], 
  { value: ["Torgersen", "Biscoe"], 
    label: "Islands:"
  }
)
  • Plot
  • Data
Plot.rectY(filtered, 
  Plot.binX(
    {y: "count"}, 
    {x: "body_mass", fill: "species", thresholds: 20}
  ))
  .plot({
    facet: {
      data: filtered,
      x: "sex",
      y: "species",
      marginRight: 80
    },
    marks: [
      Plot.frame(),
    ]
  }
)
Inputs.table(filtered)

Read and filter the data based on the user’s inputs:

data = FileAttachment("palmer-penguins.csv").csv({typed: true})

filtered = data.filter(function(penguin) {
  return bill_length_min < penguin.bill_length &&
         islands.includes(penguin.island);
})
GitHub API
Shiny
Source Code
---
title: "Layout"
format:
  html:
    echo: false
    code-tools: true
    page-layout: full
---

This example uses `page-layout: full` to have its contents occupy the entire width of the page:

``` yaml
---
title: "Layout"
format: 
  html: 
    page-layout: full
---
```

Enclose the inputs in a sidebar panel and the outputs in a tabset panel (click the "Code" button at top right to see the full source code):

```{ojs}
//| panel: sidebar
viewof bill_length_min = Inputs.range(
  [32, 50], 
  {value: 35, step: 1, label: "Bill length (min):"}
)
viewof islands = Inputs.checkbox(
  ["Torgersen", "Biscoe", "Dream"], 
  { value: ["Torgersen", "Biscoe"], 
    label: "Islands:"
  }
)
```

::: panel-tabset
## Plot

```ojs
Plot.rectY(filtered, 
  Plot.binX(
    {y: "count"}, 
    {x: "body_mass", fill: "species", thresholds: 20}
  ))
  .plot({
    facet: {
      data: filtered,
      x: "sex",
      y: "species",
      marginRight: 80
    },
    marks: [
      Plot.frame(),
    ]
  }
)
```

## Data

```ojs
Inputs.table(filtered)
```
:::

Read and filter the data based on the user's inputs:

```ojs
//| echo: true
data = FileAttachment("palmer-penguins.csv").csv({typed: true})

filtered = data.filter(function(penguin) {
  return bill_length_min < penguin.bill_length &&
         islands.includes(penguin.island);
})
```
Proudly supported by RStudio
  • About
  • FAQ
  • License
  • Trademark