Aan de slagBegin gratis

De lay-out van objecten bepalen

Je werk met Dash heeft echt impact binnen je organisatie. Een collega heeft je echter benaderd over een probleem met een van hun dashboards. Hun beoogde dashboard heeft het bedrijfslogo bovenaan, gevolgd door twee staafdiagrammen naast elkaar.

Maar het logo staat te dicht tegen de bovenkant aan en de grafieken staan boven op elkaar. Wat een rommel!

Je denkt dat je je kennis van CSS kunt gebruiken om deze objecten op de juiste plek te krijgen.

Deze oefening maakt deel uit van de cursus

Dashboards bouwen met Dash en Plotly

Bekijk cursus

Oefeninstructies

  • Voeg een 30px marge toe aan alleen de bovenkant van het logo onder regel 15 en laat alle andere zijden zonder marge.
  • Voeg styling toe aan beide grafieken onder regel 19 zodat ze naast elkaar verschijnen.

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