EmpezarEmpieza gratis

Controlar la disposición de objetos

Tu trabajo con Dash está teniendo un gran impacto en tu organización. Sin embargo, un colega te ha contactado por un problema que tiene con uno de sus paneles. El panel que tiene en mente coloca el logotipo de la empresa en la parte superior, seguido de dos gráficos de barras uno al lado del otro.

Pero el logotipo está demasiado pegado a la parte superior y los gráficos aparecen apilados uno encima del otro. ¡Vaya lío!

Crees que puedes usar tus conocimientos de CSS para colocar estos elementos en su sitio.

Este ejercicio forma parte del curso

Creación de paneles con Dash y Plotly

Ver curso

Instrucciones del ejercicio

  • Añade un margin de 30px solo en la parte superior del logotipo debajo de la línea 15 y deja el resto de lados sin margen.
  • Añade estilos a ambos gráficos debajo de la línea 19 para que aparezcan uno al lado del otro.

ejercicio interactivo práctico

Prueba este ejercicio completando este código de ejemplo.

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