trouble embedding cells into HTML page

Community Help
1

Hi Observable!

I’ve been following along Jeremy’s Downloading and Embedding Notebooks in trying to embed two cells from a simple notebook into an HTML container. I’ve had some past luck w/ embeds, but each time I hacked away till hitting a solution without really understanding what made things work. As I am again encountering issues, I turn to you for insights and guidance.

Here’s the HTML I am trying to use, which is derived from Jeremy’s Breakout example, but replaces his notebook ID and cell names with my own (note too, that @jashkenas 's example is itself returning mutable score could not be resolved):

Embedded Observable notebook
TEST
<script type="module">
  import {Inspector, Runtime} from "https://unpkg.com/@observablehq/notebook-runtime@1.0.1?module";
  import notebook from "https://observablehq.com/d/87de48220ae3faec";
  const renders = {
    "viewof value": "#labels",
    "output": "#output",
  };
  Runtime.load(notebook, (variable) => {
    const selector = renders[variable.name];
    if (selector) {
      return new Inspector(document.querySelector(selector));
    } else {
      return true;
    }
  });
</script>

… This code, however, doesn’t return anything.

For good measures, I tried adapting the code following Fil’s example (which uses a different version of the runtime):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Embedded Observable notebook</title>
    
  </head>
  <body>
    <div class="wrapper">
      <div class="title">TEST</div>
      <div id="labels"></div>
      <div id="output"></div>
    </div>

    <script type="module">
      import {Inspector, Runtime} from "https://unpkg.com/@observablehq/notebook-runtime@2?module";
      import notebook from "https://observablehq.com/d/87de48220ae3faec";
      const renders = {
        "viewof value": "#labels",
        "output": "#output",
      };
  
  for (let i in renders)
    renders[i] = document.querySelector(renders[i]);

  Runtime.load(notebook, (variable) => {
    if (renders[variable.name])
      return new Inspector(renders[variable.name]);
  });
    </script>
  </body>
</html>

… still no dice, with errors like:

Access to script at 'https://observablehq.com/d/87de48220ae3faec.js' from origin 'https://aaronkyle.github.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
embed-test.html:18 GET https://observablehq.com/d/87de48220ae3faec.js net::ERR_FAILED

Access to script at 'https://observablehq.com/d/87de48220ae3faec.js' from origin 'https://aaronkyle.github.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
embed-test.html:18 GET https://observablehq.com/d/87de48220ae3faec.js net::ERR_FAILED

Any idea what I might be missing? Seems that these embeds should be easy… but there’s clearly something I haven’t yet figured out.

Thanks in advance for your help!

2

Simple Error!

The notebook code I was trying was incorrect. When I went to download code using the ... menu, I took the URL value listed at the top of the page. I should have instead taken the page URL itself.

That is:

https://observablehq.com/d/87de48220ae3faec

should have been:

https://api.observablehq.com/d/87de48220ae3faec.js

2 Likes
3

Thanks for the bug report too, Aaron. I’ve fixed the Breakout embedded notebook example.

1 Like
4

I’m a beginner at this, and I’m having the same problem Aaron was. However, I am using the proper URL. The following is the source of my very simple test page which uses the exact code from Jeremy’s Downloading and Embedding Notebooks page.

Like Aaron’s example, this doesn’t return anything. I’m sure I’m being stupid…

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="/observable-styles.css" media="screen">
       <script type="module">

      // Load the Observable runtime and inspector.
     import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";

     // Your notebook, compiled as an ES module.
import notebook from "https://observablehq.com/@ralphlombreglia/zoomable-sunburst@343";

     // 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>
       <title>Observable Test</title>          
</head>

<body>
	<div class="chart">
<p>Observable Test</p>
	</div>
</body>
</html>

Thanks.

5

Hi Ralph, to import notebooks to other sites, you have to use the URL that you get by clicking on “Download Code” in the upper right menu. Try changing these lines:

// Your notebook, compiled as an ES module.
import notebook from "https://observablehq.com/@ralphlombreglia/zoomable-sunburst@343";

to this:

// Your notebook, compiled as an ES module.
import notebook from "https://api.observablehq.com/@ralphlombreglia/zoomable-sunburst@343.js?v=3";
1 Like
6

And here I went out of my way to say that I was using the proper URL, and I wasn’t! I think at one point I did try the URL with “api” in them, couldn’t get it to work, and then reversed myself. Duh.

Well, your suggestion works perfectly. Now I’d like to learn how to control the display, be more selectable about what gets outputted, and learn how to feed my own data to Observables. Any suggestions for tutorials?

Thanks!

7

Glad it worked! For more control on the output of cells, you could look into writing a custom observer function. I don’t know of any tutorials on that, but there’s a simple example at the beginning of the runtime documentation and you can also look at the source code of the Inspector for ideas as well.

To put your own data in Observable, there’s this:

and also this if you want to connect to databases:

Feel free to make a new post if you have any questions!

1 Like