toward an HTML custom-width (responsive) template following Torben (for the ES6 unaware)

Community Help
2

Here’s a script that should work:

// use static imports because top-level `await` isn’t yet supported in browsers
import notebook from "https://api.observablehq.com/@d3/bivariate-choropleth.js?v=3";
// use a URL instead of a package reference because bare specifiers (like `@observablehq/runtime`) aren’t supported in browsers
import { Runtime, Library } from "https://unpkg.com/@observablehq/runtime@4/dist/runtime.js";

// only initialize the standard library once
const library = new Library()
function customWidth() {
  return library.Generators.observe(function(change) {
    let width = change(target.clientWidth);

    function resized() {
      let w = target.clientWidth;
      if (w !== width) change(width = w);
    }
    window.addEventListener("resize", resized);
    return function() {
      window.removeEventListener("resize", resized);
    };
  });
}
library.width = customWidth

const runtime = new Runtime(library)

// Replace the top-level `await` with `.then`
runtime.module(notebook)
  .value("chart")
  .then(function(chart) {
    document
      .querySelector("#chart")
      .appendChild(chart)
  });
1 Like