mutable plots = Object.create(null);
makePlot = (opts) => {
    if (mutable plots[opts.column] === undefined) {
        const result = new vg.Plot();
        vg.rectY(
            vg.from("flights10m", { filterBy: brush }), // data set and filter selection
            { x: vg.bin(opts.column), y: vg.count(), fill: "steelblue", inset: 0.5 }
        )(result);
        vg.intervalX({ as: opts.brush })(result);
        vg.xDomain(vg.Fixed)(result);
        vg.marginLeft(75)(result);
        vg.width(opts.width || 600)(result);
        vg.height(opts.height || 200)(result);
        result.marks.forEach(mark => vg.coordinator().connect(mark));
        mutable plots[opts.column] = result;
        return result.element;
    } else {
        // avoid recreating plots because of brush state issues.
        const result = mutable plots[opts.column];
        return result.element;
    }
}
vg = {
  const vg = await import('https://cdn.jsdelivr.net/npm/@uwdata/vgplot@0.4.0/+esm');
  const wasm = await vg.wasmConnector();
  vg.coordinator().databaseConnector(wasm);
  return vg;
}
brush = {
  // load flights data from external parquet file
  await vg.coordinator().exec(`CREATE TABLE IF NOT EXISTS flights10m AS
    SELECT
      GREATEST(-60, LEAST(ARR_DELAY, 180))::DOUBLE AS delay,
      DISTANCE AS distance,
      DEP_TIME AS time
    FROM 'https://cscheid.github.io/quarto-dashboard-ojs-examples/flights-10m.parquet'`);

  // create a selection with crossfilter resolution
  return vg.Selection.crossfilter();
}