Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Add quiver trace type for vector field visualization#7584

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Open
degzhaus wants to merge15 commits intoplotly:master
base:master
Choose a base branch
Loading
fromdegzhaus:degzhaus/add_scatterquiver

Conversation

@degzhaus
Copy link

@degzhausdegzhaus commentedOct 14, 2025
edited
Loading

Overview

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

Features

  • Vector positioning: Arrows placed atx,y coordinates with direction/magnitude fromu,v components
  • Sizing modes:scaled (normalized),absolute, orraw vector lengths viasizemode/sizeref
  • Arrow anchoring: Position arrows bytail,tip, orcenter/cm/middle
  • Colorscale support: Color arrows by magnitude or custom scalar field (c array)
  • Styling: Configurable line color, width, dash patterns vialine.* attributes
  • Arrowhead sizing: Adjustable arrowhead size viaarrowsize
  • Full interactivity: Hover support with customizablehovertemplate, point selection
  • Animation support: Animatablex,y,u,v, andc 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 fromplotly.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

disberd and gpdf reacted with heart emoji
@degzhausdegzhausforce-pushed thedegzhaus/add_scatterquiver branch 4 times, most recently fromdfd3c81 to9463b3fCompareOctober 19, 2025 21:12
@degzhaus
Copy link
Author

degzhaus commentedOct 19, 2025
edited
Loading

Hello, I am new to this project and attempting to contribute my first PR.

Unfortunately, I am struggling to get the build to pass. Specifically, thepublish-dist-node-v22 step:
https://app.circleci.com/pipelines/github/plotly/plotly.js/12658/workflows/ae5271e7-9971-4db1-a713-b42f0625901f/jobs/282198

I tried runningnpm run schema and pushing the change here:
9463b3f

But still encountering the issue.

Any insight would be greatly appreciated. Thank you!

Edit: tagging a few recent commiters for visibility, thanks so much! (cc@camdecoster@alexshoe@emilykl)

@emilykl
Copy link
Contributor

emilykl commentedOct 20, 2025
edited
Loading

Hi@degzhaus, thank you for working on this contribution!

As it stands currently, the devtools dashboard needs to be running in order fornpm run schema to work properly. So you should runnpm start and leave it running, and then in another terminal runnpm run schema. (@camdecoster is working on a PR to eliminate that step, see#7589)

You can also downloadplot-schema.json from the "Artifacts" tab in CircleCI and commit it.

@degzhausdegzhausforce-pushed thedegzhaus/add_scatterquiver branch 18 times, most recently fromb07de7b toa32678dCompareOctober 22, 2025 03:33
@degzhaus
Copy link
Author

degzhaus commentedOct 22, 2025
edited
Loading

Hi@degzhaus, thank you for working on this contribution!

As it stands currently, the devtools dashboard needs to be running in order fornpm run schema to work properly. So you should runnpm start and leave it running, and then in another terminal runnpm run schema. (@camdecoster is working on a PR to eliminate that step, see#7589)

You can also downloadplot-schema.json from the "Artifacts" tab in CircleCI and commit it.

Thank you so much,@emilykl! That was very helpful and unblocked me.

Unfortunately, I have been struggling with theno-gl-jasmine test in ci:
https://app.circleci.com/pipelines/github/plotly/plotly.js/12700/workflows/8b80de4d-1bad-455d-baef-72bc47c31042/jobs/283463

If you have any insight, I would greatly appreciate it. Thanks again!

Edit:@emilykl i figured it out! Pardon my flailing at last night. So exciting! I have a couple of tests to add and this will be ready for review.

Thanks again for your insights and help!

@degzhausdegzhausforce-pushed thedegzhaus/add_scatterquiver branch 2 times, most recently from64cf31d to02c37f5CompareOctober 22, 2025 15:56
@emilykl
Copy link
Contributor

@degzhaus Great news, glad you're unblocked! Thank you for your work on this. Quiver is a plot type we've gotten a lot of requests for.

A few high-level comments on the API:

  • This trace type is fairly distinct from existingscatter* trace types; let's go with the namequiver instead.

  • The most similar already-existing trace type isthe 3dcone trace, so the attributes ofquiver should match the existing API ofcone as closely as possible for consistency. For example, rather than thescale property it should usesizemode andsizeref as the cone trace does. (Obviously, some attributes likez andw are not relevant in a 2d context).

  • Any attributes for configuring the size/scale of the arrowhead should match thearrowhead config options for annotations

    • It's also notnecessary to include those options in a first version of this trace type, but any attributes thatare added should be consistent with what's already in the library
  • There's a few other things I noticed in the attributes as well:

    • Thescaleratio attribute doesn't belong; the scale ratio between the axes should be a property of the axes themselves, not the trace. The axis scale ratio can already be configured using the existingaxis.scaleratio attribute.
    • It's unclear to me how theangle attribute interacts withu andv, sinceu andv are already sufficient to fully determine the arrow's angle. Theangle attribute should probably be removed.

@degzhaus
Copy link
Author

@degzhaus Great news, glad you're unblocked! Thank you for your work on this. Quiver is a plot type we've gotten a lot of requests for.

A few high-level comments on the API:

  • This trace type is fairly distinct from existingscatter* trace types; let's go with the namequiver instead.

  • The most similar already-existing trace type isthe 3dcone trace, so the attributes ofquiver should match the existing API ofcone as closely as possible for consistency. For example, rather than thescale property it should usesizemode andsizeref as the cone trace does. (Obviously, some attributes likez andw are not relevant in a 2d context).

  • Any attributes for configuring the size/scale of the arrowhead should match thearrowhead config options for annotations

    • It's also notnecessary to include those options in a first version of this trace type, but any attributes thatare added should be consistent with what's already in the library
  • There's a few other things I noticed in the attributes as well:

    • Thescaleratio attribute doesn't belong; the scale ratio between the axes should be a property of the axes themselves, not the trace. The axis scale ratio can already be configured using the existingaxis.scaleratio attribute.
    • It's unclear to me how theangle attribute interacts withu andv, sinceu andv are already sufficient to fully determine the arrow's angle. Theangle attribute should probably be removed.

Amazing, thank you so much for taking a look and providing great guidance, Emily! Looking forward to spinning a cycle on this feedback.

@emilykl
Copy link
Contributor

@degzhaus One more comment — it would be great to include colorscale attributes inquiver so that arrows can be colored according to the magnitude of the vector. These attributes are added to the cone tracehere; something similar can be done for the quiver trace. And then obviously those attributes need to be referenced in the plotting code to assign the appropriate color.

@degzhausdegzhausforce-pushed thedegzhaus/add_scatterquiver branch 3 times, most recently fromfeea298 tof3ae9e2CompareNovember 19, 2025 05:23
@degzhausdegzhausforce-pushed thedegzhaus/add_scatterquiver branch from60ca5c5 toa008dabCompareNovember 30, 2025 00:54
@degzhaus
Copy link
Author

Pardon the delay,@emilykl, i was finally able to make time to clean this up. I removed some of my recent comments/questions because they were noise around me understanding how to work with thetests/images, but i was able to figure it out.

Thanks again for all your help with this PR! Excited for next steps.

@emilykl
Copy link
Contributor

Hi@degzhaus ! I'm aiming to give this another review by the end of the week. Sorry for the delay in getting back to you — looking forward to it! Thanks for your work so far.

degzhaus reacted with heart emoji

@degzhausdegzhausforce-pushed thedegzhaus/add_scatterquiver branch from60d1da9 toa8f8381CompareDecember 18, 2025 21:20
@gpdf
Copy link

Thank you for this idea,@gpdf ! Added here:

That's great, thank you!

@degzhausdegzhausforce-pushed thedegzhaus/add_scatterquiver branch 2 times, most recently from69947b2 tob93b445CompareDecember 18, 2025 23:10
@gpdf
Copy link

Perhaps for future readers' clarity of understanding,@degzhaus , you could edit the description at the top of the PR to say:

scatterquiverquiver

in the two places it appears, so that the as-merged plot type appears there.

@degzhausdegzhausforce-pushed thedegzhaus/add_scatterquiver branch fromb93b445 to0252e03CompareDecember 19, 2025 01:07
@degzhaus
Copy link
Author

Perhaps for future readers' clarity of understanding,@degzhaus , you could edit the description at the top of the PR to say:

scatterquiverquiver

in the two places it appears, so that the as-merged plot type appears there.

Great catch, thank you so much,@gpdf !

Updated per your recommendation, and did a little review/revision based on changes made during the review process as well.

gpdf reacted with thumbs up emoji

@degzhaus
Copy link
Author

Hi@degzhaus ! I'm aiming to give this another review by the end of the week. Sorry for the delay in getting back to you — looking forward to it! Thanks for your work so far.

Hey there,@emilykl, hope you're having a wonderful week!

I rebased, cleaned up some code, and added some tests here:
0252e03

Thanks again for everything!

@gpdf
Copy link

I really appreciate all the effort in polishing, and very much look forward to using this.

degzhaus reacted with heart emoji

Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment

Reviewers

1 more reviewer

@gpdfgpdfgpdf left review comments

Reviewers whose approvals may not affect merge requirements

At least 1 approving review is required to merge this pull request.

Assignees

@emilyklemilykl

Labels

communitycommunity contributionfeaturesomething newP2considered for next cycle

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@degzhaus@emilykl@gpdf@gvwilson

[8]ページ先頭

©2009-2025 Movatter.jp