Panorámica en 30 segundos: Esta página es un «ejemplo vivo» del sistema de visualización de Taiwan.md: se renderizan los diez módulos visuales de artículo, todos con el mismo conjunto de datos reales de vivienda de Taiwán (ratio precio de la vivienda-ingresos, vivienda pública, vivienda social, comparación internacional). Es la compañera de la guía editorial graph.md: graph.md explica «cuándo usar cada uno, cómo hacerlo bien y cómo escribir la sintaxis»; esta página te muestra directamente «cómo se ve». Cada módulo se renderiza con HTML/SVG puro, de modo que tanto las personas, los lectores de pantalla, Google como los rastreadores de IA leen los mismos datos —y esa es precisamente la razón por la que elegimos visualización estática en lugar de gráficos interactivos.
Cuando escribes un artículo sobre cifras, lo peor que puedes hacer es convertir los datos en un amasijo de números párrafo tras párrafo; el lector desconecta al llegar al tercer porcentaje. El trabajo de la visualización es revertir la entropía de «un prosa densa en cifras» a «una estructura legible de un vistazo».
Pero la visualización de Taiwan.md tiene una disciplina que nadie más tiene: solo hacemos visualizaciones que las LLM también puedan leer. Un gráfico interactivo dibujado con D3 o Canvas es impresionante, pero los rastreadores de IA como GPTBot, PerplexityBot o ClaudeBot no ejecutan JavaScript; para ellos, esa imagen es un espacio en blanco. Los gráficos que hacemos con HTML semántico e SVG en línea tienen los datos en el código fuente, y la IA los lee y cita en seis idiomas los datos en primera persona de Taiwán. Una visualización que las LLM pueden leer es una visualización soberana.
Los diez módulos a continuación, desde el más simple «un número grande» hasta el «gráfico de líneas multiserie», se muestran en orden. La sintaxis completa y los principios de diseño están en graph.md; aquí solo se incluye una frase sobre «qué es esto y cuándo se usa».
Gran cifra tw-figure
El tipo más simple y más potente: poner un número dramático al mayor tamaño posible, con un antes y un después que cuenten una transformación. Ideal como «sledgehammer stat» para abrir el artículo.
Grupo de datos tw-stat
Cuando un párrafo contiene tres o cuatro cifras clave en paralelo, en lugar de escribir una oración larga, es mejor disponerlas en una fila de tarjetas para que el lector las recorra de un vistazo.
Tarjeta comparativa tw-versus
Comparación punto a punto de dos sistemas, dos posiciones o dos estados sucesivos. Color cálido a la izquierda, color frío a la derecha, un «vs» en el medio, para que las diferencias se lean línea a línea.
Barras de proporción tw-bars
Comparación o clasificación de valores para un número reducido de categorías; la longitud de las barras horizontales se escala automáticamente según el valor, con el máximo ocupando todo el ancho. Recuerda añadir una última fila 來源： en el módulo de datos; se convierte automáticamente en la nota de fuente inferior.
Diagrama de cuadrícula tw-waffle
Composición proporcional de una parte respecto al total: cien casillas representan cien por ciento, más intuitivo que un gráfico circular —puedes contar las casillas de verdad. Adecuado para datos donde «cuánto ocupa cada categoría» suma aproximadamente 100.
Eje de políticas tw-timeline
Contexto de los nodos clave de un sistema o política, conectados en una línea temporal de nodos. Ojo: esto es un «apoyo visual»; no es lo mismo que usar la cronología como subtítulo principal («En 1975…») en el cuerpo del texto.
Tarjeta de cita tw-quote
Cuando una frase puede representar la tensión central de todo el artículo, amplifícala como tarjeta de cita. La cita no necesita comillas añadidas por el autor; el módulo las añade. La cita debe ser textual y verificable.
Una casa valorada en 30 millones de yuanes se convierte en una casa de 60 a 70 millones de yuanes… robar a los pobres para dar a los ricos, el Estado paga para que los ricos reformen sus casas
Barra de fuentes tw-source
Concentra las fuentes de datos de un análisis en un chip discreto, colocado junto al párrafo. La curaduría de la credibilidad es parte del trabajo —los medios digitales de Taiwán a menudo olvidan citar las fuentes; esto es algo que podemos hacer diferente.
Plataforma de Información Inmobiliaria del Ministerio del Interior, Registro de Precios Reales, Centro de Investigación Inmobiliaria de la Universidad Nacional Chengchi, Gaceta del Yuan Legislativo, Consejo de Vivienda de Hong Kong
Gráfico de líneas tw-line
Tendencias con cuatro o más puntos temporales, dibujadas como líneas con SVG en línea; los límites superior e inferior del eje y se marcan para que el lector vea el rango. Lo más importante es que genera automáticamente una tabla de datos oculta, permitiendo que los lectores de pantalla y los rastreadores de IA accedan a los datos originales. El gráfico es para que lo vean las personas; la tabla es para que la lean las máquinas; ambas comparten el mismo origen.
| Año | Nacional |
|---|---|
| 2014 | 8.41 |
| 2016 | 9.32 |
| 2018 | 8.57 |
| 2020 | 9.2 |
| 2022 | 9.61 |
| 2024 | 10.76 |
| Fuente: Centro de Investigación Inmobiliaria de la Universidad Nacional Chengchi, Plataforma de Información Inmobiliaria del Ministerio del Interior |
Mapa de calor tw-heatmap
Comparación matricial de región × indicador o año × categoría. Cada columna se normaliza individualmente en intensidad de color; cuanto mayor el valor, más cálido. Es en sí mismo una tabla HTML, por lo que es de origen legible por la IA —y esa es también la razón por la que un mapa de calor es mejor en nuestro sistema que «una imagen a color».
| Ciudad/Condado | Ratio precio de la vivienda-ingresos (veces) | Tasa de carga hipotecaria (%) |
|---|---|---|
| Taipéi | 16.60 | 63.9 |
| Nuevo Taipéi | 13.03 | 56.9 |
| Taichung | 11.11 | 48.0 |
| Taoyuan | 9.0 | 40.0 |
| Fuente: Plataforma de Información Inmobiliaria del Ministerio del Interior |
Cómo usar estos módulos
Cada módulo se escribe en el Markdown del artículo como un bloque ```tw-*, separado por |, y se convierte automáticamente en lo que ves arriba durante la compilación —el autor no necesita escribir HTML ni JavaScript. La sintaxis completa, cuándo usar cada uno, cómo manejar los colores y los ejes para no inducir a error, y la lista de verificación de visualización antes de la publicación, están en graph.md.
Este sistema se inspira en la filosofía editorial del medio de narrativa visual The Pudding —la pregunta precede a los datos, la conclusión debe ser clara, la atribución es la protagonista—, pero ha crecido hasta convertirse en un órgano propio de Taiwan.md: estático, multilingüe, legible por IA. El contexto completo del diseño está escrito en el informe de diseño del sistema de visualización.
Para ver cómo se entrelazan estos módulos en la narrativa de un artículo de fondo real, lee Vivienda pública y justicia habitacional —la mayoría de los datos de esta página provienen de la investigación de ese artículo.
Lecturas complementarias:
- Vivienda pública y justicia habitacional — La historia completa detrás de estos datos de vivienda: cómo la vivienda pública pasó de ser vivienda barata a escalera de activos, fuente de datos de la mayoría de los módulos de esta página
- Vivienda social y justicia habitacional — La ruta de la vivienda social «solo en alquiler, no en venta» tras 2016
- La crisis de la baja natalidad en Taiwán — No poder comprar casa y no poder tener hijos: la otra cara de la justicia generacional
Referencias
Créditos de imagen
Este artículo utiliza 1 imagen con licencia Creative Commons, almacenada en caché en public/article-images/society/:
- Horizonte residencial de Taipéi (vista desde la montaña Xiangshan) — Foto: Heeheemalu, 2026, CC BY-SA 4.0 (imagen principal)