✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

How to add wind vectors over a density heatmap?

I have this density heatmap generated:

enter image description here

Now I need to add wind vectors over the heatmap. I would like to use quiver plots if possible, but currently I want to know how to add any kind of plot to a mapbox.

I have only found this example but the source code in the Plotly Chart Studio doesn’t load so I don’t know how to do it, also I need it in 2D:

enter image description here

If it’s not possible to add quiver plots to a density heatmap, what other options exist that are similar to wind vectors?

Hi @netotz,

First you have to define a 2d quiver plot on map.
Here is a simple example of 2d quiver plot:

import plotly.figure_factory as ff
from numpy import sin, cos,  pi
import numpy as np


x, y = np.mgrid[0:1:16j,0:1:16j]    
z = 0.0*np.ones(x.shape)

u = sin(x*pi) * cos(y*pi) * cos(z*pi)
v = cos(x*pi) * sin(y*pi) * cos(z*pi)

fig = FF.create_quiver(x, y, u, v,
                       scale=0.065,
                       arrow_scale=.3,
                       angle=pi/18,
                       name='quiver',
                       line=dict(width=1, color='#8f180b'))
fig.show()

Inspecting fig.data[0] you’ll notice that the corresponding trace is a Scatter trace, where x, y contain the end point coordinates for each segment that defines a quiver, separated by None.

At this link you may download a zip archive that contains:

  1. the json file for the 2d figure for the flat Earth with countries and coastlines, a heatmap that has as z-values mapped to the colorscale the wind speed at each point, as well as the quivers defined as in the example above, but with x, y having as coordinates the geographic coords, lon and lat.
  2. a jupyter notebook where data from the 2d figure are mapped onto the sphere to get the 3d version for wind (the 3d plot you posted here).

The jupyter notebook for the 2d plot is no more available, that’s why I included in the archive only that for the 3d version.

Hope that this information can help.

1 Like

hi @empet, I ended using Scattermapbox to represent wind vectors:

The direction is properly displayed as you can see. However, I also have a property that represents wind’s velocity, so I was thinking about using size or opacity to distinguish each markers’ velocity, but it seems that those properties only work when the marker symbol is “circle”. I can’t use that symbol because then I couldn’t represent direction. Is there a way to use those properties with another symbol? Currently I’m using “marker”.

Hi @netotz,

To set a non-circle marker, see this post https://community.plotly.com/t/scattermapbox-marker-with-no-fill/28799/3. Unfortunately, maki icons come only with 1-3 sizes.

@empet but can I set different sizes, colors or opacity values for each marker?

@netotz If you read all comments at the link I posted, you’ll se that marker_size worked well up to 20. Just check it!. The color cannot be set. The marker is displayed with black as in the maki table.

@empet no but I mean a list of different values, so that each marker would have a different size, e.g. size=[2,4,1,6,5]

@netotz

Why are you addressing such a question as long as you can check yourself if it works or not?

@empet I know it doesn’t work, I’ve already checked it, but I ask you because you seem to have a lot of experience with Plotly and maybe you’d know a trick or a workaround

thanks anyway