Klik om een andere plot bij te werken

De hover-naar-update-plot viel erg in de smaak. Wat een magie! Met jouw werk maak je van vermoeide, statische visualisaties echte belevingen.

Er is een verzoek binnengekomen om het dashboard dat je in de vorige les hebt gemaakt aan te passen. De rapportagehiërarchie van het e-commercebedrijf loopt van land, naar hoofdcategorie, naar subcategorie. Daarom hebben ze liever dat de hover de onderste staafgrafiek niet bijwerkt.

In plaats daarvan vragen ze of je op de staafgrafiek van de hoofdcategorie kunt klikken om daarmee de staafgrafiek eronder bij te werken. Dit is gewenst omdat men wil begrijpen hoe het aandeel van de verkoop per hoofdcategorie verschilt tussen landen.

Dankzij je recente werk met clicks en hovers weet je precies hoe je dit implementeert!

Deze oefening maakt deel uit van de cursus

Dashboards bouwen met Dash en Plotly

Bekijk cursus

Oefeninstructies

Zorg dat 'Major Category' beschikbaar is in de klikdata door het toe te voegen aan de parameter custom_data van de staafgrafiek voor hoofdcategorieën onder regel 37.
Zet onder regel 45 een callback op die de minor_cat-grafiek bijwerkt wanneer er op een staaf in de major_cat-grafiek wordt geklikt.

Interactieve oefening met praktijkervaring

Probeer deze oefening door deze voorbeeldcode aan te vullen.

from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px
import pandas as pd
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
ecom_country = ecom_sales.groupby('Country')['OrderValue'].agg(['sum', 'count']).reset_index().rename(columns={'count':'Sales Volume', 'sum':'Total Sales ($)'})
ecom_scatter = px.scatter(ecom_country, x='Total Sales ($)', y='Sales Volume', color='Country', width=350, height=550, custom_data=['Country'])
ecom_scatter.update_layout({'legend':dict(orientation='h', y=-0.7,x=1, yanchor='bottom', xanchor='right')})

app = Dash()

app.layout = [
  html.Img(src=logo_link, style={'margin':'30px 0px 0px 0px'}),
  html.H1('Sales breakdowns'),
  html.Div([
    html.H3('Sales Volume vs Sales Amount by Country'),
    dcc.Graph(id='scatter', figure=ecom_scatter)],
    style={'width':'350px', 'height':'650px', 'display':'inline-block', 
           'vertical-align':'top', 'border':'1px solid black', 'padding':'20px'}),
  html.Div([
    dcc.Graph(id='major_cat'),
    dcc.Graph(id='minor_cat')],
    style={'width':'700px', 'height':'650px','display':'inline-block'})
]

@callback(
    Output('major_cat', 'figure'),
    Input('scatter', 'hoverData'))

def update_major_cat_hover(hoverData):
    hover_country = 'Australia'
    if hoverData:
        hover_country = hoverData['points'][0]['customdata'][0]
    major_cat_df = ecom_sales[ecom_sales['Country'] == hover_country]
    major_cat_agg = major_cat_df.groupby('Major Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
    ecom_bar_major_cat = px.bar(major_cat_agg, x='Total Sales ($)',
                                # Ensure the Major Category will be available
                                ____=['Major Category'],
                                y='Major Category', height=300, 
                                title=f'Sales by Major Category for: {hover_country}', color='Major Category',
                                color_discrete_map={'Clothes':'blue','Kitchen':'red', 'Garden':'green', 'Household':'yellow'})
    ecom_bar_major_cat.update_layout({'margin':dict(l=10,r=15,t=40,b=0), 'title':{'x':0.5}})
    return ecom_bar_major_cat

# Set up a callback for click data
@callback(
    Output('minor_cat', 'figure'),
    Input('____', '____'))

def update_major_cat_click(clickData):
    click_cat = 'All'
    major_cat_df = ecom_sales.copy()
    total_sales = major_cat_df.groupby('Country')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
    if clickData:
        click_cat = clickData['points'][0]['customdata'][0]
    major_cat_df = ecom_sales[ecom_sales['Major Category'] == click_cat]
    country_mj_cat_agg = major_cat_df.groupby('Country')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
    country_mj_cat_agg['Sales %'] = (country_mj_cat_agg['Total Sales ($)'] / total_sales['Total Sales ($)'] * 100).round(1)
    ecom_bar_country_mj_cat = px.bar(country_mj_cat_agg, x='Sales %', y='Country', 
                                     orientation='h', height=450, range_x = [0,100], text='Sales %', 
                                     title=f'Global Sales % by Country for Major Category: {click_cat}')
    ecom_bar_country_mj_cat.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}, 'title':{'x':0.5}})
    return ecom_bar_country_mj_cat  

if __name__ == '__main__':
    app.run(debug=True)

Code bewerken en uitvoeren