code visible with embedded notebook


I’m prefacing this post with the caveat that I am a not a professional coder and appreciate your patience with my naivety.

Why is code displaying at the bottom of the chart in an embedded notebook, and how can this be fixed?


I followed instructions on Downloading and Embedding Notebooks to copy this:

<script type="module">
import {Runtime, Inspector} from "";
import notebook from "";
Runtime.load(notebook, Inspector.into(document.body));

What am I missing?

Thanks so much!

Hi @aglerum,

The Runtime.load(notebook, Inspector.into(document.body)) line is loading every cell in the notebook — including the “code” cells — into the body of the webpage.

If you only want to display the chart, and nothing else, try:

Runtime.load(notebook, (cell) => {
  if ( === "chart") {
    const element = document.body.appendChild(document.createElement("div"));
    return new Inspector(element);

The document.body.appendChild bit is telling the script to just stick the chart at the bottom of the page. If you want to put it somewhere more specific, like in a particular existing <div>, you’ll have to change the element reference to point to it.

Good luck!

1 Like

Thank you, @jashkenas,

That did the trick! And thank you so much for explanation as well. It makes perfect sense.