Tu primera gráfica en Vega-Lite: data, mark y encoding

La mancuerna de la página anterior combinaba tres capas para comparar la meta con las ventas reales. Para escribir tus propias gráficas en Vega-Lite, conviene empezar con una sola marca y ver cómo responde cada pieza cuando la editas.

Una especificación se lee de arriba abajo como una receta corta escrita en JSON. Aquí tienes la más sencilla del curso: las ventas del semestre de cada sucursal de Café La Ceiba dibujadas como barras verticales.

Toda la gráfica descansa en tres propiedades principales dentro de las llaves:

• data indica de dónde salen las filas. En Deneb la tabla siempre se llama dataset, porque así nombra Power BI al conjunto de columnas y medidas que arrastras al visual.
• mark define qué figura geométrica se dibuja con los datos. Escribir "bar" pide una barra por cada sucursal.
• encoding conecta tus columnas con los canales visuales de la gráfica. El canal x recibe el campo Sucursal como categoría ("nominal"), y el canal y recibe la suma del campo Ventas como número ("quantitative").

Fíjate en la propiedad "aggregate": "sum" dentro del eje y. La tabla del curso tiene 108 filas en total: seis sucursales por seis meses (de enero a junio de 2026) por tres categorías (Bebidas calientes, Bebidas frías y Panadería). Eso significa que cada sucursal aparece 18 veces. Al pedir "sum", Vega-Lite suma esas 18 filas y dibuja una sola barra con el total del semestre para cada sucursal. En el módulo siguiente verás por qué conviene dejar esa instrucción explícita incluso cuando trabajas con medidas de Power BI.

En el editor de abajo tienes esos mismos datos, pero alguien eligió la marca equivocada. Haz los tres cambios que pide el ejercicio y observa cómo cambia la gráfica en vivo.

Lo que cambia cuando cambias la marca

Cambiar la palabra que va en mark transforma la relación que el lector busca entre los datos, aunque los números detrás sean idénticos:

• "line" (línea) une un valor con el siguiente mediante un trazo continuo. Quien la mira entiende que existe una secuencia y busca subidas, caídas o tendencias. Tiene sentido cuando el eje muestra tiempo, como la columna Mes de enero a junio. Cuando el eje tiene sucursales, la línea inventa un recorrido falso entre ciudades que no guardan ningún orden entre sí.
• "bar" (barra) parte desde el cero hasta llegar al valor de cada categoría. El ojo compara el largo de cada barra con facilidad, por lo que funciona muy bien para contrastar totales entre sucursales o entre categorías de producto.
• "point" (punto) coloca una marca individual en la posición exacta del valor sin rellenar el espacio desde cero. Resulta útil cuando el cero queda lejos de los valores que comparas, o cuando quieres poner dos medidas en el mismo renglón sin que una tape a la otra, como hiciste con Meta y Ventas en la mancuerna.

Además de estas tres, Vega-Lite incluye marcas para otras tareas que usarás más adelante en el curso: rule (un trazo recto, ideal para unir dos puntos o marcar un umbral), area (área bajo una línea), tick (una pequeña raya para marcar posición), text (etiquetas de texto con el valor), rect (rectángulos para mapas de calor) y arc (arcos para gráficas de dona o pastel).

También viste en el ejercicio el efecto de agregar "sort": "-y" dentro del canal x. Sin esa línea, Vega-Lite acomoda las sucursales en orden alfabético; con "-y", las ordena de mayor a menor según el valor del eje y, dejando a CDMX Roma al principio para que cualquiera identifique de un vistazo cuál sucursal vendió más. Si no sabes qué marca le queda mejor a tu pregunta, cuéntale a tu Maestro qué quieres comparar. Si quieres ordenar de menor a mayor o cambiar las barras a horizontales, pregúntale a tu Maestro cómo se escribe.

Cuando la especificación se rompe

Al editar especificaciones a mano es normal equivocarse con un signo de puntuación o una letra. Tanto el editor de esta página como el de Deneb dentro de Power BI te ayudan de dos maneras: mantienen visible la última versión de la gráfica que sí funcionó y te indican en qué línea y columna dejó de entenderse el código.

Al escribir JSON para Vega-Lite te vas a topar sobre todo con tres tropiezos:

1. Una coma después del último elemento. En JSON las comas separan elementos de una lista, pero el último elemento antes de cerrar una llave } nunca lleva coma al final. Si escribes "type": "nominal", }, el formato se rompe.
2. Nombres de propiedad sin comillas dobles. En JSON todas las claves van entre comillas dobles. Escribir { field: "Sucursal" } en lugar de { "field": "Sucursal" } detiene el dibujo de inmediato.
3. Un nombre de campo que no coincide letra por letra con tus datos. Si escribes "Categoria" sin acento cuando la columna se llama Categoría, o escribes "ventas" con minúscula en vez de "Ventas", el archivo JSON está bien formado y el editor lo acepta sin marcar error de sintaxis. Sin embargo, la gráfica aparece en blanco o sin ejes porque Vega-Lite busca una columna que la tabla dataset no tiene. En Power BI este detalle ocurre a menudo, ya que Deneb distingue mayúsculas, acentos y espacios tal como aparecen en el visual.

Inténtalo

En el editor de arriba, rompe la especificación a propósito con dos pruebas rápidas:

1. Borra las comillas que cierran la palabra "bar" (para que quede "bar), mira qué pasa abajo del código y en la gráfica, y vuelve a ponerlas.
2. Cambia "Ventas" por "ventas", con minúscula inicial, y vuelve a mirar el código y la gráfica. Luego regresa el nombre a "Ventas".

¿Qué fue distinto entre los dos resultados y por qué? Si rompiste la especificación y no encuentras dónde quedó el error, pégala en el chat con tu Maestro.