Aan de slagBegin gratis

Logo's en notities toevoegen

Een beeld (of een grafiek!) zegt meer dan duizend woorden, maar soms heeft een dashboard extra toelichting nodig. Gelukkig heb je geoefend met het toevoegen en opmaken van tekst, evenals afbeeldingen en extra structuur in je Dash-apps.

Laten we een dashboard maken met het bedrijfslogo, één grafiek en korte toelichtende notities.

Deze oefening maakt deel uit van de cursus

Dashboards bouwen met Dash en Plotly

Bekijk cursus

Oefeninstructies

  • Voeg het bedrijfslogo toe met de URL logo_link onder regel 13.
  • Voeg na de gegeven tekst op regel 20 de variabele top_country toe in vet.
  • Voeg onder regel 24 de auteursrechtmelding van het bedrijf ' Copyright E-Com INC' toe in cursief.

Interactieve oefening met praktijkervaring

Probeer deze oefening door deze voorbeeldcode aan te vullen.

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)
Code bewerken en uitvoeren