Makeover: El INE y las tarifas hoteleras
Tabla de contenido
Con este post comienzo una serie de posts para ofrecer alternativas y makeovers de visualizaciones y gráficos que voy encontrando por la web.
El objetivo es tratar de mejorar en la medida de lo posible la transmisión de información y mensajes con gráficos y datos, al mismo tiempo que practico en distintas plataformas y herramientas de análisis y visualización como Tableau, Vega u Observable.
Tarifa media por habitación ocupada según categorías#
En este primer post, voy a trabajar partiendo de este gráfico de la nota de prensa del INE sobre la Coyuntura Turística Hotelera en noviembre de 2023 que muestra la tarifa media diaria por habitación ocupada según las categorías de hotel entre noviembre de 2022 y noviembre de 2023.
¿Qué se puede mejorar del gráfico?#
El gráfico cuenta con distintos elementos de buenas prácticas en visualización de datos que son mejorables.
- Las categorías de hoteles escritas en vertical las hacen difíciles de leer.
- No hay elementos que ayuden al lector a centrar la atención.
- El título y subtítulo podrían aportar más información o captar más la atención.
- El uso del color es también mejorable.
Vamos a ver cómo podríamos visualizar esa misma información con Vega-Lite.
¿Qué es Vega?#
Vega (y Vega-Lite) es una gramática para gráficos interactivos. Utiliza una sintaxis JSON para crear visualizaciones para el análisis y presentación de datos. Además, permite al usuario personalizar y componer visualizaciones en capas o vistas múltiples e interactivas.
Una de las características clave de Vega es que todo se realiza codificando en JSON, lo cual para algunos puede ser una ventaja o un inconveniente. Pero si hay que destacar una ventaja de Vega es que, al tener que escribir código podemos personalizar casi cualquier elemento de la visualización.
Las principales desventajas, como os podréis imaginar, son principalmente el tiempo que lleva aprender la gramática, y el tiempo que lleva crear una visualización nueva o modificar una ya existente.
Alternativa del gráfico del INE en Vega#
Al trabajar con Vega uno empieza a apreciar aún más las cosas que se pueden hacer con plataformas como Tableau, especialmente en cuanto a la rapidez y falicidad que ofrecen en el análisis y la visualización de datos.
Y para muestra, aquí está el código JSON para la visualización de Vega que he creado.
{"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"config": {
"view": {
"stroke": null
},
"legend": {
"symbolOpacity": 1,
"orient": "bottom-right" ,
"direction": "horizontal"
},
"locale": {"number": {"currency": ["", "\u00a0€"], "decimal": ".", "grouping": [3], "thousands": ","}}
},
"description": "Info from https://ine.es/daco/daco42/prechote/cth1123.pdf",
"width": 500,
"height": 500,
"title": {
"text": "¿Cuál es la tarifa media diaria por habitación ocupada según la categoría de hotel?",
"anchor": "start",
"fontSize": 16,
"subtitle": "Evolución entre noviembre de 2022 y noviembre de 2023",
"subtitleFontStyle": "italic",
"subtitleFontSize": 12,
"subtitlePadding": 6,
"dy": -10
},
"data": {
"values": [
{"Tipo": "5 estrellas de oro", "Fecha": "2023-11-01", "Tarifa media por habitación ocupada": 228.6, "Orden": 1},
{"Tipo": "4 estrellas de oro", "Fecha": "2023-11-01", "Tarifa media por habitación ocupada": 109.6, "Orden": 2},
{"Tipo": "3 estrellas de oro", "Fecha": "2023-11-01", "Tarifa media por habitación ocupada": 82.6, "Orden": 3},
{"Tipo": "2 estrellas de oro", "Fecha": "2023-11-01", "Tarifa media por habitación ocupada": 64.5, "Orden": 4},
{"Tipo": "1 estrella de oro", "Fecha": "2023-11-01", "Tarifa media por habitación ocupada": 69.5, "Orden": 5},
{"Tipo": "3 y 2 de plata", "Fecha": "2023-11-01", "Tarifa media por habitación ocupada": 61.8, "Orden": 6},
{"Tipo": "1 de plata", "Fecha": "2023-11-01", "Tarifa media por habitación ocupada": 55.1, "Orden": 7},
{"Tipo": "5 estrellas de oro", "Fecha": "2022-11-01", "Tarifa media por habitación ocupada": 209.4, "Orden": 1},
{"Tipo": "4 estrellas de oro", "Fecha": "2022-11-01", "Tarifa media por habitación ocupada": 100.6, "Orden": 2},
{"Tipo": "3 estrellas de oro", "Fecha": "2022-11-01", "Tarifa media por habitación ocupada": 72.5, "Orden": 3},
{"Tipo": "2 estrellas de oro", "Fecha": "2022-11-01", "Tarifa media por habitación ocupada": 60.4, "Orden": 4},
{"Tipo": "1 estrella de oro", "Fecha": "2022-11-01", "Tarifa media por habitación ocupada": 59.1, "Orden": 5},
{"Tipo": "3 y 2 de plata", "Fecha": "2022-11-01", "Tarifa media por habitación ocupada": 57.0, "Orden": 6},
{"Tipo": "1 de plata", "Fecha": "2022-11-01", "Tarifa media por habitación ocupada": 47.8, "Orden": 7}
]
},
"encoding": {
"x": {
"field": "Tarifa media por habitación ocupada",
"type": "quantitative",
"scale": {"domain": [0,240]},
"axis": {
"domain": true,
"tickBand": "center",
"grid": true,
"gridOpacity": 0.3,
"ticks": false,
"labelFlush": false,
"labelColor": "lightgrey",
"domainColor": "lightgrey",
"domainOpacity": 0.3,
"tickCount": 13,
"title": "Tarifa media diaria por habitación ocupada (€)",
"titleFontWeight": "normal",
"titleColor": "lightgrey",
"titleOpacity": 1,
"titleFontSize": 13
}
},
"y": {
"field": "Tipo",
"type": "nominal",
"sort": {
"field": "Orden",
"op": "min",
"order": "ascending"
},
"axis": {
"ticks": false,
"title": null,
"domain": false,
"labelPadding": 5,
"labelFontSize": 12
}
},
"color": {
"type": "nominal",
"scale": {"domain": ["Nov. 2023", "Nov. 2022"], "range": ["#952138", "grey"]}
}
},
"layer": [
{
"mark": {
"type": "bar",
"height": {"band": 0.7},
"opacity": 0.5
},
"transform": [{"filter": {"field": "Fecha", "equal": "2022-11-01"}}],
"encoding": {
"color": {"datum": "Nov. 2022"},
"tooltip": [
{"field": "Tipo", "title": "Categoría de hotel"},
{"field": "Tarifa media por habitación ocupada", "title": "Tarifa media diaria por habitación ocupada nov. 2022", "type": "quantitative", "format": "$.1f"}]
}
},
{
"mark": {
"type": "text",
"align": "right",
"dx": -5,
"dy": -30,
"fontSize": 9
},
"transform": [{"filter": {"field": "Fecha", "equal": "2022-11-01"}}],
"encoding": {
"color": {"datum": "Nov. 2022"},
"text": {"field": "Tarifa media por habitación ocupada", "format": "$.1f"}
}
},
{
"mark": {
"type": "bar",
"height": {"band": 0.4}
},
"transform": [{"filter": {"field": "Fecha", "equal": "2023-11-01"}}],
"encoding": {
"color": {"datum": "Nov. 2023"},
"tooltip": [
{"field": "Tipo", "title": "Categoría de hotel"},
{"field": "Tarifa media por habitación ocupada", "title": "Tarifa media diaria por habitación ocupada nov. 2023", "type": "quantitative", "format": "$.1f"}]
}
},
{
"mark": {
"type": "text",
"align": "left",
"dx": 5,
"fontSize": 12
},
"transform": [{"filter": {"field": "Fecha", "equal": "2023-11-01"}}],
"encoding": {
"color": {"datum": "Nov. 2023"},
"text": {"field": "Tarifa media por habitación ocupada", "format": "$.1f"}
}
}
]}
Y este es el resultado. Se puede además pasar el ratón por cada una de las barras para más detalles de los datos.
Lo que he intentado hacer es lo siguiente:
- Hacer el gráfico algo más interesante desde el inicio comenzando con una pregunta en el título y un subtítulo que añada más contexto sobre lo que el gráfico quiere comunicar.
- Mejorar la legibilidad del gráfico con barras horizontales en vez de verticales.
- Usar el color para destacar mucho más los datos recientes, de noviembre de 2023 respecto a los de 2022.
- Centrar aún más la atención en los datos de 2023 con etiquetas de valores más grandes.
- Facilitar la comparación de ambos años con un gráfico de bala, o de barras superpuestas en lugar de barras en paralelo. De esta forma es más rápido ver que la tarifa de los hoteles de 5 estrellas de oro ha aumentado más que en la de 2 estrellas de oro, por ejemplo.
- Añadir contexto con líneas y ejes, pero evitando que capten demasiado la atención con tonos grises y mayor opacidad.