Cliquer pour mettre à jour un autre graphique

Le graphique mis à jour au survol a été très bien accueilli. Quelle magie ! Votre travail transforme de vieilles visualisations statiques en véritables expériences.

On vous demande toutefois de modifier le tableau de bord créé à la leçon précédente. La hiérarchie des rapports de l'entreprise de commerce électronique part du pays, puis passe à la grande catégorie, puis à la sous-catégorie. Par conséquent, on préférerait que le survol ne mette pas à jour l'histogramme du bas.

À la place, on se demande s'il serait possible de cliquer sur l'histogramme des grandes catégories pour qu'il mette à jour l'histogramme en dessous. Cette demande vise à mieux comprendre comment la proportion des ventes par grande catégorie varie d'un pays à l'autre.

Grâce à votre travail récent sur les clics et les survols, vous savez exactement comment l'implanter !

Cette activité fait partie du cours

Créer des tableaux de bord avec Dash et Plotly

Voir le cours

Instructions de l’exercice

Assurez-vous que 'Major Category' soit disponible dans les données de clic en l'ajoutant au paramètre custom_data de l'histogramme des grandes catégories sous la ligne 37.
Configurez un rappel sous la ligne 45 qui met à jour le graphique minor_cat lorsqu'on clique sur une barre du graphique major_cat.

Exercice interactif pratique

Essayez cet exercice en complétant ce code d’exemple.

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)

Modifier et exécuter le code