Black Lives Matter. Please consider donating to Black Girls Code today.

Plotly Express Automatic Animation

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)

@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},
        },
    }