observablehq / observablehq/plot
Programmatically assigning/clearing the pointer (tip) value
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 5.4k
- Forks
- 244
- PR merge metrics
- No merged PRs in 30d
Description
I have a set of plots (effectively small multiples) but they are generated with separate instances of Plot.plot. These plots have a tip, and I would like to ensure that at most one tip is visible at a time across plots. Since Plot tracks the tip state within each rendered plot separately, if I do nothing then I can click on each plot to make the tip sticky, and end up with many simultaneously visible tips. This is especially noticeable on mobile when it often occurs unintentionally (because tips are effectively sticky by default and are hard to clear).
I can clear the tip programmatically like so:
plot.dispatchEvent(new PointerEvent("pointerdown", {pointerType: "mouse", bubbles: true}));
But, I thought it would be nicer if there were a more discoverable and supported API. Here are a few possibilities I’m considering.
1. Assigning plot.value
plot.value = null;
This would be symmetric to getting the pointed value, which is appealing. But I think it’s too ambiguous for setting it: you’d need to set it to the exact datum, which wouldn’t work in many cases when the data is not unique. Plus you could have multiple marks with pointer interactions — maybe you want to control them independently, or at least maybe they each need different hints to know what should be pointed.
2. A mark.point method
mark.point(value);
mark.pointIndex(index); // or if an index is preferred
If a mark has the pointer interaction applied, a mark.point method is assigned to the mark, allowing the pointed value to be controlled programmatically. Assigning a new value re-renders the mark (via the render transform) and re-assigns plot.value, but does not emit an input event or re-render other marks. In cases where it is awkward to specify the pointed value by data, mark.pointIndex(index) can be used to specify the index of the pointed data. mark.point(value) is a convenience method for mark.pointIndex(data.indexOf(value)).
When using the tip option, it could be mark.tip.point(value) for the same effect.
This approach requires retaining a reference to the mark with the pointer interaction applied (or equivalently the mark with the tip applied), but that should be reasonable. I suppose we could also have plot.point that points at all pointer’d marks, too.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the existing pointer and tip interaction behavior, including how each Plot instance tracks its tip state and exposes the pointed value. Compare the proposed plot.value, mark.point/pointIndex, and mark.tip.point APIs; done means selecting a supported API that can assign or clear pointers across separate plots without ambiguous data selection.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100