Overriding a cell when using Observable Runtime

Community Help
1

I’m trying to understand the Observable runtime a bit better. I understand that I can use this code to embed a cell in an element on any page:

<div id="embedded-nb">
  <div class="embedded-chart"></div>
</div>

<script type="module">
  import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
  import define from "https://api.observablehq.com/path/to/notebook?v=3"
  (new Runtime).module(define, name => {
    if (name === 'cellName') return Inspector.into("#embedded-nb .embedded-chart")()
  });
</script>

Is there a way to inject dependencies while doing this on an arbitrary HTML page? Similar to how I can do:

import { cellName } with { injectedValue as cellDependency } from "path/to/notebook"

inside of a notebook.

2

You bet! We have several examples of this in our repo of runtime examples. Here’s one that loads a local JSON file:

<script type="module">

import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import notebook from "https://api.observablehq.com/@d3/zoomable-sunburst.js?v=3";

// Instantiate the notebook.
const runtime = new Runtime();
const main = runtime.module(notebook, name => {
  if (name === "chart") {
    return new Inspector(document.querySelector("#chart"));
  }
});

// Redefine the cell “data” as the contents of the local file population.json;
// this will affect the chart embedded above.
main.redefine("data", fetch("population.json").then(response => response.json()));

</script>
1 Like
3

Oh, perfect! Thank you!

1 Like