Animate layout and data sequentially to circumvent animate.js limitations?

[WilliamGreenlawNYAG]

Can plotly modify Dash's animate functionality to animate data attributes and layout attributes sequentially instead of trying to do so all at once?

I've always loved the animations of D3, but noticed plotly faces a limitation in animating both data and layout attributes at once. From the docs: "A present limitation of the animate API is that only one of either data or layout may be smoothly transitioned at a time. If both are provided, the data will be updated instantaneously after the layout is transitioned."

But with plotly 3.0 and Ipywidgets in Jupyter, I've been able to circumvent this issue by animating the data attributes first and then the layout attributes second. Doing so sequentially has enabled smooth transitions for both data and layout:

import pandas as pd
import numpy as np
import plotly
import plotly.graph_objs as go
import ipywidgets
from ipywidgets import interact, interactive, fixed, interact_manual

df = pd.DataFrame(
{'x1': [1,2,3,4,5,6],
'y1': [1,2,3,4,5,6],
'x2': [5,1,3,4,2,3],
'y2': [1,2,4,8,16,32],
'x3': [-1,-2,-4,-8,-16,-32]}
)

def update(df, a, b):
df = df.sort_values(by = a)
with f.batch_animate(duration = 500):
scatt.x = df[a]
scatt.y = df[b]
scatt.line.color = np.random.choice(['red', 'green', 'blue', 'black'])
f.layout.title = np.random.choice(['red', 'green', 'blue', 'black'])

with f.batch_animate(duration = 1000):
    f.layout.xaxis.range = [min(df[a]) - 1, max(df[a]) + 1]
    f.layout.yaxis.range = [min(df[b]) - 1, max(df[b]) + 1]

f = go.FigureWidget()
scatt = f.add_scatter()
scatt.mode = 'lines+markers'
interact(update, df = fixed(df), a = ['x1', 'x2', 'x3'], b = ['y1', 'y2'])
f

But replicating this approach doesn't work the same in Dash:

import pandas as pd
import plotly.graph_objs as go
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

df = pd.DataFrame(
{'x1': [1,2,3,4,5,6],
'y1': [1,2,3,4,5,6],
'x2': [5,1,3,4,2,3],
'y2': [1,2,4,8,16,32],
'x3': [-1,-2,-4,-8,-16,-32]}
)

f = go.FigureWidget()
scatt = f.add_scatter()
scatt.x = df['x1']
scatt.y = df['y1']
scatt.mode = 'lines+markers'

app.layout = html.Div([
html.H1('Stock Tickers'),
dcc.Dropdown(
id='my-dropdown',
options=[{'label': col, 'value': col} for col in df.filter(regex = 'y').columns],
value = 'y1'),
dcc.Graph(figure = f, id='my-graph')
])

@app.callback(Output('my-graph', 'figure'), [Input('my-dropdown', 'value')])
def update(selected_dropdown_value):
df = pd.DataFrame(
{'x1': [1,2,3,4,5,6],
'y1': [1,2,3,4,5,6],
'x2': [5,1,3,4,2,3],
'y2': [1,2,4,8,16,32],
'x3': [-1,-2,-4,-8,-16,-32]})

df = df.sort_values(by = selected_dropdown_value)
scatt.y = df[selected_dropdown_value]
f.layout.yaxis.range = [min(df[selected_dropdown_value]) - 1,
                        max(df[selected_dropdown_value]) + 1]
return f

if name == 'main':
app.run_server()

Can this workaround be easily implemented into the Dash animate or animate_options kwarg? I don't think users would mind the additional half second of animation in exchange for sleek transitions for a more polished look.

[nicolaskruchten]

The approach we're working on at the moment is to get to a place where all transitions are animatable automatically with a new layout setting: plotly/plotly.js#1849

[nicolaskruchten]

See discussion starting here: plotly/plotly.js#1849 (comment)

[chriddyp]

Also see this prerelease for the new animation behaviour: https://community.plot.ly/t/exploring-a-transitions-api-for-dcc-graph/15468

[gvwilson]

Hi - we are tidying up stale issues and PRs in Plotly's public repositories so that we can focus on things that are most important to our community. If this issue is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. (Please note that we will give priority to reports that include a short reproducible example.) If you'd like to submit a PR, we'd be happy to prioritize a review, and if it's a request for tech support, please post in our community forum. Thank you - @gvwilson