Can we avoid putting observablehq/plot calls inside a function?

[mhkeller]

I'm adding a shorthand function to plot observable charts via plotObservable() but it would be nice if you could pass it the normal Plot function instead of having to wrap it in a function and pass in data. I don't think there's any way around this because Plot requires a browser context.

/* eslint-disable no-undef */
import { readDataSync } from 'indian-ocean';
import * as aq from 'arquero';

import plotObservable from '../src/plotObservable.js';

const events = readDataSync('./test/data/purchase_data.csv');

const dataset = aq
  .from(events)
  .derive({ date: aq.escape(d => new Date(d.date.split('T')[0])) })
  .groupby('date', 'brand')
  .rollup({ value: d => aq.op.sum(d.price_in_usd) })
  .orderby('date', 'brand')
  .objects();

const chart = data => Plot.plot({
  marks: [
    Plot.line(data, {
      x: 'date',
      y: 'value',
      stroke: 'brand',
      strokeWidth: 2,
      curve: 'linear'
    })
  ],
  width: 554,
  height: 130,
  x: { ticks: 3 },
  marginLeft: 50,
  color: {
    legend: true,
    width: 554,
    columns: '120px'
  }
});

await plotObservable(chart, dataset);

It would be nicer to do something like:

const chart = Plot.plot({
  marks: [
    Plot.line(dataset, {
      x: 'date',
      y: 'value',
      stroke: 'brand',
      strokeWidth: 2,
      curve: 'linear'
    })
  ],
  width: 554,
  height: 130,
  x: { ticks: 3 },
  marginLeft: 50,
  color: {
    legend: true,
    width: 554,
    columns: '120px'
  }
});

await plotObservable(chart);

@tophtucker is there anything I'm not thinking of that would output some kind of serialization / JSON spec similar to how the vega-lite-api function returns JSON in the Node environment which can then be passed into the browser to actually execute on the document?

If I use something like Plot.dot(gistemp, {x: "Date", y: "Anomaly"}) without calling .plot() I get a kind of object but I doubt this can be serialized and also I believe that requiring that shorthand would only permit a subset of charts to be used.

Any thoughts welcome!

[tophtucker]

Hm. I'm the worst person for this because I never do anything outside a browser context… 😅

No, there's no serializable JSON equivalent. Could you just pass in the {marks: […], width, height} object? I don't think Plot.line needs the browser environment by itself.

Also I forget if we've talked about the top-level document option?

The document option specifies the document used to create plot elements. It defaults to window.document, but can be changed to another document, say when using a virtual DOM implementation for server-side rendering in Node.

https://observablehq.com/plot/features/plots#other-options

[mhkeller]

Ah interesting. I tested this out a bit and it seems like omitting Plot.plot works (Plot.line indeed does not require the browser) but the resulting object isn't serializable to pass through to Playwright.

The JSDOM works though! I made a little helper to return the document object. I think this usage is a simpler API than separating out the chart function and its arguments. Thanks @tophtucker!