Layout

You can control the layout of OJS content in a number of ways.

page-layout: full

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:"
  }
)

Bill length (min):

bill_length_min = 35

Islands:

TorgersenBiscoeDream

islands = Array(2) ["Torgersen", "Biscoe"]

Plot

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

Inputs.table(filtered)

	species	island	bill_length	bill_depth	flipper_length	body_mass	sex
	Adelie	Torgersen	39.1	18.7	181	3,750	MALE
	Adelie	Torgersen	39.5	17.4	186	3,800	FEMALE
	Adelie	Torgersen	40.3	18	195	3,250	FEMALE
	Adelie	Torgersen	36.7	19.3	193	3,450	FEMALE
	Adelie	Torgersen	39.3	20.6	190	3,650	MALE
	Adelie	Torgersen	38.9	17.8	181	3,625	FEMALE
	Adelie	Torgersen	39.2	19.6	195	4,675	MALE
	Adelie	Torgersen	42	20.2	190	4,250
	Adelie	Torgersen	37.8	17.1	186	3,300
	Adelie	Torgersen	37.8	17.3	180	3,700
	Adelie	Torgersen	41.1	17.6	182	3,200	FEMALE
	Adelie	Torgersen	38.6	21.2	191	3,800	MALE
	Adelie	Torgersen	36.6	17.8	185	3,700	FEMALE
	Adelie	Torgersen	38.7	19	195	3,450	FEMALE
	Adelie	Torgersen	42.5	20.7	197	4,500	MALE
	Adelie	Torgersen	46	21.5	194	4,200	MALE
	Adelie	Biscoe	37.8	18.3	174	3,400	FEMALE
	Adelie	Biscoe	37.7	18.7	180	3,600	MALE
	Adelie	Biscoe	35.9	19.2	189	3,800	FEMALE
	Adelie	Biscoe	38.2	18.1	185	3,950	MALE
	Adelie	Biscoe	38.8	17.2	180	3,800	MALE
	Adelie	Biscoe	35.3	18.9	187	3,800	FEMALE
	Adelie	Biscoe	40.6	18.6	183	3,550	MALE

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);
})

data = Array(344) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, …]

filtered = Array(210) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, …]

width and layoutWidth: fine-grained layout tracking

Like ObservableHQ, ojs cells support the reactive width which tracks the clientWidth of the main HTML element.

width

1023

In addition, if you need the widths of specific parts of the layout, use the CSS class ojs-track-layout in a div. Quarto’s OJS runtime tracks all such divs in layoutWidth. In this example, the tabset above has id penguins-tabset, and you can see its clientWidth reactively below. If this webpage is sufficiently wide, the sidebar will take up some of the space and the width of the resulting tabset will be smaller:

layoutWidth

Object {penguins-tabset: 719}