Conceptos de dashboards
Combine gráficos en dashboards
Conceptos de dashboards es una lección gratuita de Python Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Python Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Python Academy incluye 4 lecciones en total.
De los gráficos a los dashboards
Un solo gráfico responde a una pregunta. Un dashboard organiza varios gráficos relacionados para que el usuario pueda supervisar una situación completa de un vistazo.
Para crear uno, debe decidir qué gráficos deben aparecer juntos, cómo distribuirlos y cómo se relacionan.
Subgráficos en Plotly
Para colocar varios gráficos de Plotly en una sola figura, use make_subplots(rows, cols) de plotly.subplots. Después, añada cada traza a una celda concreta con fig.add_trace(trace, row=1, col=2).
Este es el equivalente de Plotly a la cuadrícula de subgráficos de Matplotlib.
Planificar la cuadrícula
Antes de programar, esboce la cuadrícula. Decida cuántas filas y columnas habrá y qué debe aparecer en cada celda. La aritmética es la misma que en cualquier distribución en cuadrícula.
panels = ['Revenue trend', 'Top products', 'Region map', 'Conversion %']
rows, cols = 2, 2
for i, p in enumerate(panels):
r = i // cols + 1
c = i % cols + 1
print('row', r, 'col', c, '->', p)Tipos de gráficos combinados
Un dashboard suele combinar tipos: una línea para las tendencias, barras para las clasificaciones y un número para una métrica clave. make_subplots puede contenerlos todos, y puede establecer los tipos de cada celda con el argumento specs (por ejemplo, un gráfico circular necesita type='domain').
Tarjetas de KPI
Los dashboards suelen comenzar con números grandes individuales: los KPI. La traza Indicator de Plotly muestra un valor, una diferencia opcional respecto a un objetivo y un indicador.
La diferencia es simplemente el valor actual menos el anterior.
current = 1280
previous = 1150
delta = current - previous
pct = delta / previous * 100
print('Value:', current)
print('Delta:', '+' + str(delta), '(' + format(pct, '.1f') + '%)')Títulos y diseño compartidos
Asigne al dashboard un título general con fig.update_layout(title_text='Sales Dashboard') y títulos para cada panel mediante el argumento subplot_titles de make_subplots. Un diseño coherente hace que los paneles parezcan un solo producto.
Dash para dashboards web
Para dashboards web interactivos con menús desplegables y filtros, el framework hermano de Plotly, Dash, es el estándar. Combina las figuras de Plotly con controles HTML y callbacks que actualizan los gráficos cuando cambian las entradas.
Para los informes basta con una figura estática de subgráficos; Dash está pensado para aplicaciones en directo.
Callbacks: la idea central
Un callback de Dash asigna entradas (como el valor de un menú desplegable) a salidas (como un gráfico). Cuando cambia la entrada, la función se ejecuta de nuevo y devuelve una figura nueva. El patrón consiste en introducir una entrada y obtener una figura.
def update_chart(selected_region):
data = {'North': [1, 2, 3], 'South': [3, 2, 1]}
series = data.get(selected_region, [])
return {'region': selected_region, 'values': series}
print(update_chart('North'))
print(update_chart('South'))Principios de diseño
Los buenos dashboards siguen una jerarquía:
- Los KPI más importantes aparecen arriba a la izquierda, donde se dirige primero la mirada
- Debajo se sitúan los gráficos con información de apoyo
- Se usan colores coherentes para que una serie signifique lo mismo en todas partes
Evite sobrecargar el diseño; el espacio en blanco facilita la comprensión.
Consideraciones de rendimiento
Muchos gráficos y conjuntos de datos grandes pueden hacer que un dashboard sea lento. Agregue los datos antes de graficarlos, limite el número de puntos y vuelva a calcular solo los paneles cuyas entradas hayan cambiado. Los dashboards ágiles se utilizan; los lentos se abandonan.
Filtros y filtrado cruzado
Los dashboards avanzados permiten que una selección actualice varios gráficos a la vez; esto se denomina filtrado cruzado. Al hacer clic en una región del mapa, los paneles de tendencias y clasificaciones se filtran para mostrar esa región.
En Dash, esto se conecta mediante callbacks; el valor seleccionado se convierte en la entrada que leen todos los gráficos dependientes.
Comprobación rápida
Ponga a prueba sus conceptos sobre dashboards.
Resumen
Ha aprendido cómo se convierten los gráficos en dashboards:
make_subplots(rows, cols)+add_trace(..., row=, col=)para crear una cuadrícula- Combine tipos de gráficos y comience con tarjetas KPI
Indicator - Dash añade controles interactivos mediante callbacks que conectan entradas con figuras
- Siga una jerarquía visual y vigile el rendimiento
Preguntas frecuentes
¿La lección «Conceptos de dashboards» es gratis?
Sí — el texto completo de «Conceptos de dashboards» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Python Academy, actualiza a CoddyKit PRO. El curso de Python Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Conceptos de dashboards»?
Combine gráficos en dashboards Practicas Python Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Python Academy?
No se requiere experiencia previa. Python Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Conceptos de dashboards»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Python Academy?
Sí. Cada lección de Python Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Conceptos básicos de Plotly Express
- Funciones interactivas
- Conceptos de dashboards
- Exportación e incrustación