¿Cómo armo un dashboard con varias gráficas? Arma el tuyo con Altair

Practica capas y composición con tres gráficas de la clínica, y distingue este laboratorio del dashboard completo de decisión.

Curso gratis. Tu Maestro, una IA, .

Ahora lo armas tú. Vas a usar , una biblioteca de Python que describe gráficas: dices qué columna va en cada eje y Altair escribe la gráfica. No necesitas saber Python para este ejercicio: el código de las tres gráficas ya está escrito, y tú decides cómo se juntan en un dashboard.

Si trabajas con otra herramienta (Excel, Power BI, Looker Studio), las mismas ideas se traducen: una gráfica por pregunta, la meta encima de lo que se compara con ella y un acomodo que sigue a la decisión. Aquí las practicas en código porque cada paso queda escrito y se puede revisar, y porque es justo lo que una IA te va a regresar cuando le pidas un dashboard.

Antes del ejercicio, así se construye un dashboard en Altair, paso por paso.

Este es un laboratorio parcial de composición. El ejercicio pone la tendencia arriba para practicar vconcat, hconcat y capas; todavía no incluye la cabecera de cuatro indicadores y sus comparaciones. No es el dashboard completo del orden de lectura anterior. Al terminar, explicarás cómo reordenarlo para la decisión de Lucía.

Tres piezas y dos formas de juntarlas

Ejemplo resuelto · 4 pasos

Tienes las gráficas del dashboard de Lucía. ¿Cómo pones la meta encima de una gráfica y cómo acomodas varias gráficas en una sola pantalla? Intenta adivinar cada paso antes de abrirlo.

Piensa el siguiente paso por tu cuenta y luego ábrelo para comparar.

La diferencia entre el + y las dos funciones es esta: el + pone una cosa encima de otra, en la misma gráfica; hconcat y vconcat ponen gráficas junto a otras, cada una con sus propios ejes. La meta va con +, porque tiene que compartir los ejes con lo que compara. Si no ves cuándo va + y cuándo hconcat, pregúntale a tu Maestro.

Inténtalo

En el editor están las tres gráficas del dashboard de Lucía, ya calculadas con la ficha: la tendencia (con su meta), la inasistencia por sede y la ocupación por sede de la última semana. También están las dos metas, horizontal y vertical. Pero la última línea solo muestra la tendencia.

Cambia esa última línea para que el dashboard tenga la tendencia arriba y, debajo, lado a lado, la inasistencia por sede con la meta encima y la ocupación. Necesitas alt.vconcat, alt.hconcat y un +. Si el dashboard no aparece o sale un error, pégalo a tu Maestro.

Tu turno

Cambia solo la última línea. Junta las gráficas con alt.vconcat y alt.hconcat: la tendencia arriba y, debajo, por_sede con la meta encima (por_sede + meta_vertical) junto a ocupacion. Terminaste cuando ves tres gráficas y la línea punteada cruza las barras de las sedes en 10 %.

Datos: citas-clinica, 117 filas

Los datos del ejercicio, "citas-clinica". Tus cambios corren con tu código.
Fila											Quitar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Página 1 de 6

Tu código (Python)

# Cada gráfica responde una pregunta. Las inasistencias se cuentan

# sobre las citas en pie: agendadas menos canceladas con aviso.

base = alt.Chart(data).transform_calculate(

en_pie="datum.agendadas - datum.canceladas"

)

ultima_semana = "time(datum.semana) == time('2026-09-21T00:00:00Z')"

# Las semanas empiezan en lunes. Marcamos un lunes sí y uno no, en UTC

# (la zona en que vienen las fechas), para que no se corran un día.

lunes = [

alt.DateTime(year=2026, month=m, date=d, utc=True)

for m, d in [(6, 29), (7, 13), (7, 27), (8, 10), (8, 24), (9, 7), (9, 21)]

]

# La meta del 10 %, como línea punteada: horizontal y vertical.

meta_horizontal = base.transform_aggregate(n="count()").mark_rule(strokeDash=[4, 4]).encode(

y=alt.datum(0.10)

)

meta_vertical = base.transform_aggregate(n="count()").mark_rule(strokeDash=[4, 4]).encode(

x=alt.datum(0.10)

)

# 1. ¿Cómo va la clínica contra la meta?

linea = base.transform_aggregate(

inasistencias="sum(inasistencias)", en_pie="sum(en_pie)", groupby=["semana"]

).transform_calculate(

tasa="datum.inasistencias / datum.en_pie"

).mark_line(point=True).encode(

x=alt.X("utcyearmonthdate(semana):T", title="Semana", axis=alt.Axis(format="%d/%m", values=lunes)),

y=alt.Y("tasa:Q", title="Inasistencia", axis=alt.Axis(format="%")),

)

tendencia = (linea + meta_horizontal).properties(width=440, height=150)

# 2. ¿En qué sede está el problema esta semana?

por_sede = base.transform_filter(ultima_semana).transform_aggregate(

inasistencias="sum(inasistencias)", en_pie="sum(en_pie)", groupby=["sede"]

).transform_calculate(

tasa="datum.inasistencias / datum.en_pie"

).mark_bar().encode(

x=alt.X("tasa:Q", title="Inasistencia", axis=alt.Axis(format="%")),

y=alt.Y("sede:N", title=None, sort="-x"),

).properties(width=180, height=100)

# 3. ¿Hay lugar en la agenda para reprogramar?

ocupacion = base.transform_filter(ultima_semana).transform_aggregate(

agendadas="sum(agendadas)", espacios="sum(espacios)", groupby=["sede"]

).transform_calculate(

ocupacion="datum.agendadas / datum.espacios"

).mark_bar().encode(

x=alt.X("ocupacion:Q", title="Ocupación", axis=alt.Axis(format="%"), scale=alt.Scale(domain=[0, 1])),

y=alt.Y("sede:N", title=None, sort=["Cholula", "Centro", "Angelópolis"]),

).properties(width=180, height=100)

# Por ahora el dashboard solo muestra la primera gráfica.

tendencia

# Cada gráfica responde una pregunta. Las inasistencias se cuentan
# sobre las citas en pie: agendadas menos canceladas con aviso.
base = alt.Chart(data).transform_calculate(
    en_pie="datum.agendadas - datum.canceladas"
)
ultima_semana = "time(datum.semana) == time('2026-09-21T00:00:00Z')"

# Las semanas empiezan en lunes. Marcamos un lunes sí y uno no, en UTC
# (la zona en que vienen las fechas), para que no se corran un día.
lunes = [
    alt.DateTime(year=2026, month=m, date=d, utc=True)
    for m, d in [(6, 29), (7, 13), (7, 27), (8, 10), (8, 24), (9, 7), (9, 21)]
]

# La meta del 10 %, como línea punteada: horizontal y vertical.
meta_horizontal = base.transform_aggregate(n="count()").mark_rule(strokeDash=[4, 4]).encode(
    y=alt.datum(0.10)
)
meta_vertical = base.transform_aggregate(n="count()").mark_rule(strokeDash=[4, 4]).encode(
    x=alt.datum(0.10)
)

# 1. ¿Cómo va la clínica contra la meta?
linea = base.transform_aggregate(
    inasistencias="sum(inasistencias)", en_pie="sum(en_pie)", groupby=["semana"]
).transform_calculate(
    tasa="datum.inasistencias / datum.en_pie"
).mark_line(point=True).encode(
    x=alt.X("utcyearmonthdate(semana):T", title="Semana", axis=alt.Axis(format="%d/%m", values=lunes)),
    y=alt.Y("tasa:Q", title="Inasistencia", axis=alt.Axis(format="%")),
)
tendencia = (linea + meta_horizontal).properties(width=440, height=150)

# 2. ¿En qué sede está el problema esta semana?
por_sede = base.transform_filter(ultima_semana).transform_aggregate(
    inasistencias="sum(inasistencias)", en_pie="sum(en_pie)", groupby=["sede"]
).transform_calculate(
    tasa="datum.inasistencias / datum.en_pie"
).mark_bar().encode(
    x=alt.X("tasa:Q", title="Inasistencia", axis=alt.Axis(format="%")),
    y=alt.Y("sede:N", title=None, sort="-x"),
).properties(width=180, height=100)

# 3. ¿Hay lugar en la agenda para reprogramar?
ocupacion = base.transform_filter(ultima_semana).transform_aggregate(
    agendadas="sum(agendadas)", espacios="sum(espacios)", groupby=["sede"]
).transform_calculate(
    ocupacion="datum.agendadas / datum.espacios"
).mark_bar().encode(
    x=alt.X("ocupacion:Q", title="Ocupación", axis=alt.Axis(format="%"), scale=alt.Scale(domain=[0, 1])),
    y=alt.Y("sede:N", title=None, sort=["Cholula", "Centro", "Angelópolis"]),
).properties(width=180, height=100)

# Por ahora el dashboard solo muestra la primera gráfica.
tendencia

Lee tu dashboard como lo leería Lucía el lunes. Arriba: la clínica está arriba de la meta y ha subido en las últimas semanas. Abajo a la izquierda: el problema es Cholula. Abajo a la derecha: Cholula tiene la agenda más llena de las tres (92.6 %), así que hay menos margen para reprogramar. En el caso, Lucía prioriza ahí las llamadas. Que las llamadas eviten faltas y cuánto beneficien a cada sede es una hipótesis de la intervención; estas gráficas no lo prueban.

Esa última lectura es la que ningún número solo te daba: sale de juntar dos gráficas que responden dos preguntas distintas. Para eso sirve un dashboard.

Si quieres seguir, prueba cambiar la semana de ultima_semana por 2026-08-24 y mira cómo se veía Cholula un mes antes, o agrega una cuarta gráfica con la espera promedio por sede. Tu Maestro te ayuda con el código.

Para pensar

Para usarlo cada lunes, define quién actualiza el archivo y cómo se elige la última semana completa. Este ejercicio usa una fecha fija; no configura una actualización automática. Cuando se lo pidas a tu IA en el módulo 4, una de las instrucciones va a ser justo esa: que la semana sea siempre la última completa, y que el dashboard lo diga.

Para convertir este laboratorio en el dashboard de decisión, pondrías arriba la cabecera con los cuatro indicadores y sus comparaciones, después las sedes y su ocupación, y al final la tendencia. Explica por qué ese orden ayuda a Lucía antes de cambiar más código.

Comprueba lo que sabes: Con el dashboard que armaste, ¿qué sede priorizaría Lucía en este caso y qué dos gráficas lo apoyan? Después explica qué cabecera falta y cómo reordenarías las piezas para seguir la decisión.

Responde tú