Embed Showing Observable Cells?

Community Help
1

Embedding this notebook onto a local live-server to test it out. It’s working (the svg/chart part anyway), however I am seeing HTML output of seemingly every cell? HTML code is below and so is the screenshot of my live-server.

<!DOCTYPE html>
<body>
<script type="module">

// Load the Observable runtime and inspector.
import {Runtime, Inspector,Library} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
const runtime = new Runtime(Object.assign(new Library, {width: 640}));
// Your notebook, compiled as an ES module.
import notebook from "https://api.observablehq.com/@kickout/untitled.js?v=3";

// Load the notebook, observing its cells with a default Inspector
// that simply renders the value of each cell into the provided DOM node.
new Runtime().module(notebook, Inspector.into(document.body));

</script>

image
image751×1014 56.1 KB

2

Hi, @kickout,

Yes. This code will render every cell, in order, into document.body:

new Runtime().module(notebook, Inspector.into(document.body));

If, instead, you want to only render your slider, button, and chart, try something like this instead:

<!DOCTYPE html>
<body>
<div id="time"></div>
<div id="yldprod"></div>
<div id="chart"></div>

<script type="module">

import {Runtime, Inspector,Library} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
const runtime = new Runtime(Object.assign(new Library, {width: 640}));
import notebook from "https://api.observablehq.com/@kickout/untitled.js?v=3";

new Runtime().module(notebook, name => {
  switch (name) {
    case "viewof time": return new Inspector(document.querySelector("#time"));
    case "viewof yldprod": return new Inspector(document.querySelector("#yldprod"));
    case "drawchart": return new Inspector(document.querySelector("#chart"));
  }
});

</script>

For more information about how this works, see: https://observablehq.com/@observablehq/downloading-and-embedding-notebooks

3

Follow-up would be rendering my css cell (named myStyles following other forums posts on here).:

case "myStyles": return new Inspector(document.querySelector("#NotSureWhatToUse"))

This basically breaks everything.

4

Also, this is no good:

import {Runtime, Inspector,Library} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import notebook from "https://api.observablehq.com/@kickout/untitled.js?v=3";
  new Runtime().module(notebook, name => (name === "drawchart" || name === "myStyles") && Inspector());

</script>
5

You’ll want to add an HTML div to render the styles into, so:

<!DOCTYPE html>
<body>
<div id="time"></div>
<div id="yldprod"></div>
<div id="chart"></div>
<div id="styles"></div>

<script type="module">

import {Runtime, Inspector,Library} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
const runtime = new Runtime(Object.assign(new Library, {width: 640}));
import notebook from "https://api.observablehq.com/@kickout/untitled.js?v=3";

new Runtime().module(notebook, name => {
  switch (name) {
    case "viewof time": return new Inspector(document.querySelector("#time"));
    case "viewof yldprod": return new Inspector(document.querySelector("#yldprod"));
    case "drawchart": return new Inspector(document.querySelector("#chart"));
    case "myStyles": return new Inspector(document.querySelector("#styles"));
  }
});

</script>

Note the <div id="styles"></div> at the top of the page. That’s where your styles will be inserted.