Suggestions for live monitor use

Observable’s notebook layout lends itself really well to prose and full-width visuals.

My data is less interesting, a lot of repetitive graphs with low visual fidelity. I also have a desire to fit it all on one screen for use on monitors hanging in the office.

One way to make the presentation flow better for my use case is a 2-column layout. Although something more generalized like a gridstack or spreadsheet layout would also capture it.

The other thing that would be nice in these multi-column situations is to make the layout responsive to the browser itself going fullscreen, which is a different behavior than the built-in fullscreen option.

Not sure if I’m representative of your ideal use case, but as an excel and javascript junkie I think Observable is great for building dashboards. The workflow is much nicer than Google Sheets.

The “notebook as dashboard on an office monitor” use case is absolutely one that we’re interested in supporting well.

For now, does using CSS Grid in a large cell, containing your graphs, combined with Observable’s fullscreen option, work well enough?

An example of CSS grid in a fullscreen cell, try opening up Tom’s Mondrian grid notebook in fullscreen mode.


Glad to hear my use case is on the radar! Getting really DOM-fancy inside 1 cell will work, yeah. It’s the excel fan in me that wants the interface to lean slightly more toward a spreadsheet paradigm.

In my opinion, this request raises an interesting question: How indepedent should notebooks be of the environment?

To arrange cells in a grid (without reparenting their output, and without heavy adjustments to each cell’s code) some assumptions would have to be made:

  1. body is the direct parent of all cells
  2. each cell has an “r” prefixed id of the cell’s node id

While the first condition can be replicated when embedding a notebook externally, the second condition is strictly limited to

1 Like

Here’s a demo of a horizontal scrollable fullscreen layout:


That’s rad. Without a spec in place, I would consider this to be a brittle solution because your notebook could break overnight after a code change from the observablehq team.

With a spec, layouts could be imported from other notebooks. But comes with all the downsides of maintaining a spec as well. I saw a lot of BI dashboards such as those created with Power BI always have a fixed size of 1280x720 (as most corporate users might want to screen grab and include into power point or just present it using a standard projector at work) and they hate dashboards to have a scrollbars etc., and on the other hand, a notebook is indispensable for the analysis etc., one solution I found was to build each visual as a separate notebook. Then have one master notebook that reference the visual cells and places them into a single DOM element that would scale to fill full width at the fixed aspect ratio. Something like the example here, are there any merits or potential disadvantages to this approach?