# code visible with embedded notebook

**URL:** <https://talk.observablehq.com/t/code-visible-with-embedded-notebook/1359>\
**Category:** Help\
**Created:** [October 26, 2018, 3:56pm UTC](https://talk.observablehq.com/t/code-visible-with-embedded-notebook/1359 "2018-10-26T15:56:13Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![aglerum](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aglerum/32/1341_2.png) [@aglerum](https://talk.observablehq.com/u/aglerum)\
**Post date:** [October 26, 2018, 3:56pm UTC](https://talk.observablehq.com/t/code-visible-with-embedded-notebook/1359/1 "2018-10-26T15:56:13Z")

</div>

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](http://myweb.fsu.edu/aglerum/observables/radial_tree_notebook.html)

I followed instructions on [Downloading and Embedding Notebooks](https://beta.observablehq.com/@jashkenas/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!

---

<div class="post-metadata">

**Author:** ![jashkenas](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jashkenas/32/1778_2.png) [@jashkenas](https://talk.observablehq.com/u/jashkenas)\
**Post date:** [October 26, 2018, 4:13pm UTC](https://talk.observablehq.com/t/code-visible-with-embedded-notebook/1359/2 "2018-10-26T16:13:16Z")

</div>

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:

```auto
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!

---

<div class="post-metadata">

**Author:** ![aglerum](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aglerum/32/1341_2.png) [@aglerum](https://talk.observablehq.com/u/aglerum)\
**Post date:** [October 26, 2018, 4:22pm UTC](https://talk.observablehq.com/t/code-visible-with-embedded-notebook/1359/3 "2018-10-26T16:22:14Z")

</div>

> [@jashkenas](#):
>
> Runtime.load(notebook, (cell) =\> { if (cell.name === “chart”) { const element = document.body.appendChild(document.createElement(“div”)); return new Inspector(element); } });

Thank you, @jashkenas,

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