Which fields can contain param references when using parseSpec?

[rickiesmooth]

I try to dynamically update the y channel with a Param:

const kpi = vg.Param.value("visits")
const globalSelection = vg.Selection.single();

const specs = {
  mark: "lineY",
  data: {
    from: "kpis",
    filterBy: "$global",
  },
  x: "date",
  y: "$kpi",
  stroke: "steelblue"
}

vg.parseSpec(
  specs,
  {
    params: [["global", globalSelection], ["kpi", kpi]],
  }
).then((plot) => {        
  containerRef.current?.replaceChildren(plot);
});

My filterBy: "$global attribute works as expected but y: "$kpi" does not. The docs seem to imply that param references work with plot attributes, so I'm not sure if I'm doing something wrong or that there's a bug I need to create an issue for.

[rickiesmooth]

@jheer sorry for tagging you but I was wondering if you know

[jheer]

Good question! Currently the mark logic treats Param values as scalars, so a string value is interpreted as a string literal as opposed to a column name. I think that is why you are seeing an error here.

Here is an alternative setup:

{
  await vg.coordinator().exec(
    vg.loadObjects('kpis', [
      { date: 1, visits: 5, clicks: 3 },
      { date: 2, visits: 10, clicks: 5 },
      { date: 3, visits: 7, clicks: 4 }
    ])
  );

  const globalSelection = vg.Selection.single();
  
  const kpi = vg.Param.value(vg.column('visits')); // value is explicitly a column
  const color = vg.Param.value('steelblue');
  
  return vg.plot(
    vg.lineY(vg.from('kpis', { filterBy: globalSelection }), {
      x: 'date',
      y: vg.sql`${kpi}`, // dynamic SQL expression provides column dependency logic
      stroke: color // works directly as params are treated as scalar values
   })
  );
}

There are two awkward pieces above. First, the kpi param is set to a column value explicitly. It might be nice to use a string here and defer interpretation as a column to later. Second, as Param instances currently don't reason about column dependencies (and marks don't check param values to see if they are expressions/columns), for the y channel above I wrap the param in a tagged SQL template. The result is a SQL expression that does reason about columns and exposes the necessary information for the mark to interpret it as an encoding channel rather than a scalar value.

I'll have to think more about potential changes to make this smoother... one idea is to extend vg.column to handle params, in which case something like { y: vg.column(kpi) } (or { y: { column: "$kpi" } } in a JSON spec) might work.

[rickiesmooth]

This is exactly what I was looking for, just tested it out and it works!

The result is a SQL expression that does reason about columns and exposes the necessary information for the mark to interpret it as an encoding channel rather than a scalar value.

I see, that's probably the reason why my tooltip doesn't display the column name anymore (it just says y)..but I can live with that.

Thanks for explaining!

[mhkeller]

I was trying to adjust this example to set the x and y fields via Menu inputs. It works when I set the y-channel dynamically but it doesn't let me set X. Here's a notebooks with the working and non-working version: https://observablehq.com/d/97c15f2e96ab608c

And another attempt trying to reproduce the linear regression example with dynamic inputs using a slightly different setup. This also doesn't work but doesn't throw an error: https://observablehq.com/d/066dfede40317171

Does the syntax need adjusting when using it with a menu?

edit: I just saw this PR, which maybe means that Menu's can't currently select channels.

edit2: That PR is about implementing this as a spec so I think something is just off in my syntax to get this to work through the JS API.

edit3: This was fixed after updating to 0.7.1