Tips for making Observable Plot graphics responsive

Zan and I have sometimes noticed that when the width becomes very small, using the top-level width option doesn’t work, since text doesn’t scale down and might start to get out of the viewBox (and of course, we don’t want to micromanage every dimension of every mark).

Our solution was to set a minimum width, e.g.
Plot.plot({ width: Math.max(width, 550), … })

When the screen’s width gets below this threshold of 550px, the browser starts to scale down everything (including text) in a “fixed-proportions” svg, if I may say.

This technique can be seen on some of the charts in What’s different? Analyzing Time-Series Forecast Performance / Observable / Observable (the third and fourth from the top, for example).

1 Like