Observable Plot with NodeJS?

[nshiab]

Hi!

I would love to use Plot on both front end and back end.

I tried using it with NodeJS, but it didn't work. Here's what I got.. I thought the function would output the svg code and I would be able to write it in a file. But it's looking for the html document and there isn't one.

Any idea how to make it work?

Thanks!

[mbostock]

You’ll need to provide a DOM implementation to use Plot. We use JSDOM for testing, so you could crib from our approach in test/jsdom.js. For example, this script will output the generated HTML for a plot:

import * as d3 from "d3";
import * as Plot from "@observablehq/plot";
import {JSDOM} from "jsdom";
import fs from "fs/promises";

withJsdom(async () => {
  const penguins = d3.csvParse(await fs.readFile("./penguins.csv", "utf8"), d3.autoType);
  const plot = Plot.plot({
    grid: true,
    marks: [
      Plot.dot(penguins, {
        x: "culmen_depth_mm",
        y: "culmen_length_mm",
        stroke: "species"
      })
    ]
  });
  console.log(plot.outerHTML);
})();

function withJsdom(run) {
  return async () => {
    const jsdom = new JSDOM("");
    global.document = jsdom.window.document;
    try {
      return await run();
    } finally {
      delete global.document;
    }
  };
}

I’ve also filed #848 so that you can pass document as an option rather than requiring it to be a global.

[nshiab]

Wonderful! Thanks @mbostock !

[Fil]

I've put this solution into an easy-to install repo https://github.com/Fil/plot-cli