Drilldown/Drill Down in Plotly?

Dash Python
1

Is it possible to recreate this effect in plotly? Column with drilldown | Highcharts.com

I’m looking to have a chart that allows a user to explore a series in a trace through simply clicking on one portion of the chart.

2 Likes
2

hi @adamschroeder ,
Do you know if dash can do this?

Also, this

or this

3

hi @stu

Great question. We can do something similar and a little more convenient than this map effect by creating a modal that would pop up when a country is clicked on. Try clicking the USA.

import dash_bootstrap_components as dbc
from dash import Dash, dcc, Input, Output, State, html, no_update, ctx
import plotly.express as px
from urllib.request import urlopen
import json
import pandas as pd

with urlopen('https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json') as response:
    counties = json.load(response)

df_us = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/fips-unemp-16.csv",
                   dtype={"fips": str})


df = px.data.gapminder().query("year==2007")
fig = px.choropleth(df, locations="iso_alpha",
                    color="lifeExp", 
                    hover_name="country", 
                    color_continuous_scale=px.colors.sequential.Plasma)


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

modal = html.Div(
    [
        dcc.Graph(id='my-map', figure=fig),
        dbc.Modal(
            [
                dbc.ModalHeader(dbc.ModalTitle("Map of x Country")),
                dbc.ModalBody(dcc.Graph(id='my-country-map', figure=fig)),
                dbc.ModalFooter(
                    dbc.Button(
                        "Close", id="close", className="ms-auto", n_clicks=0
                    )
                ),
            ],
            id="modal",
            is_open=False,
            fullscreen=True
        ),
    ]
)

app.layout = dbc.Container([
    modal,
    html.Div(id='divs')
])


@app.callback(
    Output("modal", "is_open"), Output("my-country-map", "figure"),
    Input("my-map", "clickData"), Input("close", "n_clicks"),
    State("modal", "is_open")
)
def toggle_modal(mapclicked, n2, is_open):
    if ctx.triggered_id == 'my-map':
        if mapclicked['points'][0]['hovertext'] == "United States":
            country_specific_map = px.choropleth(df_us, geojson=counties, locations='fips', color='unemp',
                                color_continuous_scale="Viridis",
                                range_color=(0, 12),
                                scope="usa",
                                labels={'unemp': 'unemployment rate'}
                                )
            country_specific_map.update_layout(margin={"r": 0, "t": 0, "l": 0, "b": 0})
        else:
            country_specific_map = {}  # plot a choropleth map of a different country

        return (True, country_specific_map)

    if ctx.triggered_id == 'close':
        return (False, no_update)

    return is_open, no_update



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