@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)