generating static plots on build (Framework)

Please bear with me, I’m a first-time user of Framework (and any Observable product).

It would be great to have a simple way to somehow flag some or all plots I insert in a page to be generated statically on build, rather than exporting the data files and the code that build the plots to the build. Not sure whether that would be easy to implement, or indeed at all possible?

I realize that I can put any sort of code in data loaders and have that generate static images of the plots, but then I lose a lot of the convenience provided by the framework and have to deal directly with the apis of multiple libraries.


Could you share a bit more about your use case? Why would you want to pre-create the viz in the data loaders? As you mentioned, you could certainly create a static image in a data loader and just display that, but I am curious to learn about why this would be desirable in your use case.

When the plot’s data is frozen at build time anyway, it makes sense to build the plot as well rather than have it generated in the client - under the assumption that pages with pre-built plots will display faster, and will be cached by the browser rather than regenerated every time the user switches pages, making for a better user experience. It’s of course great to have the option to generate plots dynamically when the data is fetched on the fly from an API or other external source, but it doesn’t seem so great when the data is static, up to the next build.

Quite often, it is useful to have the plots be dynamic, allowing the user to explore the (static) data with Inputs, tooltips and other interactions, for example this dashboard or this data app.

Depending on the complexity and size of the data, I can see there being cases where it would make sense to generate an image as part of the data loader. You can see an example of that here.

Thank you for that example.
A slight inconvenience is that it seems that you need a data loader for each plot you want to pre-generate, even when they are all based on the same data. I understand there is no mechanism for passing arguments to data loaders? If there were, it would solve that issue.
BTW is it impossible to attach tooltips to a static svg?

Do you have an example (or hint) on how to achieve this for vega-lite plots?

If you render the vegalite plot with .render({renderer: 'svg'}) and then output the innerHTML you should get an svg file. I don’t think there is a way to do tooltips with static svgs.