Add quiver trace type for vector field visualization

[degzhaus]

Overview

This PR adds a new quiver trace type to Plotly.js for visualizing 2D vector fields using arrows.

Continuation of #7584

Features

• Vector positioning: Arrows placed at x, y coordinates with direction/magnitude from u, v components
• Sizing modes: scaled (normalized), absolute, or raw vector lengths via sizemode/sizeref
• Arrow anchoring: Position arrows by tail, tip, or center/cm/middle
• Colorscale support: Color arrows by magnitude or custom scalar field (c array)
• Styling: Configurable line color, width, dash patterns via line.* attributes
• Arrowhead sizing: Adjustable arrowhead size via arrowsize
• Full interactivity: Hover support with customizable hovertemplate, point selection
• Animation support: Animatable x, y, u, v, and c arrays

API

Plotly.newPlot('div', [{
  type: 'quiver',
  x: [0, 1, 2],
  y: [0, 1, 2],
  u: [1, 0, -1],  // x-component of vectors
  v: [0, 1, 0],   // y-component of vectors
  sizemode: 'scaled',  // 'scaled' | 'absolute' | 'raw'
  sizeref: 0.5,
  anchor: 'tail',  // 'tail' | 'tip' | 'center'
  colorscale: 'Viridis',
  line: { width: 2 }
}]);

Screenshots

Examples taken from plotly.com/python/quiver-plots

Gist with example code

Basic Quiver Plot

With Colorscale

Testing

• ✅ Jasmine unit tests
• ✅ 9 visual regression test mocks

Files Changed

New files (src/traces/quiver/)

• index.js - Trace module definition
• attributes.js - Attribute schema
• defaults.js - Default value handling
• calc.js - Data calculation
• plot.js - SVG rendering
• style.js - Styling
• hover.js - Hover behavior
• select_points.js - Selection support
• event_data.js - Event data formatting
• format_labels.js - Label formatting

Modified

• lib/index.js & lib/index-strict.js - Build integration

Tests

• test/jasmine/tests/quiver_test.js - Unit tests
• test/image/mocks/quiver_*.json - 9 mock files
• test/image/baselines/quiver_*.png - Baseline images

[degzhaus]

Thanks again for the great comments, @emilykl !

I will attempt to reference commits inline from this comment here:
#7584 (comment)

-- Bug Fixes --

"The axis ranges don't automatically adjust to include the full length of the arrows" fixed here:
96845a8

"Colorscale seems broken in the latest version" fixed here:
3cd525c

"Legends are missing icons" fixed here:
6a37260

"selected and unselected styling options" fixed here:
96bb82c

"The text property also seems broken in the latest iteration" fixed here:
69516db

"Display of colorbars does not seem to work" fixed here:
b19cce2

-- API Refinements --

"c should become marker.color" fixed here:
3cd525c

"The line options should be nested under marker.line",
"Move arrowheadsize under marker so that it becomes marker.arrowheadsize",
"No need for duplicate arrowwidth property",
"arrow_scale should be removed as well" all fixed here:
c7f073d

[degzhaus]

Here are the followups for the remaining 3 comments from: #7584, @emilykl :

"Could we plausibly reuse the src/traces/scatter/select.js selectPoints() function" fixed here:
4f91255

"Should probably call the hasColorscale() function here" fixed here:
82e6bc1

"Can you look into whether we can/should use the handleXYDefaults() function here" fixed here:
7135b52

[degzhaus]

Alrighty, @emilykl , thanks again for your great feedback and patience as I addressed it!

I have pushed all my fixes and tested locally, I think we're close 🤞

[emilykl]

Great news @degzhaus ! Thank you for the continued work and the clear summary. I will try to take another look within the next week. Feel free to ping me next Tuesday if I haven't gotten back to you by then.

[degzhaus]

hey there, @emilykl, hope you are having a great start to the week!

i just rebased and pushed again 🥳

[camdecoster]

@degzhaus would you be able to merge/rebase one more time? Sorry for the extra work. We just changed how our test images are generated and that led to the baseline conflicts with this branch.

[emilykl]

Hi @degzhaus ! I've run down the list of issues from my previous review, and most seem to be fixed 🥳 However I am still seeing these two issues:

• The axis ranges don't automatically adjust to include the full length of the arrows. See example here. By default if no axis range is specified in the layout, the entirety of all arrows should be visible.

The baseline images quiver_anchor.png, quiver_arrow-styling.png, quiver_sizemode.png, and quiver_zero-vectors.png show cut-off arrows.

• Colorscale seems broken in the latest version, unless I'm missing something. The arrows in quiver_colorscale.png and quiver_custom-colorscale.png seem to be all the same color.

The baseline images in quiver_colorscale.png and quiver_custom-colorscale.png are still all the same color. Also the quiver_colorscale should provide a value for marker.color; otherwise the arrows will not display a colorscale even if there was no bug.

I'm still doing a bit more testing so I will leave another comment if I find anything else. @camdecoster is taking a look as well, so keep an eye out for his comments.

Finally when you have a chance please merge/rebase against the master branch! We recently overhauled the CI pipeline and you will need to merge/rebase in order to run the new pipeline.

[camdecoster]

Could you please remove 'cm' and 'center' as values? One term for the middle should be fine.

[camdecoster]

Did you mean to pasate baseAttrs on top of attrs? I think it would be safer to handle it this way. That's what is typically done when building attributes.

Suggested change

	extendFlat(attrs, baseAttrs);
	attrs = extendFlat({}, baseAttrs, attrs);

[camdecoster]

If marker.color is an array, lineColor will be undefined. This would result in the unselected color being undefined as well. Could you update the code to handle this situation and apply a dim version (via opacity) of the selected color?

[camdecoster]

Could you add a guard (here or elsewhere) that handles if normMin and normMax are infinite? This is an edge case that would require all invalid data, but we should guard against it.

[camdecoster]

Could you delete these unused imports?