Plotly Shape Questions


#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: