Getting transformed data values from a Plot

[mkfreeman]

More details in this notebook.

Is there a good way to get the transformed data value(s) from a Plot?

I want to append an element onto a chart following a click event. Because a Plot exposes the data value (.value) 🙏 based on the last hovered element, it makes sense that we can use the plot's scales to compute the correct point to draw a mark on the chart.

A simple click event like this works well enough:

clickEvent = (plotObject, value, columns) => {
  // Get the scales
  const xScale = plotObject.scale("x");
  const yScale = plotObject.scale("y");

  // Create circle
  const circle = document.createElementNS(
    "http://www.w3.org/2000/svg",
    "circle"
  );

  // Position it using the scales
  circle.setAttribute(
    "cx",
    xScale.apply(value[columns.x]) + xScale.bandwidth / 2
  );
  circle.setAttribute("cy", yScale.apply(value[columns.y]));
  circle.setAttribute("r", 5);
  circle.setAttribute("fill", "red");

  // Append
  plotObject.appendChild(circle);
}

But for a stacked chart, the transformed values aren't exposed, so the y value will simply be the value in the input data. Based on this notebook, we can compute the transformed values if we explicitly define the transforms:

// Renamed the `spot` function from https://observablehq.com/@enjalot/plot-spot
getTransformed = (
  data = [],
  { transform, ...channels },
  facets = [Uint32Array.from(data, (d, i) => i)]
) => {
  if (transform !== undefined) {
    ({ data, facets } = transform(data, facets));
  }
  return {
    data,
    facets,
    ...Object.fromEntries(
      Object.entries(channels).map(([name, value]) => [
        name,
        Plot.valueof(data, value)
      ])
    )
  };
}

However, we then need to identify the hovered value in the transformed data, as the Plot's .value doesn't maintain the data index. Something like:

// For finding the element in the transformed data
findTransformedIndex = (value, transformedData) =>
  transformedData.findIndex((d) =>
    Object.keys(value).every((key) => d[key] === value[key])
  )

Putting that all together looks something like this:

rect.addEventListener("pointerdown", (event) => {
      // Explicitly transform the data
      const transformed = getTransformed(
        tidy,
        Plot.stackY({
          x: "state",
          y: "population",
          fill: "age"
        })
      );

      // Find the value
      const index = findTransformedIndex(chart.value, transformed.data);
      const hoverValue = { ...chart.value, y: transformed.y2[index] };

      // Call the custom click event handler
      clickEvent(chart, hoverValue, { x: "state", y: "y" });
    });

So, all of this is to say, is there a simpler/clearer/more-reliable way to retrieve the stacked values from a Plot?

[Fil]

Here's what I'd try:

Plot.plot({
  y: { tickFormat: "s" },
  marks: [
    Plot.barY(tidy, {
      x: "state",
      y: "population",
      fill: "age",
      sort: { x: "y", reverse: true },
      render(index, scales, values, dimensions, context, next) {
        const g = next(index, scales, values, dimensions, context);
        g.addEventListener("pointerdown", (event) => {
          const i = event.target.__data__;
          d3.select(context.ownerSVGElement)
            .append("circle")
            .attr("r", 5)
            .attr("fill", "red")
            .attr("cx", values.x[i] + scales.scales.x.bandwidth / 2)
            .attr("cy", values.y2[i]);
        });
        return g;
      }
      //tip: true
    })
  ],
  width
})

[mkfreeman]

@Fil thanks for pointing me in the right direction!

[mkfreeman]

@Fil any chance you know why you need to click twice on a pointer-transformed element to get the event listener to fire 😅 ? https://observablehq.com/d/2b8dd9674553809d

[mkfreeman]

I just read to the bottom of that issue and got to my own comment 😭

[Fil]

it seems clicking on a pointer-created mark is the best generalizable pattern

Show me? I feel the exact opposite :) Clicking on the chart has a huge advantage, namely you have just one stable event listener — whereas clicking on a pointer created mark means you're constantly creating new event listeners (which are too late to capture the current event). Better listen on the chart, and then determine the subject, either in SVG (using event.target to see what element was actually clicked on — in the code I shared they are invisible tall bars), or in javascript (using quadtree.find, to support imprecise clicks and overlapping shapes).

[mkfreeman]

Haha, I'd love to use a single event listener. I'll rephrase to say that the best approach I have managed to implement is an event on a pointer-created mark 😭 . As I've moved through this the past few days, the user-experience I want to create is:

• Display a clickable mark on a pointer event (e.g., a dot-mark, though could also be a custom SVG, which I imagine the image mark support)
• When the user clicks that mark, emit an event that has the transformed data associated with the mark

This is for supporting specified user interactions when they explicitly click on the pointer-generated element (not just anywhere on the chart). And of course, it needs to work on different chart types, so we need to capture stacked values like y2, and can't rely on invisible bars.

Do you have an example of using quadtree.find to identify the element that was interacted with? Is there a way to get the transformed data associated with the pointer generated mark?

Edit - sorry for dragging you into a messy / evolving question. Will look into those approaches tomorrow but wanted to reply before the running out the door!

[Fil]

If by transformed data you mean the scaled channels (x, y1, y2 in pixels), then yes they are available as values.x etc in the render function. But I've sent you a suggestion where we don't even need to access these values to put the mark at the correct place. All the work's done by Plot, we just have to reveal it progressively when users click.

[mkfreeman]

@Fil wow, thank you 🙏 - I wouldn't have didn't come up with either of those approaches, both of which support click interactions on elements that are dynamically revealed / created.

I'll experiment with them both and hopefully not bother you any further 😭 .