Need a little help with embedding/static page

1

UPDATED: Hi All, I’ve tried the embedding tutorials, which have gotten me 95% of the way there.
(I’m not linking them here b/c I cant include too many links in this)

But I just can’t get mine to work. I’m trying to embed just the chart only. I feel like it’s properly in a cell named “chart.” That’s the name on the left side of the cell. But yes, somehow it’s apparently not finding any child named “chart.”

Here’s my notebook:

Here’s my working webpage:
The console is giving me an error "Cannot read property ‘appendChild’ of null:

http://greencracker.pythonanywhere.com/budget-2020/chart-only.html

2

Hi Maggie.

Try removing the following line:

Runtime.load(notebook, Inspector.into(document.body));

Looks like it works:

https://aaronkyle.github.io/concept/data-visualization/sandbox/greencracker.html

3

Thanks! But how can I get just the chart, not the code?

I just amended my question a good bit. There is an error in the console when I add this:

Runtime.load(notebook, (cell) => {
          if (cell.name === "chart") {
            return {
              fulfilled: (value) => {
                document.getElementById("chart").appendChild(value);
              }
            };
          }
        });
4

Try this version:

<html>
    <body>
    
    <div class="wrapper">
      <div class="title">TEST</div>
      <div id="output"></div>
    </div>
   
    </body>
    
    <script type="module">
       // Load the Observable runtime and inspector
      import {Inspector, Runtime} from "https://unpkg.com/@observablehq/notebook-runtime@2?module";
          //  Load your notebook, compiled as an ES module.
      import notebook from "https://api.observablehq.com/@greencracker/treemap.js";
      const renders = {
        "chart": "#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>
    
   


</html>

https://aaronkyle.github.io/concept/data-visualization/sandbox/greencracker-cell

Where the code says

  const renders = {
    "chart": "#output",
  };

You can add in more cells to call in explicitly.

For example

  const renders = {
    "chart": "#output",
    "viewof tile": "#input",
  };

Just make sure there’s a corresponding <div> element in your HTML document.

2 Likes
5

Perfect, thank you!!

I managed to stumble upon doing this too, in case anyone else is reading this, I think it makes a little more sense to beginners – it’s the same principle but less modular – adding a div by hand at the top :slight_smile:

<html>
    <body></body>
    <div id="chart"></div>
    <script type="module">
      // Load the Observable runtime and inspector.
        import {Runtime, Inspector} from "https://unpkg.com/@observablehq/notebook-runtime?module";

      // Your notebook, compiled as an ES module.
        import notebook from "https://api.observablehq.com/@greencracker/treemap.js";

        Runtime.load(notebook, (cell) => {
          return {
            pending: () => console.log(`${cell.name} is running...`),
            fulfilled: (value) => console.log(cell.name, value),
            rejected: (error) => console.error(error)
          };
        });

        Runtime.load(notebook, (cell) => {
          if (cell.name === "chart") {
            return {fulfilled: (value) => $("chart").append(value)};
          } else {
            // Force evaluation of all the other cells in the notebook.
            return true;
          }
        });

        Runtime.load(notebook, (cell) => {
          if (cell.name === "chart") {
            return {
              fulfilled: (value) => {
                document.getElementById("chart").appendChild(value);
              }
            };
          }
        });


    </script>

</html>
1 Like