Reuse channel values in a text mark after a transformation

[ltostes]

Hello! I'm using the group transformation to build bar marks, but I'd like to reuse the same transformation to show the resulting values within a text mark above the bar. What is the best way to do this?

I understand I can rebuild the calculations directly in the data, but I wonder if there's any better alternative using the object resulting from Plot.groupX.

Here's the example code I built:

{
  const xy = {
    x: "species",
    y: "body_mass_g"
  };

  const xy_group = Plot.groupX({ y: "mean" }, xy);

  return Plot.plot({
    marks: [
      Plot.barY(penguins, {
        ...xy_group,
        stroke: "navy"
      }),
      Plot.text(penguins, {
        ...xy_group,
        lineAnchor: "bottom",
        dy: -5,
        text: (v) => d3.mean(v, (d) => d[xy.y]) // I would expect to somehow reuse xy_group here
      })
    ]
  });
}

also availabe in this notebook

[Fil]

const xy = {
    x: "species",
    y: "body_mass_g",
    text: "body_mass_g" // add text
  };

  const xy_group = Plot.groupX({ y: "mean", text: "mean" }, xy); // add text reducer

It does the computation once for each channel, but it should work. (Note: your notebook is currently private.)

[ltostes]

Thanks! That works well for the example I shared, but I'm wondering if there's anyway I can still use it within an accessor function to allow more flexibility (e.g. formatting a number, adding extra text or conditioning colors based on threshold).

Updated example:

{
  const xy = {
    x: "species",
    y: "body_mass_g"
  };

  const numformat = d3.format(".0f");

  const xy_group = Plot.groupX({ y: "mean" }, xy);

  return Plot.plot({
    marks: [
      Plot.barY(penguins, {
        ...xy_group,
        stroke: "navy"
      }),
      Plot.text(penguins, {
        ...xy_group,
        lineAnchor: "bottom",
        dy: -5,
        text: (v) => `Mean: ${numformat(d3.mean(v, (d) => d[xy.y]))}` // I would expect to somehow reuse xy_group here
      })
    ]
  });
}

PS: I made the notebook public, and added this update

[Fil]

Yes; here's how it would work:

{
  const numformat = d3.format(".0f");
  const options = Plot.groupX(
    { y: "mean", text: (v) => `Mean: ${numformat(d3.mean(v))}` }, // reducers
    { x: "species", y: "body_mass_g", text: "body_mass_g" }
  );

  return Plot.plot({
    marks: [
      Plot.barY(penguins, {
        ...options,
        stroke: "navy"
      }),
      Plot.text(penguins, {
        ...options,
        lineAnchor: "bottom",
        dy: -5
      })
    ]
  });
}

The text reducer is applied for each series (here, penguins) on the text channel. Note that your current code computes a mean for every penguin, only to retain the first for each series.

[ltostes]

Thank you! Using a custom reducer function seems like the approach I was looking for.

Although I didn't understand why my code would be computing a mean for every penguin and not one per species group, can you explain a bit further?

When I adapt my function to console logging the array it only logs 3 occurrences (1 per species type), so how come it is computing for every penguin?

Adapted function:

text: (v) => {
          console.log("Array: ", v);
          return `Mean: ${numformat(d3.mean(v, (d) => d[xy.y]))}`;
        }

Console output:

[Fil]

Oh you're correct, sorry for that! I misread the code.

[ltostes]

If I may, I have a follow up question: (let me know if it's best to create a new discussion and I'll move it there)

Let's say I want to also include a mean of means line and label in the graph, by using a ruleY mark again together with a text mark. My initial thought would be to use a transformation groupZ on top of the first one, to calculate the mean on top of the means output by groupX.

Reusing your example code, placing a reducer on top of the first reducer's output works perfectly for the ruleY mark, but not for the text mark as the outcome of the first reducer is a text and not the actual mean value. One possible way of solving this is going back to the first solution I proposed (but then I'd have to code both the original mean and the mean of means within the accessor function, which is not ideal)

As an ideal solution I would expect some kind of option where I could specify a function to run on top of the reducer's output (it could be used for both means and mean of means).
Another way I'd imagine it would be to use the Y channel's reduce output as input for the text option instead of the original text channel itself.

Do you see any better solutions for this case?

Here's the code adapted from your suggestion, but unsolved: (I also updated the notebook with this solution)

{
  const numformat = d3.format(".0f");
  const text_paint = (result) => `Mean: ${numformat(result)}`;
  const options = Plot.groupX(
    { y: "mean", text: "mean" }, //(v) => `Mean: ${numformat(d3.mean(v))}` },
    { x: "species", y: "body_mass_g", text: "body_mass_g" }
  );

  return Plot.plot({
    marks: [
      Plot.barY(penguins, {
        ...options,
        stroke: "navy"
      }),
      Plot.text(penguins, {
        ...options,
        lineAnchor: "bottom",
        dy: -5
        // Here I would expect to be able to use the text_paint function
      }),
      // Mean of means marks
      Plot.ruleY(penguins, {
        ...Plot.groupZ(
          {
            y: "mean"
          },
          options
        ),
        x: null
      }),
      Plot.text(penguins, {
        ...Plot.groupZ(
          {
            y: "mean",
            text: (v) => text_paint(d3.mean(v))
          },
          options
        ),
        x: null,
        lineAnchor: "bottom",
        dy: -5
      })
    ]
  });
}

[Fil]

It's a bit unusual to display the mean of means as you're doing with groupZ(groupX( )), instead of the overall mean you'd get with a single groupZ(). But why not.

To change a number into a formatted text, you can wrap your options with the map transform, like so:

Plot.text(penguins, Plot.map({text: v => v.map(text_paint)}, {
        ...Plot.groupZ(
          {
            y: "mean",
            text: "mean"
          }, ...