How to set the figure alignment in OJS?

[kamransoomro84]

Description

I would like to centre a figure generated using OJS. Here is an MWE:

---
format:
  revealjs:
    embed-resources: true
---

## {.smaller .c-centre}

```{python}
import pandas as pd
import numpy as np
import seaborn as sns
import matplotlib.pyplot as plt

np.random.seed(42)

x = np.random.randint(0, 100, size=100)
m = 3
c = 2

y = (m * x + c) + np.random.normal(0, 40, size=100)

ojs_define(data = {
  "x": x.tolist(),
  "y": y.tolist()
})
```

```{ojs}
//| fig-align: center
//| fig-width: 100%

viewof m = Inputs.range([-10, 10], {step: 0.5, label: "m", width: "10em"})
viewof c = Inputs.range([-100, 100], {step: 1, label: "c", width: "10em"})

line = data.x.map(x => ({x: x, y: m * x + c}))

Plot.plot({
  x: {axis: null, domain: [0, 100]},
  y: {axis: null, domain: [-100, 300]},
  marks: [
    Plot.frame(),
    Plot.dot(transpose(data), {x: "x", y: "y", fill: "blue"}),
    Plot.line(line, {x: "x", y: "y", stroke: "red"})
  ]
})
```

The figure is still left aligned.

I addition, I'd also like to be able to set the figure width.

[mcanouil]

"figure" are cross-referenceable object, otherwise it's an "image".
Note also that in this particular case, it's not even an image (png/svg), it's a widget involving an image.

Here you need to understand the structure of the HTML code your are building. You can do so using your favourite browser and its inspect/developer mode.

I suggest searching for the issues/discussions on the topics (there are several treating this and showing solutions and workarounds).

Finally, but related, the width of something in HTML especially when using relative units such as percentages, mean relative to the parent div, not relative to the viewscreen.
This being said, You can look at the documentation of the tool you are using to see how you can customise the output (not related to Quarto).

[kamransoomro84]

Thank you for the explanation. This does make a lot of sense to me except for one thing. I can specify figure alignment and width using fig-width and fig-alignment for Python code cells. Doesn't the same logic apply there?

[mcanouil]

Python produces static code at built-time.
Observable.js produces dynamic code at built-time and is display at render-time in your browser.
Widgets modify the HTML DOM which makes it harder to ensure the right CSS is applied at the right place. You can see issues about this for other libraries such as leaflet.

These are very different things.

[kamransoomro84]

Ok that makes sense. Thanks.

[mcanouil]

To be clear, I'm not saying it should not work at some point.
Only that there are known issues and that this one is one of them:

• https://github.com/quarto-dev/quarto-cli/issues?q=is%3Aissue%20state%3Aopen%20fig-align

FYI, I was thinking of the following issue in particular:

• fig-align: center for leaflet in revealjs #8053

[kamransoomro84]

Thank you!