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

Este ejercicio forma parte del curso

Building Dashboards with Dash and Plotly

Ver curso

Instrucciones del ejercicio

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

Ejercicio interactivo práctico

Prueba este ejercicio y completa el código de muestra.

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)
Editar y ejecutar código