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

Junta tres gráficas en un tablero con Altair, con la meta a la vista, a partir de los datos de la clínica.

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 tablero.

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 tablero.

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

Tres piezas y dos formas de juntarlas

Ejemplo resuelto · 4 pasos

Tienes las gráficas del tablero 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 tablero 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 tablero 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 tablero 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 %.

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 tablero 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 tablero solo muestra la primera gráfica.
tendencia

La gráfica se vuelve a dibujar cuando haces una pausa, o al momento con Ejecutar. Ctrl+Enter ejecuta tu código. Tab agrega sangría; para salir del editor, presiona Escape y luego Tab.

Listo para ejecutar tu código.

Datos: citas-clinica, 117 filas

Enter guarda una celda y Escape la deja como estaba. Deja una celda vacía para un valor faltante.

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

Ejecútalo tú

Lee tu tablero 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 reprogramar ahí es difícil y las llamadas de confirmación, que evitan el hueco antes de que pase, valen más ahí que en ningún otro lado.

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 tablero.

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

En la vida real, este tablero se actualiza solo cada lunes. Aquí la semana está escrita en el código para que veas exactamente qué se filtra. 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 tablero lo diga.

Comprueba lo que sabes: Con el tablero que armaste, ¿a qué sede debería mandar Lucía las llamadas de confirmación esta semana, y qué dos gráficas usas para decidirlo?

Responde tú