plotly / plotly/plotly.js

[BUG]: Automargin for quiver plots is a little off with `arrowref: 'paper'`

Open
#7,979 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug P2 plotly-internal size: 3
Dominant language
JavaScript
Stars
18.3k
Forks
2k
Avg merge
2d 12h
Merged PRs (30d)
28

Description

Desired behavior

Quiver automargin should always result in an initial plot area which contains all arrow endpoints.

Current behavior

The current quiver implementation calculates the arrow endpoints assuming arrowref: 'data', uses those endpoints to compute the automargin extents, and then if arrowref is 'paper'`, applies an adjustment factor to the arrow endpoints.

If the x:y aspect ratio of the data is pretty close to 1:1, this works OK because the arrow endpoints don't change much. But if the aspect ratio of the data is very far from 1:1, this can result in an initial plot where the arrow endpoints extend outside of the plotted area.

Example
Figure definition:
{
  "data": [
    {
      "type": "quiver",
      "uhoverformat": ".3f",
      "yhoverformat": ".3f",
      "xhoverfomrat": ".3f",
      "vhoverformat": ".3f",
      "x": [0],
      "y": [0],
      "u": [1],
      "v": [0.1],
      "arrowref": "paper"
    }
  ],
  "layout": {
    "width": 800,
    "height": 600,
    "showlegend": false
  }
}

Screenshot:

Image

Notice how the tip of the arrow extends off the right side of the plot.

Fix

The relevant logic is around lines 200-206 in src/traces/quiver/calc.js.

It's a bit of a chicken-and-egg problem, because when arrowref is 'paper', the data position of the arrow endpoints depends on the axis scales, which depend on the position of the arrow endpoints. I think there is probably an algebraic solution but haven't quite been able to figure it out. Alternatively there's probably an iterative or approximate approach we could apply here that would still be an improvement over the current behavior.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in src/traces/quiver/calc.js around lines 200-206 and reproduce the supplied quiver figure with arrowref set to paper. Trace how arrow endpoints and automargin extents are calculated relative to the axis scales. Done means the initial plot area contains all arrow endpoints, including when the data aspect ratio differs substantially from 1:1.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.