How to Embed an Observable Notebook in A Hugo Blog

Hongtao Hao / 2020-11-02

Embedding an Observable notebook in a Hugo blog post is no different than embedding it in a stand alone webpage . Also, you can read this tutorial on Observable Jekyll . Although it used Jekyll as an example, it’s exactly the same for Hugo.

Direct embedding through `iframe` #

You can embed a visualization on ObservableHQ directly through an iframe. I talked about how to do it here .

This is the result:

<iframe width="100%" height="534" frameborder="0"
  src="https://observablehq.com/embed/@hongtaoh/explrable-data?cell=reset&cell=add&cell=D_chart"></iframe>

If you don’t want the logo at the bottom, or that you think the loading is too slow, you have to embed it manually, which is what I am going to talk about in this post.

Manual embedding #

This part is almost exactly the same as embedding in a stand-alone webpage . However, since in a Hugo blog post, the head and body are already defined, you don’t need to define the head and don’t need to manually write <p>...</p>, for which you can simply use Markdown (which is why Hugo is invented…).

You should know that within a Hugo blog post, you can still (and herhaps need to) write <div>...</div, directly include a stylesheet with some CSS, and incldue the <script type="module">. You can see the source codes of this blog post here .

The below is what it looks like to manually embed this Observable notebook of mine.

2. Slider: Choose your confidence interval #

Dataset:

3. Buttons #

Full width #

If you want the visualization to be full width, it’s very easy to do so. Follow the instructions in this tutorial . Wrap the target visuzliation within a div that is classed (What? It’s not a verb?) fullwidth (or any name you prefer), and define fullwidth this way¹:

.fullwidth {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

It’s not my creation, but the codes from this tutorial . ↩︎

Last modified on 2024-02-27