Plotly Express Automatic Animation

Dash Python
1

Is it possible to have the animation start auotmatically when the graph is loaded as opposed to having to press the play button?

import plotly_express as px
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output

gapminder = px.data.gapminder()

dimensions =

app = dash.Dash(
name, external_stylesheets=[“https://codepen.io/chriddyp/pen/bWLwgP.css”]
)

app.layout = html.Div(
[
html.H1(“Gapminder data”),
dcc.Graph(id=“graph”, style={“width”: “75%”, “display”: “inline-block”},
figure=px.scatter(gapminder, 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.run_server(debug=True)

2

@chriddyp have been looking around as much as I can but the transitions documentation is hard to find.

Here’s an additional example with what I think is the correct way to implement, but still does not work on initial load… Only after initial load once any of the inputs are updated does the transition occur:

initial_text = 'Test me!'
layout = html.Div(
        [
            dcc.Markdown(
                dedent(
                )
            ),
            dbc.FormGroup(
                dbc.Textarea(
                    id="text-input",
                    value=initial_text,
                    style={"width": "40em", "height": "5em"},
                )
            ),
            dbc.FormGroup(
                [
                    dbc.Label("Sort by:"),
                    dbc.RadioItems(
                        id="sort-type",
                        options=[
                            {"label": "Frequency", "value": "frequency"},
                            {"label": "Character code", "value": "code"},
                        ],
                        value="frequency",
                    ),
                ]
            ),
            dbc.FormGroup(
                [
                    dbc.Label("Normalize character case?"),
                    dbc.RadioItems(
                        id="normalize",
                        options=[
                            {"label": "No", "value": "no"},
                            {"label": "Yes", "value": "yes"},
                        ],
                        value="no",
                    ),
                ]
            ),
            dcc.Graph(id="graph", className='six columns'),
        ]
    )


@app.callback(
    Output("graph", "figure"),
    [
        Input("text-input", "value"),
        Input("sort-type", "value"),
        Input("normalize", "value"),
    ],
    [],  # States
)
def callback(text, sort_type, normalize):
    if normalize == "yes":
        text = text.lower()

    if sort_type == "frequency":
        sort_func = lambda x: -x[1]
    else:
        sort_func = lambda x: ord(x[0])

    counts = Counter(text)

    if len(counts) == 0:
        x_data = []
        y_data = []
    else:
        x_data, y_data = zip(*sorted(counts.items(), key=sort_func))
    return {
        "data": [{"x": x_data, "y": y_data, "type": "bar", "name": "trace1"}],
        "layout": {
            "transition": {'duration': 2000},
            "title": "Frequency of Characters",
            "height": "600",
            "font": {"size": 16},
        },
    }