Python Plotly chart update with two dropdowns

Question

I am trying to build a plotly scatterplot in Jupyter Lab to be able to see dependencies between various columns in a DataFrame. I want to have two dropdown menus (corresponding to the X and Y axes), in each of which a full list of the DF columns will be available. When I select a column in any of the menus, the data on the appropriate axis should be replaced by the column I selected (so, if I select the same column for X and Y, I would expect a straight line).

Below is my current implementation with a sample DataFrame:

# Creating the DataFrame    
temp = pd.DataFrame(np.random.randint(0, 1000, (100, 10)))
col_list = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
temp.columns = col_list

# Init figure with the A column on both axes by default
fig = go.Figure()

default_col = 0
fig.add_trace(
    go.Scatter(
        x=temp[col_list[default_col]].values,
        y=temp[col_list[default_col]].values,
        name="Metric correlation",
        mode="markers"
    ),
)
fig.update_xaxes(title_text=col_list[default_col])
fig.update_yaxes(title_text=col_list[default_col])

col_list = temp.columns

# Building options for each of the lists
btns_x = [
    dict(
        label=c,
        method="update",
        args=[
            {"x": temp[c].fillna(0).values,
             'xaxis': {'title': c}
             }],
    ) for c in col_list]


btns_y = [
    dict(
        label=c,
        method="update",
        args=[
            {"y": temp[c].fillna(0).values,
             'yaxis': {'title': c}
             }],
    ) for c in col_list]

# Adding the lists to the figure
fig.update_layout(
    updatemenus=[
        dict(
            buttons=btns_x,
            # method="update",
            direction="down",
            pad={"r": 10, "t": 10},
            showactive=True,
            x=0.1,
            xanchor="left",
            y=1.1,
            yanchor="top"
        ),
        dict(
            buttons=btns_y,
            # method="update",
            direction="down",
            pad={"r": 10, "t": 10},
            showactive=True,
            x=0.1,
            xanchor="right",
            y=1.1,
            yanchor="top"
        ),
    ]
)
fig.update_layout(width=1000, height=1000)
fig.show()

The figure draws correctly initially:

Still, there are a few problems:

When I change values in a dropdown, it only works once. On the next tries nothing happens
If I first change the value on one dropdown and then on the other, all data disappears from the graph (see screenshot below)
The axes labels are not being updated

Rob Raymond · Accepted Answer · 2022-04-01 16:01:09Z

4

It's just about being systematic around the list comprehensions. Below fully works, allows selection of any column and updates appropriate axis title.

import pandas as pd
import numpy as np
import plotly.express as px

temp = pd.DataFrame(np.random.randint(0, 1000, (100, 10)))
col_list = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
temp.columns = col_list

fig = px.scatter(temp, x="A", y="B")

fig.update_layout(
    updatemenus=[
        {
            "buttons": [
                {
                    "label": c,
                    "method": "update",
                    "args": [
                        {axis: [temp[c]]},
                        {f"{axis}axis": {"title": {"text": c}}},
                    ],
                }
                for c in temp.columns
            ],
            "x": 0 if axis == "x" else 0.1,
            "y": 1.2,
        }
        for axis in "xy"
    ]
)

answered Apr 1, 2022 at 16:01

Rob Raymond

31.5k3 gold badges19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stanislav Nosulenko Over a year ago

Indeed, this seems to work perfectly and is quite elegant :) I will accept this, but will be grateful if you can tell me where I went wrong in my initial answer - seems like I did more or less the same stuff but repeated manually the button generation over the x/y axis

Rob Raymond Over a year ago

I believe the issue is here {"x": temp[c].fillna(0).values, 'xaxis': {'title': c} } should be {"x": [temp[c].fillna(0).values]}, {'xaxis': {'title': c}} } IMHO a bit of a quirk where values needs to be a 2D list and data and layout need to be separate dicts

Collectives™ on Stack Overflow

Python Plotly chart update with two dropdowns

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related