Black Lives Matter. Please consider donating to Black Girls Code today.

How to add "North" arrow in 3d plots to orient user during orbital rotation?

I have a scatter3d plot of geospatial data where I would like to add a north arrow. This arrow would ideally be located off the axis and remain pointing North during user rotations. I have not had luck with annotated arrows. 3d cone traces come close but an arrow visible during all rotations would be nice. Thanks.

Hi @mjs

Welcome to Plotly forum!!

Since you did not give sufficient details on your orbital motion I plotted a sphere as orbitting celestial body, and a vertical arrow to point out the North.

From this example you can deduce how to transform the code to get your desired traces.
The basic idea is to define 2 subplots placed in a row and two columns. In the cell (1,1), referenced to a 3d system of coordinates, is plotted the sphere and its orbit, while in the cell (1,2,) the vertical arrow and its support, referenced to a 2d system of coordinates.

After giving the subplot definition:

fig = make_subplots(
    rows=1, cols=2, subplot_titles=('Your title', 'North'),
    specs=[[{"type": "scene"}, {"type": "xy"}]],# this line contains info on the reference system in each cell

we are inspecting the figure layout to read off the x-domain for each subplot cell, to be able to modify it in concordance with our desired settings, i.e. a wider window for the 3d plot and and a thinner one for the arrow:


    'annotations': [{'font': {'size': 16},
                     'showarrow': False,
                     'text': 'Your title',
                     'x': 0.2475,
                     'xanchor': 'center',
                     'xref': 'paper',
                     'y': 1.0,
                     'yanchor': 'bottom',
                     'yref': 'paper'},
                    {'font': {'size': 16},
                     'showarrow': False,
                     'text': 'North',
                     'x': 0.7525,
                     'xanchor': 'center',
                     'xref': 'paper',
                     'y': 1.0,
                     'yanchor': 'bottom',
                     'yref': 'paper'}],
    'scene': {'domain': {'x': [0.0, 0.495], 'y': [0.0, 1.0]}},
    'template': '...',
    'xaxis': {'anchor': 'y', 'domain': [0.505, 1.0]},
    'yaxis': {'anchor': 'x', 'domain': [0.0, 1.0]}

This the code:

from plotly.subplots import make_subplots
import plotly.graph_objects as go
import numpy as np
from numpy import sin, cos, pi

fig = make_subplots(
    rows=1, cols=2, subplot_titles=('Your title', 'North'),
    specs=[[{"type": "scene"}, {"type": "xy"}]],

#left right, respectively left1, right1 gives the x-domains for each subplot cell
left = 0
right = 0.87
left1 = right + 0.1
right1 = 1

#change the x-domains from equal to inequal  lengths 
fig.layout.scene.domain.update(x=[0, right])  
fig.update_scenes(aspectmode='data', camera_eye=dict(x=1.65, y=1.65, z=0.5))
fig.update_xaxes( domain=[left1, right1], visible=False)
fig.update_yaxes(domain=[0, right], range=[0, 1], visible=False);
fig.layout.annotations[0].update(x=(left+right)/2) # Move the default position of titles 
fig.layout.annotations[1].update(x=(left1+right1)/2); # to the centers of the new subplot windows
fig.update_layout(width=800, height=500)

#define the elliptcial orbit
t = np.linspace(0, 2*pi, 100)
a = 1.5
b = 1
x = a*cos(t)
y = b*sin(t)
z = np.zeros(x.shape)

fig.add_trace(go.Scatter3d(x=x, y=y, z=z, 
                           line_width=4, line_color='rgb(20,20,20)',
                           showlegend=False), row=1, col=1);
#end orbit definition

#define the orbitting sphere (elestial body)
v = np.linspace(-pi/2, pi/2, 50)
u, v = np.meshgrid(t, v)
r = 0.2
s  = pi/4
X  = a*cos(s) + r*cos(u)*cos(v)
Y  = b*sin(s) + r*sin(u)*cos(v)
Z  =  r*sin(v)

fig.add_trace(go.Surface(x=X, y=Y, z=Z, colorscale='oranges_r', showscale=False,
                         #, colorbar_x=left-0.15, colorbar_thickness=20
                        ), row=1, col=1);
#end sphere definition

#Define the arrow from the point A to point B, of width width
#the arrow has a vertical support line

widh = 0.0125  #2*widh is the width of the arrow base as triangle
startA = 0.75
endA = 0.95
A = np.array([0, startA])
B = np.array([0, endA])
v = B-A
w = v/np.linalg.norm(v)# unit vector     
u  =np.array([-v[1], v[0]])  #u orthogonal on  w
P = B - (endA - startA)*w
S = P - widh*u
T = P + widh*u

fig.add_trace(go.Scatter(x = [S[0], T[0], B[0], S[0]], # arrow defined as filled triangle
                         y = [S[1], T[1], B[1], S[1]], 
                         hoverinfo='none',), row=1, col=2)
fig.add_trace(go.Scatter(x = [0, 0], # the arrow support as a scatter line
                         y = [0, endA-0.1], #for a shorter line take y=[0.2, endA-0.1]
                         line_color='black'), row=1, col=2);

and this is the corresponding figure:

The arrow length can be shortened, as it is mentioned in a line comment, above.

Thank you for your reply. However, that’s not exactly what I was looking for. The north arrow does not track with user orbital rotation to always point to north. Here is what I have so far. The cone trace points north and always does during rotation, however, I feel like this is a hack and would prefer something like this in the corner, off the axes.

import plotly
import plotly.graph_objs as go

lon = [-119.090954, -119.0429801, -119.0466354, -119.0986616, -119.0601237]
lat = [35.38214087, 35.44760513, 35.34938881, 35.37179955, 35.36318077]
elev = [-1264.92, -1001.36, -1691.64, -1249.68, -1478.28]

trace1 = go.Scatter3d(x=lon,
                      marker=dict(size=12, color='red'))

trace_north = go.Cone(x=[-119.035], y=[35.462], z=[300],
                      u=[0], v=[1], w=[1],
camera = dict(up=dict(x=0, y=0, z=1),
              center=dict(x=0, y=0, z=0),
              eye=dict(x=-.75, y=-1.35, z=0.85))

layout = go.Layout(scene=dict(xaxis=dict(title='Longitude'),
data = [trace1, trace_north]

fig = go.Figure(data=data, layout=layout)

plotly.offline.plot(fig, filename='north-arrow-test.html')


From your initial requirement, “This arrow would ideally be located off the axis and remain pointing North during user rotations”, how could I have deduced that you want a system of orthogonal axes with arrows pointing their direction?
The system of axes in the image at the posted link is typical for OpenGL. Plotly references the plots to a physical system of axes, with +z axis pointing North, not +y.

For each axis you have to define a go.Scatter3d.line

for Ox: x=[0, xmax], y =[0,0], z=[0,0]
Oy: x =[0,0], y=[0,ymax], z=[0,0]
Oz: x=[0,0], y=[0,0], z=[0, zmax]

where xmax, ymax, zmax are the max values of your x, y, z-data in the scatter3d plot.

At the end of each axis you should define the cones that point the axis +direction.
For each cone you’ll specify its position and direction:

The cone definition for xaxis arrow:

go.Cone(x=[xmax], y=[0], z=[0], u=[1], v=[0], w=[0])
and similarly for the arrows associated to yaxis, and zaxis.