CommencezCommencez gratuitement

Ajout de logos et de notes

Même si une image (ou un graphique !) vaut mille mots, il arrive qu'un tableau de bord ait besoin de notes explicatives supplémentaires. Heureusement, vous avez travaillé vos habiletés pour ajouter et formater du texte, ainsi que des images et davantage de structure dans vos applications Dash.

Créons un tableau de bord qui inclut le logo de l'entreprise, un seul graphique et quelques brèves notes explicatives.

Cette activité fait partie du cours

Créer des tableaux de bord avec Dash et Plotly

Voir le cours

Instructions de l’exercice

  • Ajoutez le logo de l'entreprise en utilisant l'URL logo_link sous la ligne 13.
  • Après le texte fourni à la ligne 20, ajoutez la variable top_country en gras.
  • Sous la ligne 24, ajoutez l'avis de droit d'auteur de l'entreprise ' Copyright E-Com INC' en italique.

Exercice interactif pratique

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

from dash import Dash, dcc, html
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/2bac9433b0e904735feefa26ca913fba187c0d55/e_com_logo.png'
ecom_bar = ecom_sales.groupby('Country')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)').sort_values(by='Total Sales ($)', ascending=False)
top_country = ecom_bar.loc[0]['Country']            
bar_fig_country = px.bar(ecom_bar, x='Total Sales ($)', y='Country', color='Country', color_discrete_map={'United Kingdom':'lightblue', 'Germany':'orange', 'France':'darkblue', 'Australia':'green', 'Hong Kong':'red'})         
    
app = Dash()

app.layout = [
  # Add the company logo
  html.____(src=____),
  html.H1('Sales by Country'),
  dcc.Graph(
    figure=bar_fig_country,
    style={'width':'750px', 'margin':'auto'}),
  html.Span(children=[
    # Add the top country text
    'This year, the most sales came from: ', 
    html.____(____),
    html.Br(),
    # Italicize copyright notice
    html.____(' Copyright E-Com INC')])
    ]

if __name__ == '__main__':
    app.run(debug=True)
Modifier et exécuter le code