Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

dcc.Slider (play/pause) animation Dash app

@chriddyp, @nicolaskruchten and all.
Hi,
Im a newbie to Dash and Plotly and have an issue regarding animations on Dash app.
I am having some issues with my slider animation. I have managed to create animations successfully on plotly using the “intro to animations” examples, however, I am having issues making a dash app animation. I couldn’t find any working examples of this. Is there perhaps a Gapminder example that could also be constructed using Dash App? So far I have used dcc. Interval (below), but there is serious lagging in animation.

I have attached my WIP code below, and the dataset is accessible on google drive:

Any help on how to add a play pause button to dcc.Slider/ any tips on how to better approach this would be much appreciated!
Thank you in advance and happy holidays!!

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

df = pd.read_csv(See google drive link)

server = flask.Flask(__name__)
app = dash.Dash(__name__, server=server)
features = df.columns

tabs_styles = {}
tab_style = {}

tab_selected_style = {}
app.layout = html.Div([
    html.H1('',
            style={}),
    html.Div([
        dcc.Tabs([
            dcc.Tab(label='MOF explorer', style=tab_style, selected_style=tab_selected_style,
                    children=[
                        html.Div([dcc.Graph(id='HTS-plot', animate=False)], style={'height': '70vh'}),
                        html.Div([
                            html.Label(["Select X variable:",
                                        dcc.Dropdown(id='xaxis', options=[{'label': i, 'value': i} for i in features],
                                                     value='Uptake (Grav.)', )])
                        ], style={}),
                        html.Div([
                            html.Label(["Select Y variable:",
                                        dcc.Dropdown(id='yaxis', options=[{'label': i, 'value': i} for i in features],
                                                     value='Uptake (Vol.)')])
                        ], style={}),
                        html.Div([
                            html.Label(
                                ["Select S variable:",
                                 dcc.Dropdown(id='marker_size', options=[{'label': i, 'value': i} for i in features],
                                              value='Pore Limiting Diameter')])
                        ], style={}),
                        html.Div([
                            html.Label(
                                ["Select C variable:",
                                 dcc.Dropdown(id="marker_color", options=[{'label': i, 'value': i} for i in features],
                                              value='Void Fraction')])
                        ], style={}),
                        html.Div([
                            html.Label(["Select Pressure (bar):",
                                        dcc.Interval(id='auto-stepper',
                                                     interval=1 * 1000,  # in milliseconds
                                                     n_intervals=0
                                                     ),
                                        dcc.Slider(id='pressure-slider',
                                                   min=df['Pressure'].min(),
                                                   max=df['Pressure'].max(),
                                                   value=df['Pressure'].min(),
                                                   marks={str(pressure): str(pressure) for pressure in
                                                          df['Pressure'].unique()},
                                                   step=None,
                                                   )])
                        ], style={'padding': 10, 'fontSize': 14, 'font-family': 'Arial'})
                    ]),
            dcc.Tab(label='Statistical Analysis', style=tab_style, selected_style=tab_selected_style,
                    children=[
                        dcc.Graph(id='stat-plot')
                    ])

        ], style=tabs_styles),

    ]),

], style={})  # style for outter div


@app.callback(
    dash.dependencies.Output('pressure-slider', 'value'),
    [dash.dependencies.Input('auto-stepper', 'n_intervals')])

def on_click(n_intervals):
    if n_intervals is None:
        return 0
    else:
        return (n_intervals + 1) % df['Pressure'].max()

@app.callback(Output('HTS-plot', 'figure'),
              [
                  Input('xaxis', 'value'),
                  Input('yaxis', 'value'),
                  Input('marker_size', 'value'),
                  Input('marker_color', 'value'),
                  Input('pressure-slider', 'value')
              ])
def update_graph(xaxis_name, yaxis_name, size_name, color_name, pressure_value):
    dff = df[df['Pressure'] == pressure_value]
    return {'data': [go.Scatter(x=dff[xaxis_name],
                                y=dff[yaxis_name], mode='markers',
                                marker_color=dff[color_name], marker_size=2 * dff[size_name],
                                marker=dict(opacity=0.8, showscale=True,
                                            line=dict(width=0.5, color='DarkSlateGrey'),
                                            colorbar=dict(title=color_name),
                                            colorscale='Viridis', ),
                                text=dff['DDEC code'],
                                hovertemplate=
                                "<b>%{text}</b><br><br>" +
                                "Volumetric Uptake: %{y:.0f cm/(STP)cm}<br>" +
                                "Gravimetric Uptake: %{x:.0 mol/kg}<br>" +
                                "Largest Cavity Diameter : %{marker.size:,}" +
                                "<extra></extra>", )]

        , 'layout': go.Layout(
            title='HTS plot',
            xaxis={'title': xaxis_name},
            yaxis={'title': yaxis_name},

            margin={'l': 50, 'b': 80, 't': 50, 'r': 10},
            hovermode='closest',
            clickmode='event+select'  # double click to discharge
        )

            }


app.run_server(debug=True)

1 Like

Hi,

Did you received any answer or have a solution? I am facing a similar issue, and I would appreciated any help from you. Many thanks.