Set drilldown order of bar charts and sunburst - Two versions

set_drilldown_order.py

"""
From dash community question:
https://community.plotly.com/t/how-can-i-allow-users-to-select-which-comparison-variables-to-display-on-a-chart/69124

"""

from dash import Dash, html, dcc, Input, Output
import plotly.express as px
import pandas as pd
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

data = "https://raw.githubusercontent.com/kburchfiel/kburchfiel-dash-plotly-demo/master/t5_airports_t4_airlines_2018.csv"
df = pd.read_csv(data)

app.layout = dbc.Card(
    [
        html.Label("Select drill down order", htmlFor="dropdown"),
        dcc.Dropdown(["Airport", "Airline", "Route_Type"], id="dropdown", multi=True),
        html.Div(f"Total Passengers {df.Passengers.sum():,.0f}", className="text-center pt-4"),
        dcc.Graph(id="graph", style={"height": 800}),
    ], body=True, className="m-4"
)


@app.callback(Output("graph", "figure"), Input("dropdown", "value"))
def update_drilldown(value):
    if value is None or value == []:
        return px.pie(values=[df.Passengers.sum()])
    return px.sunburst(df, path=value, values="Passengers")


if __name__ == "__main__":
    app.run_server(debug=True)

set_drilldown_order_v2.py

"""
This version is based on community forum answer from @jinnyzor:
https://community.plotly.com/t/how-can-i-allow-users-to-select-which-comparison-variables-to-display-on-a-chart/69124/8?u=annmariew

"""



import plotly.express as px
import dash
from dash import html, dcc, Input, Output
import dash_bootstrap_components as dbc
import pandas as pd


data = "https://raw.githubusercontent.com/kburchfiel/kburchfiel-dash-plotly-demo/master/t5_airports_t4_airlines_2018.csv"
df = pd.read_csv(data)


def createFigure(grouping=None):
    if grouping:
        dff = df.groupby(grouping).sum().reset_index()
        if len(grouping) == 1:
            dff["sorted"] = dff[grouping]
            fig = px.bar(dff, x="sorted", y="Passengers", color=grouping[0])
        else:
            dff["sorted"] = dff[grouping[1:]].apply(
                lambda x: "-".join(x.dropna().astype(str)), axis=1
            )
            fig = px.bar(
                dff, x="sorted", y="Passengers", color=grouping[0], barmode="group"
            )

    else:
        fig = px.bar(df, x=["All"], y=[df.sum()["Passengers"]])
    return fig


app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
    [
        dbc.Card(
            [
                dcc.Dropdown(
                    ["Airport", "Airline", "Route_Type"], id="myDropdown", multi=True
                ),
                dcc.Graph(figure=createFigure(), id="myChart"),
            ]
        )
    ]
)


@app.callback(
    Output("myChart", "figure"), Input("myDropdown", "value"), prevent_intial_call=True
)
def updateGroupings(v):
    fig = createFigure(v)
    return fig


if __name__ == "__main__":
    app.run_server(debug=True)