Newbie: focused viewing notebooks and visualizations (reader mode)

Community Help
1

Sorry if I’m missing something…
How do I view notebooks without the editing chrome in a way that maximizes screen real-estate for consumption rather than editing? E.g.:
(1) A “reader mode” for the whole notebook – no editing margins on left or right – take up whole screen width
(2) Temporarily select a single cell/visualization and make it full screen in a modal

thanks!

2

Good question! The closest thing would likely be Observable’s embed URL:

embed url
embed url1041×731 1.21 MB

You can find more details about Observable’s embed feature in this notebook:

Note that Observable’s default CSS limits the maximum width of some elements to make them more readable. If you want to override this width, add a cell with the following code to your notebook:

html`<style>
.katex-display, figure, h1, h2, h3, h4, h5, h6, p, table {
  max-width: 100%;
}
</style>`

There is however no (official) way to increase the actual notebook width inside the editor user interface.

1 Like
3

Thanks, I knew about embedding – but that seems like an awful lot of work if all I just want is just a better experience when I’m browsing notebooks.

1 Like
4

You can also select “View in fullscreen” via the dot menu in the upper right, which will remove most of the UI. Note that this is not the same as putting your tab into fullscreen mode via your browser’s settings.

2 Likes
5

I’m brand new to Observable as well, although I have been using D3 for a few years. I’m surprised at the huge waste of space in the default notebook layout. The chart that I’m currently working on is a treemap, and in the current view it sits in the middle of the window and only occupies about 50% of the available width of the screen.

6

While that’s true of the notebook, it’s not necessarily true of the of the visualization’s ultimate home, if you embed it elsewhere. For example, here’s a notebook I wrote to visualize NCAA tournament brackets, which could certainly benefit from more space. It gets that space, when I embed it in a web page.

From my perspective, Observable is really a development environment. In that context, extra space for things like the tree view on the right and the embedding button on the left make sense. I agree with you that there’s more than necessary but it doesn’t bother me because I’m ultimately interested in embedding.

7

Ah ok, that is a better way to think about it. Thanks. I will shift over to using the embedding for the real display.

Cool visualization, btw.