How to create a quiver plot

plotly.js
1

I have not found any page on how to make a quiver plot in 2D or 3D with D3 or plotly.js, is it not implemented?
Thanks

1 Like
2

https://plot.ly/python/quiver-plots/ Its does not seem to. Its only available for Python and matlab.

2 Likes
3

Hi,

I’ve been searching for a way to make quiver plots using plotly js too but could not find anything online, so I made my own version.

It’s really not the most convenient thing, but it works for my purposes. If anyone has better ideas or want to use this here is my code.

function quiver(vectorField, xrange, yrange, xstep, ystep) {
    // Function to create a vector field over a range of values
    var anno = []
    for (let i=xrange[0]; i <= xrange[1]; i += xstep){
        for (let j=yrange[0]; j <=yrange[1]; j += ystep) {
            let direction = vectorField([i, j])

            let mag = Math.sqrt(Math.pow(direction[0], 2) + Math.pow(direction[1], 2))+0.00000001
            anno.push(
                {
                    x: i,
                    y: j,
                    showarrow: true,
                    ax: direction[0]*25/mag,
                    ay: -direction[1]*25/mag
                  }
            )
        }

    }
    return {
        showlegend: false,
        annotations: anno
      }
}

It uses the annotation arrows, which is not very convenient because their size is not defined in relation to the plot (afaik).

The vectorField argument is a function taking in an array with your x and y positions and also returns an array with the x and y components of the vector at that location, like:

function diff(vars){
    return [vars[1], -vars[0]]
}

Then I just pass the output of this function to the layout argument in newPlot. Sorry if this is poor coding, I’m not very good at JS, but hopefully this can help someone who just need a rough solution.