observablehq / plot

A concise API for exploratory data visualization implementing a layered grammar of graphics
https://observablehq.com/plot/
ISC License
4.28k stars 174 forks source link

More support for labels with channel reducers and values #1364

Open Fil opened 1 year ago

Fil commented 1 year ago

This should display "# of specimens" as the y label:

Plot.barY(
  penguins,
  Plot.groupX(
    {
      y: {reduce: "count", label: "# of specimens"},
      fill: (values) => d3.mode(values)
    },
    {x: "species", fill: "island", fy: "sex"}
  )
);

Excerpted from #1360

First tentative: https://github.com/observablehq/plot/commit/9dfeb79bd757d868771ce10bf24270feee5ee587

mbostock commented 1 year ago

We do already implement reducer labels, but you have to specify it as a reducer implementation (and ignore the TypeScript lint because we haven’t declared label as an optional property on the ReducerImplementation interface):

Screenshot 2023-03-21 at 11 41 29 AM
Plot.barY(
  penguins,
  Plot.groupX(
    {
      y: {reduce: (index, values) => d3.count(index, (i) => values[i]), label: "# of specimens"},
      fill: (values) => d3.mode(values)
    },
    {x: "species", fill: "island", fy: "sex"}
  )
).plot()

We could also support this as a decorated reducer function

Plot.barY(
  penguins,
  Plot.groupX(
    {
      y: Object.assign((values) => d3.count(values), {label: "# of specimens"}),
      fill: (values) => d3.mode(values)
    },
    {x: "species", fill: "island", fy: "sex"}
  )
).plot()

if we changed reduceFunction like so

function reduceFunction(f) {
  return {
    label: labelof(f),
    reduce(I, X, extent) {
      return f(take(X, I), extent);
    }
  };
}

There are maybe some other places where we could generate default reducer labels, too.

The TODO in the code here is referring to the fact that we haven’t documented the existing support for labels on ReducerImplementation, not that we haven’t implemented it.

https://github.com/observablehq/plot/blob/2ac08e266d1dd9743870d2c1ebbaf56ceb992524/src/transforms/bin.d.ts#L32-L35

Whereas the TODO here was referring to the fact that it would be nice to specify a label as part of a ChannelValueSpec, parallel to a scale override:

https://github.com/observablehq/plot/blob/2ac08e266d1dd9743870d2c1ebbaf56ceb992524/src/channel.d.ts#L143

So, if we add label to a ChannelReducerSpec, we should do that to ChannelValueSpec, too. And it would complicated the duck test that I propose we add in #1367.

mbostock commented 1 year ago

I think there’s a similar bug here reading inputs e.g. in the map transform. For example I was expecting to be able to feed the map transform x: {value: "foo", label: "Foo"}, because you can feed that e.g. to a line mark. But the map transform’s maybeInput doesn’t check for scale overrides and labels, so it’s not able to read this channel values, and therefore you can’t propagate the channel label.

Fil commented 1 year ago

I've updated the examples/test with the newer reduceIndex syntax.

mbostock commented 10 months ago

Related #1873?