CommencerCommencer gratuitement

Adding logos and notes

While a picture (or a graph!) is worth a thousand words, sometimes a dashboard needs more explanatory notes. Luckily, you have been working on your skills to add and format text, as well as images and further structure to your Dash apps.

Let's create a dashboard that includes the company logo, a single graph, and some brief explanatory notes.

Cet exercice fait partie du cours

Building Dashboards with Dash and Plotly

Afficher le cours

Instructions

  • Add the company logo using the logo_link URL below line 13.
  • After the provided text on line 20, add the top_country variable in bold.
  • Below line 24, add the company copyright notice ' Copyright E-Com INC' in italics.

Exercice interactif pratique

Essayez cet exercice en complétant cet exemple de code.

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