Custom tooltip label with stacked chart

[mkfreeman]

Moved from https://talk.observablehq.com/t/custom-tooltip-label-with-stacked-chart/9874.

In this notebook, I'm using an offset: normalize stack transform to create a stacked bar chart. I want to have a tooltip that displays the specific label "Percent: ##", but without changing the underlying data, I can't figure out how to customize the label.

// Current approach
channels: {
        customY: {
          label: "Percent",
          value: (d) => {
            // The value of d has the data values before normalization
            return d.population;
          }
        }
      },
      tip: {
        // Display custom values, hide the auto generated values
        format: {
          customY: true,
          test: (d) => d.population, // doesn't do anything
          y: true,
          x: true,
          fill: true
        }
      }

Seems similar to this topic.

Any thoughts?

EDITS:

I was able to get the label by changing the data (but that seems somewhat undesireable as a practice):

 Plot.tip(
     // Change the data
      tidy.map((d) => {
        d.percent = d.population;
        return d;
      }),
      {
        ...Plot.pointer(
          Plot.stackY({
            x: "state",
            y: "percent",
            fill: "age",
            sort: { color: null, x: "-y" },
            offset: "normalize"
          })
        )
      }
    )

@Fil Had suggested an offset rather than a stack normalize, though that didn't update the label associated with the percentage:

Plot.barY(
  tidy,
  Plot.normalizeY("sum", {
    x: "state",
    y: "population",
    z: "state", // the series for normalizeY
    fill: "age",
    sort: { color: null, x: "-y" },
    offset: "normalize", // stack normalization (based on *x*)
    tip: {
      channels: {
        population: { value: "population", label: "abs population" }
      }
    }
  })
).plot({ y: { percent: true } })

[Fil]

"offset" is part of the stacking procedure. My remark is that we can't read the normalized values from it (because they are y1 and y2, and what we want is their differences. Instead, we explicitly use a normalizeY transform, with a z to define the series to be normalized.

But now I see that this cancels the sorting by y sort: { color: null, x: "-y" }, which we want to apply on the absolute populations.

Can you indicate what you're expecting to see in terms of labels?

[mkfreeman]

Thanks @Fil - sorry for any confusion. My objective is to customize the label associated with the stacked and normalized y value. In the screenshot below, I'd like to change the label for "population".

I thought that by doing the following I could change that label:

channels: {
        customY: {
          label: "Percent",
          value: "population"
        }
      },
      tip: {
        // Display custom values, hide the auto generated values
        format: {
          customY: true
        }
      }

However, the value associated with my custom label Percent is not the normalized percentage. You can see the example in this cell

[Fil]

In my example code it works:

Plot.barY(
  tidy,
  Plot.normalizeY("sum", {
    x: "state",
    y: "population",
    z: "state", // the series for normalizeY
    fill: "age",
    sort: { color: null, x: "-y" },
    offset: "normalize", // stack normalization (based on *x*)
    tip: {
      channels: {
        population: { value: "population", label: "Absolute population" } // 👈
      }
    }
  })
).plot({ y: { label: "Relative population (%)", percent: true } })  // 👈

[mkfreeman]

I think I was spinning too long on this one, I can see that by assigning the {y: label:....} that you can customize the label for the axis (simpler than creating a new channel!). And helpful to see how to do both 🙏