default_observable_export

Method - Default Observable export

This method is the simplest way to "migrate" an Observable notebook to a standalone webpage.

Install

• Go to the notebook, click on "…" and then on "Download tarball")
• Uncompress the psr-b1919-21.tgz file
• Serve the index.html file with a web server

Using cli:

mkdir joyplot
curl -o /tmp/package.tgz https://api.observablehq.com/@mbostock/psr-b1919-21.tgz?v=3
tar xf /tmp/package.tgz --directory joyplot
rm /tmp/package.tgz

and serve locally at http://localhost:8000 with:

python3 -m http.server --directory joyplot

or deploy on now.sh (see https://joyplot-10jbhd7e8.now.sh/) with:

echo '{"builds": [{ "src": "**/*.{js,html,css}", "use": "@now/static" }]}' > joyplot/now.json; npx now joyplot; rm joyplot/now.json

Pros

• very simple, there is nothing to code or install
• works for any notebooks, independently of it inner complexity (try with https://observablehq.com/@fil/tissots-indicatrix or https://observablehq.com/@jashkenas/breakout for example)
• some of the resources are served locally:
  • index.html
  • inspector.css
  • the Observable notebook module the runtime.js Observable library (JS)
• there is no dependence with api.observablehq.com at runtime

Cons

• requires browser compatibility with ES modules
• generates various HTTP requests at runtime to get the dependencies (here d3@5):
  • package.json, in order to locate the actual d3 library file to import
  • the actual d3 library file
• generates an HTTP request to get the data from an external location
  • pulsar.csv
• does not work locally (offline) since it depends on requests to cdn.jsdeliver.net and to the data file