Skip to content

Add quiver trace type for vector field visualization#7710

Open
degzhaus wants to merge 26 commits intoplotly:masterfrom
degzhaus:degzhaus/add_quiver
Open

Add quiver trace type for vector field visualization#7710
degzhaus wants to merge 26 commits intoplotly:masterfrom
degzhaus:degzhaus/add_quiver

Conversation

@degzhaus
Copy link

@degzhaus degzhaus commented Feb 16, 2026

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

Basic quiver plot

With Colorscale

Quiver with Viridis 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 degzhaus changed the title Degzhaus/add quiver Add quiver trace type for vector field visualization Feb 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant