Animate n points along y axis given velocity

📊 Plotly Python
8

@yogi_dhiman here is an solution using dash. I would try to change to a clientside callback to assure a smooth animation if your interval is quite small

from dash import Dash, Input, Output, dcc, html
from dash.exceptions import PreventUpdate
import plotly.graph_objects as go

app = Dash()

app.layout = html.Div(
    [
        dcc.Graph(
            id='graph',
            figure=go.Figure(
                data=go.Scatter(
                    x=[1, 2, 3],
                    y=[0, 0, 0],
                    mode='markers',
                    marker={'color': ['red', 'green', 'blue']}
                ),
                layout={'yaxis_range': [0, 5], 'width': 500, 'height': 500}
            )
        ),
        html.Button(
            'start animation',
            id='btn'
        ),
        dcc.Interval(
            id='interval',
            interval=100,
            n_intervals=0,
            max_intervals=0
        ),
        html.Div(id='dump')
    ]
)


@app.callback(
    Output('interval', 'max_intervals'),
    Input('btn', 'n_clicks'),
    prevent_initiall_call=True
)
def start_interval(click):
    if not click:
        raise PreventUpdate
    else:
        return 25


@app.callback(
    Output('graph', 'figure'),
    Output('dump', 'children'),
    Input('interval', 'n_intervals'),
    prevent_initial_call=True
)
def update(n):
    x = [1, 2, 3]
    # different velocities by multiplication of constant with n
    y = [0.1 * n, 0.1 * 2*n, 0.1 * 0.5*n]

    fig = go.Figure(
        data=go.Scatter(
            x=x,
            y=y,
            mode='markers',
            marker={'color': ['red', 'green', 'blue']}
        ),
        layout={'yaxis_range': [0, 5], 'width': 500, 'height': 500}
    )
    return fig, f'frame number: {n}'


if __name__ == "__main__":
    app.run_server(debug=True, port=8080)

creates:
racing_points_3

mred animation