Plotly Animations

Dash Python
1

Hey,

ive been researching quite a while now and i havent found any complete answer on animations in plotly with dash.
Can i animate e.g a pie chart? There are animation options and the animate attribute whoms functioanlity i couldnt really understand yet.

Cheers!

2

See this:

https://dash.plot.ly/getting-started-part-2

3

I have tried this:

import plotly as py
import numpy as np
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)


t=np.linspace(-1,1,100)
x=t+t**2
y=t-t**2
xm=np.min(x)-1.5
xM=np.max(x)+1.5
ym=np.min(y)-1.5
yM=np.max(y)+1.5
N=50
s=np.linspace(-1,1,N)
xx=s+s**2
yy=s-s**2


data=[dict(x=x, y=y,
           mode='lines',
           line=dict(width=2, color='blue')
          ),
      dict(x=x, y=y,
           mode='lines',
           line=dict(width=2, color='blue')
          )
    ]

layout=dict(xaxis=dict(range=[xm, xM], autorange=False, zeroline=False),
            yaxis=dict(range=[ym, yM], autorange=False, zeroline=False),
            title='Kinematic Generation of a Planar Curve', hovermode='closest',
            updatemenus= [{'type': 'buttons',
                           'buttons': [{'label': 'Play',
                                        'method': 'animate',
                                        'args': [None]}]}])

frames=[dict(data=[dict(x=[xx[k]],
                        y=[yy[k]],
                        mode='markers',
                        marker=dict(color='red', size=10)
                        )
                  ]) for k in range(N)]

figure=dict(data=data, layout=layout, frames=frames)

app.layout = html.Div([
    dcc.Graph(figure=figure)
])

if __name__ == '__main__':
    app.run_server(debug=False)

but I get ‘keyerror: steper.value’ every time

EDIT:

the above code works in plotly 4.4.1 (pip install plotly --upgrade)

4

Another example:

import plotly.express as px
import plotly as py
import numpy as np
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

df = px.data.gapminder()
figure=px.scatter(df, x="gdpPercap", y="lifeExp", animation_frame="year", animation_group="country",
           size="pop", color="continent", hover_name="country",
           log_x=True, size_max=55, range_x=[100,100000], range_y=[25,90])

app.layout = html.Div([
    dcc.Graph(figure=figure)
])

if __name__ == '__main__':
    app.run_server(debug=False)
5

Hey, y it seems that for some charts transition works, but there ist just none, e.g. pie chart. I will probably just use google charts or other react librarys that implement such functionality.

Thx though!

6

that’s correct - only line, scatter, and bar chart transitions are supported right now.

7

I have just noticed that setting the flag animate to true on a piechart disable the changes to the piechart after the first update.
It could be nice to trigger an exception or a warning in this case (it took me a bit of time to understand why my piechart was not updating anymore)