CommencerCommencer gratuitement

Controlling object layout

Your work with Dash is really having an impact in your organization. However, a colleague has contacted you about an issue they are having with one of their dashboards. Their envisioned dashboard has the company logo at the top, followed by two bar charts next to each other.

But the logo is too close to the top, and the graphs are stacked on top of each other. What a mess!

You think you can use your knowledge of CSS to help wrangle these objects into place.

Cet exercice fait partie du cours

Building Dashboards with Dash and Plotly

Afficher le cours

Instructions

  • Add a 30px margin to the top only of the logo below line 15 and leave all other sides without any margin.
  • Add styling to both graphs below line 19 so they appear side-by-side.

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/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
ecom_bar_major_cat = ecom_sales.groupby('Major Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
ecom_bar_minor_cat = ecom_sales.groupby('Minor Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
bar_fig_major_cat = px.bar(ecom_bar_major_cat, x='Total Sales ($)', y='Major Category', color='Major Category', color_discrete_map={'Clothes':'blue','Kitchen':'red','Garden':'green','Household':'yellow'})
bar_fig_minor_cat = px.bar(ecom_bar_minor_cat, x='Total Sales ($)', y='Minor Category')                    

app = Dash()

app.layout = [
	html.Img(src=logo_link,
		# Add margin to the logo
		style={'margin':'____ ____ ____ ____'}),
	html.H1('Sales breakdowns'),
	dcc.Graph(
		# Style the graphs to appear side-by-side
		figure=bar_fig_major_cat,
		style={'display':'____', 'width': '49%'}),
	dcc.Graph(
		figure=bar_fig_minor_cat,
		style={'display':'____', 'width': '49%'}), 
  ]

if __name__ == '__main__':
    app.run(debug=True)
Modifier et exécuter le code