Is raw data accessible to users in the Observable Framework?

[justinGilmer]

When using data loaders like FileAttachment in an Observable Framework markdown file, is the raw data being loaded accessible to users through their browser's developer tools?

I noticed that when inspecting the network requests in some Observable Framework examples, I could see the GET requests for the data files and even download them locally.

I want to better understand how data is presented to users in Observable notebooks and whether the raw data is exposed through the browser. Any clarification would be greatly appreciated!

Note: I also realize that this might be a consequence of client-side rendering in general, but just want to make sure I understand how this workflow behaves.

I love what this framework has enabled for me already and just want to make sure I understand things well enough (coming from a data science/python developer view).

[mbostock]

Yes, the output of a data loader will be visible to the user just like any other file you might load in a browser. Any data that is accessible to the browser is visible to the user — as you say, this is a fundamental property of client-side rendering.

I don’t typically think of the output of a data loader as “raw” data, though. Data loaders typically have access to data that is not available to users. For example, a data loader might run a query against a database to produce a summary; the summary will be visible to users, but the users won’t have access to the database and won’t be able to run other queries.

To restrict what users can see, you should filter or aggregate your data in your data loader to output only what you need to produce the chart. For example, if you’re producing a bar chart of sales by product, you don’t need to expose the individual sales details in the data; your data loader can produce a set of {product, count} tuples that is informationally equivalent to the bar chart. As long as the output of the data loader and the resulting display is informationally-equivalent, you aren’t revealing anything by using client-side rendering.

[Fil]

It's also possible to render an image server-side, by writing a data loader that outputs that image directly. As it's often a lot less practical than doing it client-side, I would recommend it only as last measure if you're not satisfied that the data minimization is enough (or can't convince your client that it is enough).

For an example, see https://observablehq.observablehq.cloud/pangea/support/becker-barley-ssr

This page has "data loader" scripts that render a chart on the server, and the client only gets to see the static image as a file attachment. It demonstrates both SVG (using a virtual DOM such as linkedom) and PNG (using re-svg on top of that to rasterize the image). It also makes two versions of each, for dark mode, so that makes 4 entry points—but you would typically just create one, two if you want to support dark mode.

[justinGilmer]

Thank you both for these helpful responses! This is exactly the information I was looking for and greatly helps my mental model.