User Interaction

Plotly’s built-in interactive functionality covers a lot of visualization workflow needs.

But there are some cases in which you want the user to be able to customize the plot.

We have a few options for this functionality through plotly.

Animations

We can add the animation_frame and animation_group arguments to a plot to create an animation.

# line plot example

import plotly.express as px # import statement
df = px.data.gapminder() # load data

# create plot
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 # show output

# bar chart example

# create figure
fig = px.bar(df, x="continent", y="pop", color="continent",
  animation_frame="year", animation_group="country", range_y=[0,4000000000])

fig.show() # show figure

Additional Resources

• plotly animation documentation

Sliders

Sliders in plotly.express use the same animation_frame and animation_group arguments. We can update the layout ro remove the buttons (so the animation functions like a slider.

# slider example

# create data
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") # drop animation buttons
fig # show figure

Additional Resources

• plotly slider documentation

Dropdown Menus

Plotly does support drop-down menus- we just have to use the graph object syntax and declare the menu options manually.

There’s a lot going on in the middle piece of code thta generates the dictionary. But the overarching workflow involves getting a list of unique countries in our gapinder dataset, and formatting those values as the type of dictionary we’ll need for the plotly dropdown.

import plotly.graph_objects as pgo # import statement

fig = px.area(df, x='year', y='pop') # create figure

# gets unique values from country column, creates a dictionary with Plotly parameters to generate dropdown options
country_options = [{'label': country, 'method': 'update', 'args':
 [{'y': [df[df['country'] == country]['pop']], 'x': [df[df['country'] == country]['year']]}]}
                   for country in df['country'].unique()]

fig.update_layout(updatemenus=[dict(type="dropdown", buttons=country_options)]) # update menu with dropdown
fig # show output

Additional Resources

• plotly dropdown documentation

Additional Resources

To learn more about plotly workflows for user interactivity:

• plotly documentation