Creating plot with JSDOM fails, but works in notebook.

[StromFLIX]

Error Rendering SVG with Node.js Using @observablehq/plot

Summary

I encountered an issue when attempting to render an SVG using @observablehq/plot in a Node.js environment. According to the documentation, this should be possible. While simple examples work fine, more complex examples result in an error.

Reproduction Steps

The following simple code works as expected, generating a valid base64-encoded PNG image from an SVG:

import sharp from "sharp";
import * as Plot from "@observablehq/plot";
import { JSDOM } from "jsdom";

const data = [
  { a: 1, b: 10 },
  { a: 2, b: 20 },
  { a: 3, b: 30 },
];
const plot = Plot.plot({
  document: new JSDOM().window.document,
  marks: [Plot.dot(data, { x: "a", y: "b", fill: "green" })],
});

const sharpOut = await sharp(Buffer.from(plot.outerHTML, "utf-8"))
  .png()
  .toBuffer();
const base64Image = sharpOut.toString("base64");
console.log(base64Image);

However, when attempting to render a more complex SVG that includes projections and geospatial data, the code fails with the following error:

TypeError: Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'

Here is the code that causes the issue:

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

const country_outline = {
  type: "Feature",
  id: "250",
  properties: { name: "France" },
  geometry: {
    type: "MultiPolygon",
    coordinates: [[[[-51.658716587165856, 4.155807753115468], [-52.24912249122491, 3.241826107316186], [-52.555125551255514, 2.503870556263422]]]],
  },
};
const country_railway_stations = {
  type: "FeatureCollection",
  features: [
    { type: "Feature", properties: { name: "Paris", id: "1" }, geometry: { type: "Point", coordinates: [2.3522219, 48.856614] } },
    { type: "Feature", properties: { name: "Lyon", id: "2" }, geometry: { type: "Point", coordinates: [4.835659, 45.764043] } },
    { type: "Feature", properties: { name: "Marseille", id: "3" }, geometry: { type: "Point", coordinates: [5.36978, 43.296482] } },
    { type: "Feature", properties: { name: "Toulouse", id: "4" }, geometry: { type: "Point", coordinates: [1.444209, 43.604652] } },
    { type: "Feature", properties: { name: "Nice", id: "5" }, geometry: { type: "Point", coordinates: [7.265592, 43.710173] } },
  ],
};
const x_middle = 4;
const y_middle = 51;
const zoom = 4;
const plot = Plot.plot({
  document: new JSDOM("").window.document,
  projection: {
    type: d3.geoAzimuthalEquidistant,
    domain: d3.geoCircle().center([x_middle, y_middle]).radius(zoom)(),
  },
  color: { scheme: "PuBu" },
  marks: [
    Plot.geo(country_outline),
    Plot.dot(country_railway_stations.features, {
      x: (d) => d.geometry.coordinates[0],
      y: (d) => d.geometry.coordinates[1],
      channels: { name: "name" },
      tip: true,
    }),
  ],
});
plot.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns", "http://www.w3.org/2000/svg");
plot.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");

const sharpOut = await sharp(Buffer.from(plot.outerHTML, "utf-8"))
  .png()
  .toBuffer();
const base64Image = sharpOut.toString("base64");
console.log(base64Image);

Expected Behavior

According to the documentation and my own notebook, the code should render an SVG that includes the projected geographical data, which can then be converted to a PNG using sharp.

Actual Behavior

The code throws a TypeError, preventing the SVG from being rendered and converted. The error message suggests that there might be an issue with how events or projections are handled in a Node.js environment.

Environment

• @observablehq/plot: 0.6.16
• Node.js: v18.19.0
• sharp: 0.33.4
• d3: 7.9.0

Please let me know if any additional details are needed, or if there's a workaround or fix that can be applied.

[Fil]

The workaround is probably to remove tip: true?

[StromFLIX]

This seems to solve the issue for the node.js code. Do you know why ? I was not able to find any reference on what could be the issue in the docs.

[Fil]

The high-level answer is that the pointer transform is not compatible (at the moment) with the serialization to SVG, since it's only working with JavaScript. We might want to solve this to help with server-side rendering, but I don't suppose it's an easy task.

The low-level answer is that the pointer transform is assuming some API is here, and the error is unguarded when it is not. Maybe it should fail with a warning instead.

[mbostock]

@Fil No, I think an error would be appropriate if the DOM implementation didn’t support the required API.

But there is actually a bug in Plot here: Plot is using the Event global to construct the event, which is available in Node.js, but JSDOM is expecting window.Event which is more appropriate for the call to dispatchEvent. So Plot should be using context.document.defaultView.Event instead of the global Event to respect the provided document implementation.

Second, Plot doesn’t actually need to dispatch an event here at all. I believe this is trigged by the render(null) call during the initial render, and it’s primarily to set the figure.value property synchronously on construction (rather than leaving it undefined which would cause downstream listeners to wait). We don’t need to dispatch an event because the figure is necessarily detached and hence could not yet have any listeners.

[Fil]

This will be fixed in the next release. Thanks for reporting the issue!