Custom buttons

I N T R O D U C T I O N T O D ATA V I S U A L I Z AT I O N W I T H P L O T LY I N P Y T H O N

Alex Scriven
Data Scientist
What can custom buttons do?

Custom bu ons can:

Update the data or layout elements of a plot

All of our update_layout() customizations could be in a bu on!

Assist with animations (beyond the scope of this course)

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

Custom buttons in Plotly
Bu ons are added via an updatemenus argument (a list of dictionaries) with important
arguments:

type : buttons or dropdown

We will cover dropdowns later!

direction : Bu on orientation
Bu ons can be beside ( left ) or on top of ( down ) each other

x / y : Floats to set the bu on positions as you have done before

showactive : True / False to show the active (index of bu on) as pressed or not.
The active bu on is the currently selected one.

buttons : A list of button objects

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

Plot type with buttons
Let's rst set up a bar chart: Our simple bar chart:

fig = px.bar(
data_frame=revenues,
x='Industry', y='Revenue',
color='Industry')
fig.show()

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

Button set up

Create the bu ons to switch plot type:

my_buttons = [
{'label': "Bar plot",
'method': "update",
'args': [{"type": "bar"}]},
{'label': "scatterplot",
'method': "update",
'args': [{"type": "scatter", 'mode': 'markers'}]}
]

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

The args argument
One of the most confusing arguments in
Plotly!

Its structure is:

[{dictionary to send to data},
{dictionary to send to layout}]

See what happens when we use Python's

dir on our gure object to see the internal
structure
There are some familiar faces! (much
more is printed)

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

Using args for layout updates
Let's see what is inside the gure's layout element:

dir(fig.layout)

Phew! There are many, but some should be familiar.

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

Using args for data updates
Let's also what is inside the gure's data element (of the rst trace):

dir(fig.data[0])

Some are familiar and some are worth noting for later!

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

Button interactivity
Set the bu on placement, stacking, and Our bu ons at work!
focus:

fig.update_layout({
'updatemenus': [{'type': "buttons",
'direction': 'down',
'x': 1.3, 'y': 0.5,
'showactive': True,
'active': 0,
'buttons': my_buttons}]
})
fig.show()

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

 Let's practice!
I N T R O D U C T I O N T O D ATA V I S U A L I Z AT I O N W I T H P L O T LY I N P Y T H O N
 Dropdowns
I N T R O D U C T I O N T O D ATA V I S U A L I Z AT I O N W I T H P L O T LY I N P Y T H O N

Alex Scriven
Data Scientist
What is a dropdown?

Allows user to select from a set of options

These options will alter the plot in various

ways

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

Dropdowns in Plotly
Dropdowns are created very similarly to bu ons.

Create a gure and loop through DataFrames to add traces:

fig = go.Figure()
for suburb in ['Ashfield', 'Lidcombe', 'Bondi Junction']:
df = syd_houses[syd_houses.Suburb == suburb]
fig.add_trace(go.Bar(x=df['Year'], y=df['Median House Price'], name=suburb))

Why so many traces? Our dropdown is going to show/hide di erent ones!

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

Hiding a trace
Recall what we can update in a gure's data
element?

The visible argument determines

whether traces are visible ( True ) or not (
False )

We could use args to update the visible

argument of di erent traces

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

We can use a list for the args value to

update all three traces

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

The dropdown object
The dropdown object, like the bu on object, is also a list with the same arguments.

# Create the dropdown

dropdown_buttons = [
{'label': 'Ashfield', 'method': 'update',
'args': [{'visible': [True, False, False]},
{'title': 'Ashfield'}]},
{'label': 'Lidcombe', 'method': 'update',
'args': [{'visible': [False, True, False]},
{'title': 'Lidcombe'}]},
{'label': "Bondi Junction", 'method': "update",
'args': [{"visible": [False, False, True]},
{'title': 'Bondi Junction'}]}
]

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

Adding the dropdown
Adding the dropdown is also very similar: Our dropdown:

fig.update_layout({
'updatemenus':[{
'type': "dropdown",
'x': 1.3,
'y': 0.5,
'showactive': True,
'active': 0,
'buttons': dropdown_buttons}]
})
fig.show()

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

 Let's practice!
I N T R O D U C T I O N T O D ATA V I S U A L I Z AT I O N W I T H P L O T LY I N P Y T H O N
 Sliders
I N T R O D U C T I O N T O D ATA V I S U A L I Z AT I O N W I T H P L O T LY I N P Y T H O N

Alex Scriven
Data Scientist
What are sliders?

An interactive element to toggle between A year slider:

values and update your plot

O en used for viewing data over time, such

as data from di erent years

Can be used for any group, such as A penguin island slider:

penguin islands

Ensure it makes sense in your plot

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

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

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

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

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

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 di erent 'frames'.

To solve this, we need to use graph_objects to create the slider

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

Sliders with graph_objects

To use graph_objects , we need to:

1. Create a gure object with necessary traces

2. Create a sliders object to show/hide traces

3. Update the layout to add the slider to the gure

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

Creating the figure

Let's create the gure 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))

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

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 forma ing options available in the docs!

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

Adding the slider

Now we can add the slider to our gure:

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

The rst screen was a bit funny huh? Let's x

that!

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

Fixing the initial display
We can x the initial display by se ing only Much be er!
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()

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

 Let's practice!
I N T R O D U C T I O N T O D ATA V I S U A L I Z AT I O N W I T H P L O T LY I N P Y T H O N
 What you learned
I N T R O D U C T I O N T O D ATA V I S U A L I Z AT I O N W I T H P L O T LY I N P Y T H O N

Alex Scriven
Data Scientist
Chapter 1

The Plotly gure

Univariate plots such as box plots and

histograms

Styled plots using color

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

Chapter 2

Bivariate visualizations such as sca erplots Recall seeing company age (another
and bar plots variable) in the hover!

Customized your plots further with:

Hover information and legends

Annotations

Custom plot axes

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

Chapter 3

Advanced customization
Subplots of same or di erent types

Layering multiple plots on the same

chart

An introduction to time bu ons

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

Chapter 4
Your houses dropdown:

Using interactive elements:

Bu ons

Dropdowns

Sliders

INTRODUCTION TO DATA VISUALIZATION WITH PLOTLY IN PYTHON

 Thank you!
I N T R O D U C T I O N T O D ATA V I S U A L I Z AT I O N W I T H P L O T LY I N P Y T H O N