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.
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 observablehq.com 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:
- body is the direct parent of all cells
- 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 observablehq.com.
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.
https://observablehq.com/@a10k/observable-notebook-dashboards 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?