🏠 back to Observable

code visible with embedded notebook

#1

Hello,

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?

radial_tree_notebook

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

<script type="module">
import {Runtime, Inspector} from "https://unpkg.com/@observablehq/notebook-runtime?module";
import notebook from "https://api.observablehq.com/@mbostock/d3-radial-tidy-tree.js";
Runtime.load(notebook, Inspector.into(document.body));
</script>

What am I missing?

Thanks so much!

#2

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 (cell.name === "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!

#3

Thank you, @jashkenas,

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