Linked pointers

[yurivish]

Edit: Here's a notebook with a simplified demo of the question below

I've been experimenting with using multiple "coordinated" pointers for more complex hover scenarios like this one:

Without hover:

With hover:

It's really wonderful to have interactivity right in Plot, and the decoupling of interactions from specific marks like the tip has opened up the potential for lots of very exciting possibilities.

I did notice an issue with one kind of more complex use case, though, and wanted to ask – it's something that comes up when hovering in the region where the green curve exists, but the pink one doesn't – in that case, it is possible for the individual pointers to become uncoordinated, leading to scenarios like the following:

This happens because there is a background rect in each x-column, but the filled circles, arrow, and text marks only appear in those x-columns where the pink and green lines both exist. Since the green line extends beyond the pink, the nearest rect is the one for that column, but the nearest arrow/circles/text are from the column next to it.

I initially tried controlling this with the radius option, but I think that one operates in screen space, rather than data space, so it is trickier to compute it to prevent this issue since I think it would require inverting the x scale (accounting for margins, etc.).

Since the pointer transforms wrap the options object of an individual mark, I haven't been able to see a way to wrap up multiple marks in a single pointer interaction and I'm curious about whether there's an alternative approach that would allow this kind of composite interaction, where either all or none of the pointers are shown at any given time.

[Fil]

In the simpler example you could do

Plot.dot(d3.range(15), Plot.pointerX({ x: (d) => d, fill: "red", r: 5, opacity: d => d < 5 ? 1 : 0 })),

but I'm not sure it addresses the general concern.

[Fil]

Here's another technique: https://observablehq.com/@fil/complex-tip-with-missing-values-1795
I wasn't sure what the gray band represents for you; I made it as a ruleX with a fat strokeWidth.

[mbostock]

And if you want to do an interval in data space instead of a fixed stroke width you could something like:

    Plot.rectX(
      series,
      Plot.pointerX(
        {
          x1: (d) => Math.floor(d.time) - 0.5,
          x2: (d) => Math.floor(d.time) + 0.5,
          fill: "#eee"
        }
      )
    ),

Or, a fancier version using a rounding interval:

      Plot.rect(
        series,
        Plot.pointerX({
          x: "time",
          interval: {
            floor: (x) => Math.floor(x) - 0.5,
            offset: (x) => x + 1
          },
          fill: "#eee"
        })
      ),

[yurivish]

Here's another technique: https://observablehq.com/@fil/complex-tip-with-missing-values-1795

Oh, that's very interesting, thanks for the suggestion! Will ponder it and try using that approach. And thanks for the reminder about markers – I think I read about them when Plot first added support, but it hasn't become part of my usual toolkit yet.

I wasn't sure what the gray band represents for you; I made it as a ruleX with a fat strokeWidth.

In this case, the data represents the results of a load test, where each sample is a (QPS, tail latency) pair. The QPS values are binned, so eg. we have samples for 20k, 40k, 60k, ..., so while the underlying axis is continuous our data is discrete. I was using the grey bands to illustrate the QPS range represented by each sample, eg. [10, 30), [30, 50), [50, 70). I will try out Mike's suggestion using intervals for this (thank you for suggesting it!)