Animating graphs in plotly

📊 Plotly Python
1

Hello,

I’ve been having a hard time understanding the new normal way to plotly’s coding style. I’m too used to using the trace = go.Scatter(x, y...) etc...

I tried recreating the example shown in this link

N = 50
s = np.linspace(-1,1,N)
vx = 1+2*s
vy = 1-2*s #v=(vx, vy) is the velocity
speed = np.sqrt(vx**2+vy**2)
ux = vx/speed #(ux, uy) unit tangent vector, (-uy, ux) unit normal vector
uy = vy/speed

xend = xx + ux #end coordinates for the unit tangent vector at (xx, yy)
yend = yy + uy

xnoe = xx - uy #end coordinates for the unit normal vector at (xx,yy)
ynoe = yy + ux

trace = go.Scatter(
        x = x,
        y = y,
        name = 'frame',
        mode = 'lines',
        line = dict(
                width = 2,
                color = 'blue')
)

trace1 = go.Scatter(
        x = x,
        y = y,
        name = 'curve',
        mode = 'lines',
        line = dict(
                width = 2,
                color = 'blue')
)

layout = go.Layout(
        width = 600,
        height = 600,
        xaxis = dict(
                range = [xm, xM],
                autorange = False,
                zeroline = False
        ),
        yaxis = dict(
                range = [ym, yM],
                autorange = False,
                zeroline = False
        ),
        title = 'Moving Frenet Frame Along a Planar Curve', 
        hovermode = 'closest',
        updatemenus = dict(
            visible = True,
            type = 'buttons',
            buttons = dict(
                    method = 'animate',
                    label = 'Play',
                    args = [None]
            )
       )
)

frames = go.Frames(
        data = [dict(
            x = [xx[k], xend[k], None, xx[k], xnoe[k]],
            y = [yy[k], yend[k], None, yy[k], ynoe[k]],
            mode = 'lines',
            line = dict(
                    color = 'red',
                    width = 2
            )
        ) for k in range(N)]
)

fig = go.Figure(data = [trace,trace1], layout = layout, frames = frames)

py.iplot(fig)

which is essentially the same thing from the documentation but the code above throws an error. Please help!

2

@l3r4nd The code for this animation is incomplete. My feeling is that it was pasted here https://plot.ly/python/animations/ and the first lines were skipped.

Here is a working code: https://plot.ly/~empet/14827.

1 Like