CommencerCommencez gratuitement

Ajouter des logos et des notes

Une image (ou un graphique !) vaut mille mots, mais un tableau de bord a parfois besoin de notes plus explicatives. Heureusement, vous avez travaillé vos compétences 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.

Cet exercice fait partie du cours

<cours>Créer des tableaux de bord avec Dash et Plotly</cours>
Voir le cours

Instructions de l’exercice

  • Ajoutez le logo de l’entreprise avec 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 la mention 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