Data Visualization with Observable JS

The API index for Observable JS is here: https://observablehq.com/plot/api

Figure Width and Alignment

CSS

We would like Observable generated figures centered like images are. According to https://www.w3schools.com/howto/howto_css_image_center.asp:

Note that [the image] cannot be centered if the width is set to 100% (full-width).

You can view the CSS styling using the Inspector function of a web browser. For ojs figures, there an "extra" config:

.quarto-figure>figure {
   width: 100%;
   margin-bottom: 0;
}

Changes to the width applied in style.css, _quarto.yml, and in the header of the file have no affect. That CSS style seems to take precedence, but why?

Observable

On the other hand, https://observablehq.com/plot/features/plots#layout-options says "On Observable, the width can be set to the standard width to make responsive plots" which means that the figures resize as the window size changes (i.e. for mobile devices etc)

Width can be changed in the ojs code blocks for Plot.plot, and that does allow the style changes made to CSS via the various methods listed above to take affect. Adding width code: Math.max(width, 550). However, the legend stayed on the left which looked dumb.

So maybe figures must be 100% to be responsive, but being 100% requires them to be left justified. We are at an impasse.