Updating Plots From User Interactivity

Overview

Using the power of Dash with callbacks and interactive elements, we can see how powerful this library is for creating interactive apps that extend the capability of Plotly extensively. Here we will explore further ways to customize and personalize applications based on user input. Specifically, we will focus on how plots can be updated based on user interaction. We will look at various aesthetic elements that will, in combination, allow our apps to be dynamic and flexible for our end users.

Updating color

One use case of updating the plot based on user activity lies in the ability to change the color of the data displayed in the plot.

Marker color

In this example, we create a simple scatter plot using the health dataset, detailing country health data in the year 2018. We plot life expectancy against infant mortality and use a callback to allow the user to select the color of the points in their scatter plot.

To implement the change in scatter coloring, we use the marker_color argument from fig.update_traces, allowing the user to select their marker of choice. This selected color then gets passed in as the c parameter inside the update_color user defined callback function.

Let’s walk through this code in depth.

• Load data:

  • Define a get_data() function that reads a CSV file containing health data and returns a pandas DataFrame.

• Set up customizing functions:

  • Define a get_color_options() function that returns a list of color names from the mcolors.CSS4_COLORS dictionary.
  • Define a get_figure() function that creates a scatter plot using the input dataset and returns a Plotly Express figure.

• Set up app:

  • Create a JupyterDash app instance with the Litera theme from Dash