Observablehq ships with lightweight interface components such as buttons, sliders, dropdowns, etc., to facilitate interactive widgets, a concise plotting API, and the ability to fork/import other public notebooks.
When building exploratory observable notebooks, I like to interweave markdown text and interactive displays leaving all the utility functions at the bottom, see e.g. this 4dstem multislice simulation notebook. I then create a separate (untitled) notebook which simply imports the necessary visualizations/widgets to export as I’d like to appear in the presentation, see e.g. this 4dstem multislice simulation component.
Once you’re satisfied with your interactive component, you need to export it as a React component to embed in our presentation. Observablehq provides many ways to embed notebook cells onto websites, but we’re interested in embedding the “Entire notebook” using “Runtime with React” in the pop-up window.
Each interactive component must then be yarn-installed in your docusaurus website (see below) and the minimal code the pop-up windown prompts you to copy should be placed in the
src directory, see e.g. here.
At this point, if you created the component yourself, you can remove the
<p> tag with the attribution banner.
Finally, if you’ve modified the notebook a few times, make sure to install the correct pinned version of the notebook.
The actual website is made using Docusaurus, a wonderful documentation-site builder using React and MDX. This will give us site-navigation as-well as a sidebar “for-free” where each documentation markdown page is written in MDX, allowing you to embed React components directly into markdown text, see e.g. here.
A number of configuration options can be used to make the website look more “presentation-like”:
- Hideable sidebar
- Hideable table-of-contents on each doc page
- CSS-styling to hide observable “inspector” cells
- Tabs and details elements were used to mimic slide animations