Reduce for line/area values?

[Fil]

In lines and areas, the stroke, fill, fillOpacity, strokeOpacity, strokeWidth, title, and ariaLabel channels are reduced to the first element of the series in

plot/src/style.js

Line 163 in 5ce6cc0

export function applyGroupedChannelStyles(selection, {target}, {ariaLabel: AL, title: T, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO, strokeWidth: SW, opacity: O, href: H}) {

It would be interesting to be allowed to customize this reducer, in particular for title and ariaLabel, where we might want to display something like "10 data points with a mean of 3.3".

But this requires a structural change, because at present the scales are applied before the call to mark.render, and the grouping is done in render.

A solution could be to make any mark that needs grouping request that grouping (by z and by facet), by adding a "group: true" option for the mark, a grouper: true option for the grouping channel (z), and a grouped: true option on the channels which must be reduced (currently all defined in style.js). Then we could imagine that a line mark would be defined as

Plot.line(data, {x, y, z, ariaLabel: { value: "name", reduce: "mode" }})

or

Plot.line(data, {x, y, z, ariaLabel: { value: "name", reduce: series => some stats about the series }})

[mbostock]

Duplicate of #503?

[Fil]

hmm… yes! and the solution of #503 also works here (with Plot.map). The only trouble is that Plot.map wants us to return an array of the same length as the series, but now it's just a matter of syntactic sugar.

To be clear the solution currently looks like this:

Plot.map({
  ariaLabel: data => new Array(data.length).fill(
     `${data.length} points with a mean of ${d3.mean(data)}`
  )
}, {
  x: "Date", y: "Close", strokeWidth: 1,
  ariaLabel: "Close"
})

Maybe a Plot.reduce helper would be useful.

function Plot_reduce(reducers, options) {
  const maps = {};
  for (let k in reducers)
    maps[k] = (data) => new Array(data.length).fill(reducers[k](data))
  return Plot.map(maps, options);
}

This is suboptimal as a data structure, but that can be optimized later, with a specific type of "uniform channel" (maybe an array of 1 with a property uniform: true, or an object of the shape {value: "xx"}).

(With a list of named reducers as in #508.)

[Fil]

Addendum: it could also be a slight change in Plot.map, where if a reducer returns a primitive data type, it's wrapped in a "uniform array".

[mbostock]

Let’s consolidate the discussion. I’ve closed the other issue.

I think my preference is something like this, where you can specify what reducer to use:

Plot.line(data, {stroke: {value: "temperature", reduce: "median"}, x: …})

Probably the way this works is that the Line and Area constructor pulls out the reducer, so the stroke channel gets computed as stroke: "temperature", and then the reducer is applied, somehow, in applyGroupedChannelStyles. So you can use any of the built-in reducers or define your own custom reducer.

I’d rather not fill an array of n values only to pull out the first one. 🙂

[mbostock]

I’m still catching up with all your work! #508 is very close to what I want. But, I don’t think we can use the map transform for this (because I don’t want to create a full array—I just want to reduce and extract a single value), and we should avoid the mutation here:

plot/src/style.js

Line 169 in 286220b

maps.push([key, d => (d[0] = reduce(d), d)]);

And, we should find a way to reuse the standard reducers to avoid duplicate implementations and quirks (perhaps we’d only allow a subset of the standard reducers in this context):

plot/src/transforms/group.js

Lines 198 to 224 in 5ce6cc0

	export function maybeReduce(reduce, value) {
	if (reduce && typeof reduce.reduce === "function") return reduce;
	if (typeof reduce === "function") return reduceFunction(reduce);
	switch (`${reduce}`.toLowerCase()) {
	case "first": return reduceFirst;
	case "last": return reduceLast;
	case "count": return reduceCount;
	case "distinct": return reduceDistinct;
	case "sum": return value == null ? reduceCount : reduceSum;
	case "proportion": return reduceProportion(value, "data");
	case "proportion-facet": return reduceProportion(value, "facet");
	case "deviation": return reduceAccessor(deviation);
	case "min": return reduceAccessor(min);
	case "min-index": return reduceAccessor(minIndex);
	case "max": return reduceAccessor(max);
	case "max-index": return reduceAccessor(maxIndex);
	case "mean": return reduceAccessor(mean);
	case "median": return reduceAccessor(median);
	case "variance": return reduceAccessor(variance);
	case "mode": return reduceAccessor(mode);
	case "x1": return reduceX1;
	case "x2": return reduceX2;
	case "y1": return reduceY1;
	case "y2": return reduceY2;
	}
	throw new Error("invalid reduce");
	}