Plotly：如何创建包含下拉菜单的多面条形图？

Question

I have the following dataframe

import pandas as pd
df = pd.DataFrame({'var1':[0.2, 0.3, 0.4, 0.5, 0.6], 'var2': [1.2, 1.3, 1.4, 1.5, 1.6],
                   'facet_var': ['sd_1', 'sd_1', 'ctrl_1', 'ctrl_1', 'ctrl_1'],
                   'value_facet': ['a', 'b', 'a','b','c']})

I would like to create an html with barplots of var1 and var2 (selected from a dropdown menu) faceted by facet_var . The x_values of the barplots would be the value_facet and the height of the barplots would be the var1 or var2 depending on the selection from the dropdown menu

Any ideas how to do something like that using plotly ?

Answer 1

What you're asking is most likely fully doable, but there are more than a few confusing elements in your question. The question title says Histogram , but you're talking about barplots in the question itself. So no binning then? Further, the term facets lends iself best to plotly.express (px) . And px works best with data of a long format. And you've provided a dataset that's more of a wide format since you've got columns with values of a single categeoy for var1 and var2 :

    var1    var2    facet_var   value_facet
0   0.2     1.2     sd_1        a
1   0.3     1.3     sd_1        b
2   0.4     1.4     ctrl_1      a
3   0.5     1.5     ctrl_1      b
4   0.6     1.6     ctrl_1      c

And that's a format that's normally better suited for plotly.graph_objects (go) . And in that case we'd be more likely talking about subplots and not facets . And one more thing. The number of dimensions in your dataset doesn't really justify a faceted bar plot. Meaning that all dimensions of your dataset would be fully visualized using a grouped and faceted bar plot like this px.bar(df, x='value_facet', y='value', color='variable', facet_col='facet_var') :

Plot 1: All data dimensions, but no drop-down

But to answer your question, assuming that you'd not like to use a histogram (with binned values) but a barplot with a dropdown menu , the code snippet below will produce the following plots for options var1 and var2 in the dropdown menu:

Plot 2: var1

Plot 3: var2

One particulary important line in the complete code snippet below is:

df=pd.melt(df, id_vars=['facet_var', 'value_facet'], value_vars=['var1', 'var2'])

This turns the dataset from the semi-wide format you've provided into data of a long format that's better suited for px :

    facet_var   value_facet variable    value
0   sd_1        a           var1    0.2
1   sd_1        b           var1    0.3
2   ctrl_1      a           var1    0.4
3   ctrl_1      b           var1    0.5
4   ctrl_1      c           var1    0.6
5   sd_1        a           var2    1.2
6   sd_1        b           var2    1.3
7   ctrl_1      a           var2    1.4
8   ctrl_1      b           var2    1.5
9   ctrl_1      c           var2    1.6

Complete code:

import plotly.express as px
import plotly.graph_objects as go
import pandas as pd

df = pd.DataFrame({'var1':[0.2, 0.3, 0.4, 0.5, 0.6], 'var2': [1.2, 1.3, 1.4, 1.5, 1.6],
                   'facet_var': ['sd_1', 'sd_1', 'ctrl_1', 'ctrl_1', 'ctrl_1'],
                   'value_facet': ['a', 'b', 'a','b','c']})

df=pd.melt(df, id_vars=['facet_var', 'value_facet'], value_vars=['var1', 'var2'])

df1=df[df['variable']=='var1']
df2=df[df['variable']=='var2']

### all dimensions, no drop-downs  ###################################################
# PLot 1
#fig = px.bar(df, x='value_facet', y='value', color='variable', facet_col='facet_var')
#fig.show()
######################################################################################

# Figure with dropdown menu to produce plot 2 and plot 3
fig = px.bar(df1, x='value_facet', y='value', color='variable', facet_col='facet_var')


updatemenus = [
    {
        'buttons': [
            {
                'method': 'update',
                'label': 'var 1',
                'args': [
                    {'y': [df1[(df1['facet_var'] == 'sd_1')]['value'],
                           df1[(df1['facet_var'] == 'ctrl_1')]['value']]},
                ]
            },
            {
                'method': 'update',
                'label': 'var 2',
                'args': [
                    {'y': [df2[(df2['facet_var'] == 'sd_1')]['value'],
                           df2[(df2['facet_var'] == 'ctrl_1')]['value']]},
                ]
            }
        ],
        'direction': 'down',
        'showactive': True,
    }
]

fig.update_layout(updatemenus=updatemenus)
fig.show()