IniziaInizia gratis

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.

Questo esercizio fa parte del corso

Building Dashboards with Dash and Plotly

Visualizza il corso

Istruzioni dell'esercizio

  • 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.

Esercizio pratico interattivo

Prova a risolvere questo esercizio completando il codice di esempio.

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)
Modifica ed esegui il codice