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

[rickiesmooth]

I'm trying to set the yDomain with a param:

// when I hardcode it it works
const yDomain = vg.Param.array([0, 10)

// when I use an aggregation function it doesn't
const yDomain = vg.Param.array([0, vg.max(vg.column("visits")) // if I'm able to do this I'm hoping to add 10% or something

But that doesn't work, could that possible?

I'm trying to define a minimum scale, so that I can have some more control over the amount of ticks to show when I have little data.

e.g. I'm trying to not show decimal values on the y axis here and have some more space between the highest data point and the top of the graph’s axis:

[jheer]

The domain attribute can be a param value, but param definitions do not support SQL expressions (including helper functions like max and column). So unfortunately this is not possible as written. While a bit more cumbersome, you could query the database yourself to get the value prior to your visualization code. Perhaps something like this:

const [{max}] = await vg.coordinator().query(vg.Query.select({ max: vg.max("visits") }).from("kpis"));
const yDomain = [0, max];

However, I think this may be overkill for your goals. Here are some simpler things to try first:

• To ensure zero is included, use the attribute vg.yZero(true).
• To ensure human-friendly domain extents, use vg.yNice(true).
• To ensure spacing at the end of the axis, try vg.yInset(5) or vg.yInsetTop(5) or similar.
• To control the axis ticks (e.g., avoid decimals), you can try finding an appropriate tickCount value for vg.yTicks(tickCount).
• ...and look at other supported axis configuration attributes.

[rickiesmooth]

ah I thought I tried everything but yInset was the attribute I was looking for! Thanks for thinking along, do you have any good resources to learn more about this "vocabulary"?