How to add slider controls to your plots in Python with Plotly.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.
Simple Slider Control¶Sliders can be used in Plotly to change the data displayed or style of a plot.
In [1]:
import plotly.graph_objects as go import numpy as np # Create figure fig = go.Figure() # Add traces, one for each slider step for step in np.arange(0, 5, 0.1): fig.add_trace( go.Scatter( visible=False, line=dict(color="#00CED1", width=6), name="𝜈 = " + str(step), x=np.arange(0, 10, 0.01), y=np.sin(step * np.arange(0, 10, 0.01)))) # Make 10th trace visible fig.data[10].visible = True # Create and add slider steps = [] for i in range(len(fig.data)): step = dict( method="update", args=[{"visible": [False] * len(fig.data)}, {"title": "Slider switched to step: " + str(i)}], # layout attribute ) step["args"][0]["visible"][i] = True # Toggle i'th trace to "visible" steps.append(step) sliders = [dict( active=10, currentvalue={"prefix": "Frequency: "}, pad={"t": 50}, steps=steps )] fig.update_layout( sliders=sliders ) fig.show()Methods¶
The method determines which plotly.js function will be used to update the chart. Plotly can use several updatemenu methods to add the slider:
"update"
: modify data and layout attributes (as above)"restyle"
: modify data attributes"relayout"
: modify layout attributes"animate"
: start or pause an animationPlotly Express provide sliders, but with implicit animation using the "animate"
method described above. The animation play button can be omitted by removing updatemenus
in the layout
:
In [2]:
import plotly.express as px df = px.data.gapminder() fig = px.scatter(df, 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]) fig["layout"].pop("updatemenus") # optional, drop animation buttons fig.show()What About Dash?¶
Dash is an open-source framework for building analytical applications, with no Javascript required, and it is tightly integrated with the Plotly graphing library.
Learn about how to install Dash at https://dash.plot.ly/installation.
Everywhere in this page that you see fig.show()
, you can display the same figure in a Dash application by passing it to the figure
argument of the Graph
component from the built-in dash_core_components
package like this:
import plotly.graph_objects as go # or plotly.express as px fig = go.Figure() # or any Plotly Express function e.g. px.bar(...) # fig.add_trace( ... ) # fig.update_layout( ... ) from dash import Dash, dcc, html app = Dash() app.layout = html.Div([ dcc.Graph(figure=fig) ]) app.run(debug=True, use_reloader=False) # Turn off reloader if inside Jupyter
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4