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.
This exercise is part of the course
Building Dashboards with Dash and Plotly
Exercise instructions
- Add the company logo using the
logo_link
URL below line13
. - After the provided text on line
20
, add thetop_country
variable in bold. - Below line
24
, add the company copyright notice' Copyright E-Com INC'
in italics.
Hands-on interactive exercise
Have a go at this exercise by completing this sample 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)