Is Plot.barX(data, { y: (d) => makeY(d), ...}) equivalent to Plot.barX(data, { y: { value: (d) => makeY(d) }, ...}) ?

[guizmaii]

Hi everyone 🙂

I'm struggling a bit with the facets.
I have a bar chart which is grouped thanks to facets, sadly the Plot.text that I'm adding to my chart to add show the data of each bar isn't working well (I didn't find how to make work yet).
Instead of each bar being associated with its data, I have each bar associated with many data.
I'm expecting this:

bar a - | ========== <value a0>         | 
bar b - | ============== <value b0>     | facet 0 
bar c - | ====== <value c0>             | 

bar a - | ============== <value a1>     | 
bar b - | ============ <value b1>       | facet 1 
bar c - | ======== <value c1>           | 

But I have this:

bar a - | ========== <value a0 mixed with value a1>         | 
bar b - | ============== <value b0 mixed with value b1>     | facet 0 
bar c - | ====== <value c0 mixed with value c1>             | 

bar a - | ============== <value a0 mixed with value a1>     | 
bar b - | ============ <value b0 mixed with value b1>       | facet 1 
bar c - | ======== <value c0 mixed with value c1>           | 

While trying to make this work, I tried to change my y definition in my Plot.barX call.
When I use:

Plot.barX(data, { y: (d) => makeY(d), ...})

my bars are showing up but when I use:

Plot.barX(data, { y: { value: (d) => makeY(d) }, ...})

Seeing the type signature of the y parameter:

I was expecting these two pieces of code to be equivalent but the results aren't, why? 🤔

[mbostock]

As to the intent, I don’t follow the problem you describe, but based on the ASCII art that you shared here’s how I might produce a horizontal bar chart with a value label for each bar:

Plot.plot({
  x: {insetRight: 40, grid: true},
  marks: [
    Plot.barX(data, {y: "name", x: "value", fy: "facet", fill: "steelblue"}),
    Plot.ruleX([0]),
    Plot.text(data, {text: "value", y: "name", x: "value", fy: "facet", frameAnchor: "left", dx: 6}),
    Plot.frame(),
  ]
})

The data looks like this (CSV with name, value, and facet columns):

data = [
  {name: "a", value: 10, facet: 0},
  {name: "b", value: 14, facet: 0},
  {name: "c", value: 6, facet: 0},
  {name: "a", value: 14, facet: 1},
  {name: "b", value: 12, facet: 1},
  {name: "c", value: 8, facet: 1},
]

Notebook: https://observablehq.com/d/f671d7a067574995

Is that what you want? If not, can you share some live code that demonstrates the problem, ideally as a notebook?

As to the technical question in the title: this is a bug with a few transforms in Plot, including the stack transform used implicitly by the bar mark. These transforms don’t currently check for a ChannelValueSpec and assume that a ChannelValue is being passed directly. This is discussed a little in #1364. I filed #1873 to track this more explicitly.

You can use a ChannelValueSpec with a mark directly, and hence it is supported with Plot.barX. But you have to be careful to avoid the implicit stack transform. So this:

Plot.plot({
  marks: [
    Plot.barX(data, {y: (d) => d.name, x: (d) => d.value})
  ]
})

Can be rewritten as:

Plot.plot({
  marks: [
    Plot.barX(data, {y: {value: (d) => d.name}, x2: (d) => d.value})
  ]
})

But note the use of x2 rather than x to avoid the implicit stack transform.

Notebook: https://observablehq.com/d/2cac59eacd3ce96b

The problem originates here in the stack transform, where we call Plot.valueof directly with the options values, rather than distinguishing ChannelValueSpec from ChannelValue:

plot/src/transforms/stack.js

Lines 90 to 92 in 1b1da9f

	const X = x == null ? undefined : setX(maybeApplyInterval(valueof(data, x), plotOptions?.[kx]));
	const Y = valueof(data, y, Float64Array);
	const Z = valueof(data, z);

@Fil discusses making this change to Plot.valueof in #1855, saying:

But this is such an encompassing change, that I'm a bit nervous, and confused to know if it's correct.

So ChannelValueSpec is well supported by marks, but the support by transforms is a bit dicey and needs to be improved.

[guizmaii]

Thanks for your very detailed answer, Mike 🙂

I found the root cause of my issue. Dumb mistake as always 🤦‍♂️
Forgot to add the fy: ... parameter on my Plot.text. It was only on my Plot.barX