observablehq / observablehq/plot
An interactive tip “wobbles” when in a fixed position.
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 5.4k
- Forks
- 244
- PR merge metrics
- No merged PRs in 30d
Description
The tip’s contour is based on the contents' actual bounding box width. When using it interactively with a pointer, the contents’ width tends to change all the time, by a few pixels.
When the tip’s position follows the mouse, this is not a problem, but when it is fixed, it makes the tip’s left and right sides “wobble”, which is distracting.
The following ideas didn't work:
- when the tip’s width shrinks by a small amount, we keep the older width. Alas, this would require to add state to keep track of the width.
- we introduce a minWidth option to the tip mark (#1573). Alas, it creates a bit of confusion with the lineWidth (text clipping) option, which is in approximate ems, and would require the user to do awkward conversions.
We could try to make numbers and dates use fontVariant: tabular-nums, to alleviate this at least a little?
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 locating the interactive tip mark and the code that derives its contour from the contents’ bounding box. Reproduce the behavior with a fixed-position tip and changing numeric or date content; done means the tip’s left and right sides remain stable without introducing the rejected minWidth or state-based approaches.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- d3
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100