It’s straightforward to make the number of ticks in the scale responsive but are there any other approaches that help make Plot graphics resize for mobile screens?
This is not finished yet I am testing it, but I made a responsive grid, and I have noticed that if you set the width and height of a plot it will resize the labels nicely (see dynamicTimeseries example in the notebook).
I am also trying to figure out a simple way to do mobile UIs and my fairly opinionated method is put everything on a 3 column grid and restack the grid to be appropriate for the screen size.
1 Like
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
Thanks both. These are very helpful suggestions.