Quiver Plots Preview (New!)

Hey everyone - Plotly.js 4.0.0 right around the corner and it features a brand new trace type: quiver plots!

We’ve long had workarounds for creating these plots and we’re excited to finally have this be a first-class trace type.

Also known as vector plots, quiver plots show a series of arrows to visualize vector fields. Each “point” has (x, y) (it’s position) as well as (u, v) (the relative position of its arrow). Here’s the simplest one:

{
  "x": [0], "y", [0], "u": [1], "v": [2]
}

(All of these examples are taken from my personal blog: A Field Guide to Quiver · Chris Parmer)

The interpretation is often that longer “arrows” (vectors!) represent “larger” forces and smaller arrows represent “smaller” forces. Coloring the arrows by their magnitude is also a nice way to get the point across.

The most relatable vector plots are wind & currents. Here’s the currents on coast of California:

and wind in Florida:

Our world is full of various forces and things in motion. Electromagnetic is another classic example:

and fluid dynamics on a smaller scale, like airfoil lift and aerodynamics:

They’re useful in mathematics for visualizing parameterized plots (visualizing systems that evolve over time), like the now-famous gradient descent algorithms:

and developing an intuition about dynamical systems and steady state points and local minima/maxima:

But at the end of the day, they’re arrows. If you think about what you might draw on a piece of paper then why not use vector plots to visualize sports passes!

The New York Times graphics department famously visualized the change of the electorate with vector plots, showing how much various places swung left or right.

If we’re being pedantic, note that this plot only uses 1/2 of the “pieces of information” in the arrow: it’s keeping the angle of the arrow constant (either left or right) while only changing the magnitude of the arrow. And that’s OK! It’s quite an effective plot nonetheless.


This prerelease is available here: https://cdn.plot.ly/plotly-4.0.0-rc.0.min.js. We should have prereleases available in the plotly.py python library available shortly as well.

So, what vector plots did I miss and which ones are your favorite?


Personally, I’m i interested in developing some higher resolution water current plots. I open water swim in the ocean at a shoreline where there is a sort of famous “back eddy”, meaning that if you swim out too far the current switches direction (which can be quite dangerous!). This eddy changes throughout the day as the tide changes. There are a few great apps that visualize this (I’ve bought the Saildrone Forecast App) but I’d be curious to try to model it myself. Can it be done through data collection on the publically available NOAA buoy data feeds or does it have to be done by approximation in a fluid dynamics model based off of the tides? I’m not sure! These are questions I didn’t have before this plot type :slight_smile:


Anyway, give these charts a try and let us know what you think :clinking_beer_mugs:

Wow - this is really cool. Thanks for all the great examples.

Just FYI - You can find the code for each example on Chris’s blog, and the apps are live so you can interact with them:

A brand new trace type may sound easy, but it’s a major addition to Plotly!

The new quiver trace started as a community contribution from John Degner (@degzhaus on Github). The work spanned 10 months, two PRs, 95 conversations, and 77 commits across PR #7584 and PR #7710.

And those numbers only tell part of the story. There was API design, sizing and scaling, arrowheads, colorscales, hover and selection, animation, testing, visual regression tests, schema updates, and plenty of edge cases to work through.

A huge thank you to John for taking on such a substantial contribution, and to Plotly team members @emilykl and @camdecoster for all the review, guidance, and collaboration that helped get it across the finish line.

I’m super excited about this new feature and can’t wait to see what everyone builds.