embedding single cell from notebook using the Download Code option

Community Help
1

Hi, I am trying to embed a single cell from a notebook into a webpage. I tried using the embedding described here but we cannot have the footer in our use case. If I use the bundle from “Download Code” I am shown all cells in the notebook. So, I took the following approach to only show one cell

  1. I gave the cell I want to visualize an ID (#dashboard)
  2. I use d3 to hide all cells d3.selectAll('.observablehq').style('display', 'none')
  3. I use d3 to display my cell of interest d3.select('#dashboard').node().parentNode.style.display = 'block'

This approach seems to work, but I wanted to get some feedback about whether there would be a cleaner way of doing this.

2

I am on the phone, so sorry this is not elaborate. In the ‘embed’ option, you can select specific (named) cells. If you want to omit the attribution, you cannot use iframe embed. Edit out attribution with JS embed option.

Are you able to see this? It may be disguised under a nested menu option in next.

If this is not clear, I can follow up after some hours

1 Like
3

… search for advanced embedding. I think Jeremy published originally.

1 Like
4

Sorry, as a follow up (should have asked first), must you self host the bundle after downloading full notebook? If that is your constraint, you might already have cleanest approach…

1 Like
5

Thanks @aaronkyle! I did not see the JavaScript embedding option. We would prefer to host our own code but it is not a requirement so we may use the JavaScript embedding and just remove the credit option.

1 Like
6

FYI - here’ the link to the advanced embedding Advanced Embedding and Downloading / Observable / Observable

7

To be clear, you can absolutely embed code from a downloaded notebook. For example, this web page on my website contains an embedding of one single cell from a downloaded copy of my PlotX3D notebook. To do this, take the embedded code from Observable’s embedding tool, which should look something like so:

<div id="observablehq-hyperbolic_paraboloid-ae05f6b3"></div>

<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import define from "https://api.observablehq.com/@mcmcclur/plotx3d.js?v=3";
new Runtime().module(define, name => {
  if (name === "hyperbolic_paraboloid") return new Inspector(document.querySelector("#observablehq-hyperbolic_paraboloid-ae05f6b3"));
});
</script>

Now, simply modify the import statements to point to your downloaded versions. Assuming you place your HTML file in the top level of your downloaded notebook, your script should then look like so:

<script type="module">
import {Runtime, Inspector} from "./runtime.js";
import define from "./index.js?v=3";
new Runtime().module(define, name => {
  if (name === "hyperbolic_paraboloid") return new Inspector(document.querySelector("#observablehq-hyperbolic_paraboloid-a24ed793"));
});
</script>

Your HTML file should then run the code, when viewed via a web server. You can also un-publish the code afterward. The notebook need not even ever be published, if you know how to write the embedding code in the first place.

2 Likes
8

Thanks @mcmcclur, that approach is causing an issue with deck.gl, but I’ll raise this in a different thread and link. Otherwise, that approach seems to work great.