Plotly Shape Questions

📊 Plotly Python
1

I’m sorry if this has been asked before. I have no experience at all with javascript and just started using plotly because with dash I can easily use it in Python. That said, I have some questions regarding shapes.

  • Is there a way to plot circles using radius instead of size like in Bokeh?
  • Is there a way to plot scatter points ON TOP OF circles/other shapes, so their visibility doesn’t get reduced?
  • Is there a way to include shapes in the legend so they can be shown/hidden?

I couldn’t find this in the documentation, but if anyone could link me that’d be great. Thanks! :slight_smile:

2

@eekk
Please change plotly.js with Python. It’s a Python question.

  1. If you want to define a circular shape giving the center and the radius, you should define
    a function to evaluate points on the circle . Then define a SVG path through the circle points, and fill it:

    def my_circle(center, radius, n_points=75):
    t=np.linspace(0, 1, n_points)
    x=center[0]+radius*np.cos(2*np.pi*t)
    y=center[1]+radius*np.sin(2*np.pi*t)
    return x, y 

trace=dict(x=[2.5,4], y=[1.75,2.35],
           mode='markers', 
           marker=dict(size=9, color='rgb(44, 160, 101)'))

axis=dict(showline=True, zeroline=False, showgrid=False)
center=[3.5, 2]
r=1.5
x,y=my_circle(center, r)

path='M '+str(x[0])+','+str(y[1])
for k in range(1, x.shape[0]):
     path+=' L '+str(x[k])+','+str(y[k])
path+=' Z'

layout=dict(width=450, height=450, autosize=False,
            xaxis=dict(axis, **dict(range=[1,6])),  
            yaxis=dict(axis,**dict(range=[-1, 4])),
            shapes=[dict(type='path',
                    layer='below',
                    path=path,
                    fillcolor='rgba(44, 160, 101, 0.5)',
                    line=dict(color= 'rgb(44, 160, 101)')
          
    )]
            )
fig=dict(data=[trace], layout=layout)
iplot(fig)

circle

  1. layer='below' inserts the shape below the scatter points.
  2. shapes are not traces, hence they cannot be included in legend.
3

Amazing, thank you so much! I think I will have to read into SVG a bit more :slight_smile: