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 ![]()
Anyway, give these charts a try and let us know what you think ![]()









