Sliders

Introduction to Data Visualization with Plotly in Python

Alex Scriven

Data Scientist

What are sliders?

An interactive element to toggle between values and update your plot
Often used for viewing data over time, such as data from different years
Can be used for any group, such as penguin islands
Ensure it makes sense in your plot

A year slider:

A year slider

A penguin island slider:

A penguin island slider

Sliders in plotly.express

plotly.express allows sliders via the animation_frame and animation_group arguments

animation_frame: What will be on the slider (Year or Island on previous slide)
animation_group: How to tell Plotly it is the same object over time

Revenue vs. Employees with slider

fig = px.scatter(
  data_frame=revenues, 
  y='Revenue',
  x='Employees',
  color='Industry',

  animation_frame='Year',
  animation_group='Company')


fig.update_layout({
  'yaxis': {'range': [0, 500000]},
  'xaxis': {'range': [-100000, 2500000]}
})


fig['layout'].pop('updatemenus')
fig.show()

Revenues per year

plotly.express limitation: animate method

plotly.express sliders have a key limitation - the animation slider method

In the Figure object

fig['layout']['sliders'][0].steps[0]['method']

animate

With plotly.express, you can't update data or layout — only animate the same data point over different 'frames'.
To solve this, we need to use graph_objects to create the slider

Sliders with graph_objects

To use graph_objects, we need to:

Create a figure object with necessary traces
Create a sliders object to show/hide traces
Update the layout to add the slider to the figure

Creating the figure

Let's create the figure and add traces

fig = go.Figure()

for island in ['Torgersen', 'Biscoe', 'Dream']:
    df = penguins[penguins.Island == island]

    fig.add_trace(go.Scatter(
            x=df["Culmen Length (mm)"], 
            y=df["Culmen Depth (mm)"], mode='markers', name=island))

Creating the slider

Let's create the slider object:

sliders = [
  {'steps':[

    {'method': 'update', 'label': 'Torgersen',

    'args': [{'visible': [True, False, False]}]},

    {'method': 'update', 'label': 'Bisco',

    'args': [{'visible': [False, True , False]}]},

    {'method': 'update', 'label': 'Dream',

    'args': [{'visible': [False, False, True]}]}

  ]}
]

More formatting options available in the docs!

Adding the slider

Now we can add the slider to our figure:

fig.update_layout({'sliders': sliders})
fig.show()

The first screen was a bit funny huh? Let's fix that!

Penguin islands slider final

Fixing the initial display

We can fix the initial display by setting only the relevant traces to show.

# Make traces invisible
fig.data[1].visible=False
fig.data[2].visible=False


fig.update_layout({'sliders': sliders})
fig.show()

Much better!

Fixed initial display for scatter with slider

Let's practice!

Introduction to Data Visualization with Plotly in Python