Resumen de 30 segundos: Esta página es el “ejemplo activo” del sistema de visualización de Taiwan.md — renderiza una vez cada uno de los diecisiete módulos de visualización de artículos, usando datos reales de Taiwán (relación precio‑ingreso, viviendas públicas, envejecimiento, referéndum). Es el complemento de la guía editorial graph.md: graph.md explica “cuándo usar cuál, cómo hacerlo bien, cómo escribir la sintaxis”, y esta página te muestra directamente “cómo se ve”. Cada módulo se genera con HTML/SVG puro, por lo que personas, lectores de pantalla, Google y bots de IA pueden leer los mismos datos — esa es la razón por la que elegimos visualizaciones estáticas en lugar de gráficos interactivos.
Al escribir un artículo basado en cifras, lo peor es convertir los datos en una sucesión de números sin contexto; el lector se desconecta al tercer porcentaje. La visualización transforma el “prosa densa de números” en una “estructura legible de un vistazo”.
Pero la visualización de Taiwan.md sigue una disciplina que otros no tienen: solo hacemos visualizaciones “legibles para LLM”. Un gráfico interactivo hecho con D3 o Canvas puede ser llamativo, pero GPTBot, PerplexityBot, ClaudeBot y otros bots de IA no ejecutan JavaScript; para ellos ese gráfico es un vacío. Con HTML semántico y SVG en línea, los datos están en el código fuente, y la IA puede leerlos y citar los datos de Taiwán en sus seis idiomas. Una visualización que entiende la IA es una visualización soberana.
A continuación, diecisiete módulos, desde el “número grande” más sencillo hasta el “mosaico de municipios”, presentados en orden. La sintaxis completa y los principios de diseño están en graph.md; aquí solo incluimos una frase “qué es y cuándo usarlo”.
Número grande tw-figure
La forma más simple y poderosa: colocar un número impactante en grande, con contraste antes‑después para contar una transformación. Ideal como “estadística martillo”.
Conjunto de datos tw-stat
Cuando un párrafo contiene tres o cuatro cifras clave, en lugar de escribir una frase larga, dispónlas en una fila de tarjetas para que el lector las escanee de un vistazo.
Tarjeta comparativa tw-versus
Dos sistemas, dos posturas o dos estados comparados punto a punto. Color cálido a la izquierda, frío a la derecha, con un “vs” central.
Barra de proporción tw-bars
Comparación o ranking de pocos categorías; la longitud horizontal se escala automáticamente según el valor, y el máximo ocupa todo el ancho. Recuerda añadir una fila 來源： al final; se convertirá en la nota de fuente.
資料來源：內政部不動產資訊平台、政大不動產研究中心
Diagrama de mosaico tw-waffle
Proporción de partes sobre el todo; cada 100 casillas representan el 100 %. Más intuitivo que un pastel porque puedes contar los cuadros. Útil cuando la suma de categorías ronda el 100 %.
資料來源：維也納市政府（Stadt Wien）住宅統計
Línea de política tw-timeline
Ejes temporales que conectan hitos clave de un sistema o política. Es “apoyo visual”, no debe confundirse con usar fechas como subtítulos en el texto.
Tarjeta de cita tw-quote
Cuando una frase resume la tensión central del artículo, conviértela en una tarjeta de cita. No añadas comillas; el módulo las inserta. La cita debe ser literal y verificable.
市價 3000 萬元的房子，變成 6000 至 7000 萬元的房子……劫貧濟富，國家出錢幫有錢人改建房子
Chip de fuente tw-source
Concentra las fuentes de una sección de análisis en un pequeño chip al margen. La credibilidad forma parte de la curaduría — muchos medios digitales de Taiwán olvidan citar fuentes; aquí podemos hacerlo diferente.
內政部不動產資訊平台、實價登錄、政大不動產研究中心、立法院公報、香港房屋委員會
Caja explicativa tw-note
La mitad de la credibilidad de un artículo de datos está en “cómo lo calculaste”. Los reporteros usan bloques de nota para explicar métodos, correcciones o actualizaciones; este módulo lo estandariza. La primera fila indica 說明/方法/註/更正/更新, y cada fila posterior es un párrafo independiente.
Gráfica de línea tw-line
Para tendencias con más de cuatro puntos temporales, usa una línea con SVG en línea; el eje Y muestra los límites para que el lector vea el rango. Lo crucial es que se genera automáticamente una tabla oculta que los lectores de pantalla y los bots de IA pueden leer. El gráfico sirve a la vista, la tabla al motor.
| 年 | 全國 |
|---|---|
| 2014 | 8.41 |
| 2016 | 9.32 |
| 2018 | 8.57 |
| 2020 | 9.2 |
| 2022 | 9.61 |
| 2024 | 10.76 |
資料來源：政大不動產研究中心、內政部不動產資訊平台
Las líneas también admiten líneas de referencia: añade una fila 基準：標籤 | 值 y aparecerá como una línea discontinua sin extremos, separada visualmente de la serie medida.
Gráfica de pendiente tw-slope
Cuando solo tienes “dos puntos temporales”, la línea de tendencia desperdicia espacio. La gráfica de pendiente conecta directamente los extremos y muestra la inclinación; quien sube más rápido o quién supera a quién se ve de un vistazo. Usa * al inicio de una fila para resaltarla; el resto se atenuará.
| 2014 | 2024 | |
|---|---|---|
| 全國 | 8.41 | 10.76 |
| 台北 | 12.0 | 16.60 |
資料來源：內政部不動產資訊平台、政大不動產研究中心
Mapa de calor tw-heatmap
Matriz de regiones × indicadores o años × categorías. Cada columna se normaliza en intensidad de color; los valores mayores son más cálidos. Es una tabla HTML, por lo que es inherentemente legible por IA — esa es la ventaja frente a una imagen de mapa de calor.
| 縣市 | 房價所得比（倍） | 房貸負擔率（%） |
|---|---|---|
| 台北 | 16.60 | 63.9 |
| 新北 | 13.03 | 56.9 |
| 台中 | 11.11 | 48.0 |
| 桃園 | 9.0 | 40.0 |
資料來源：內政部不動產資訊平台
Diagrama de puntos tw-dot
Los diagramas de barras muestran “cantidad”; los de puntos muestran “distribución”: cada punto está en la misma escala, así puedes ver quién está agrupado y quién es un valor atípico. Cada fila con un solo valor crea una tira de puntos; con dos valores se dibuja un intervalo. * funciona igual para resaltar.
資料來源：內政部戶政司，2025 年底
Barras apiladas tw-stack
Los diagramas de mosaico son útiles para la composición de “un todo”; las barras apiladas sirven para comparar composiciones a través de varias filas — cada fila se normaliza al 100 % y, si hay espacio suficiente, el valor se muestra dentro del bloque de color.
| 公投 | 同意 | 不同意 |
|---|---|---|
| 2018 以核養綠 | 59 | 41 |
| 2021 重啟核四 | 47 | 53 |
| 2025 核三延役 | 74 | 26 |
資料來源：中央選舉委員會三場公投官方審定結果
Pirámide tw-pyramid
Barras espejo, una a cada lado, con una etiqueta central — el clásico gráfico demográfico. Aquí muestra la “carga de cabeza” de seis municipios: izquierda niños, derecha ancianos; al comparar ambos lados, la proporción de ancianos deja de ser un porcentaje abstracto.
資料來源：內政部戶政司 2025 年底；幼年占比由高齡化率 ÷ 老化指數 × 100 推算
Mosaico de municipios tw-tiles
Los mapas coropléticos de Taiwán tienen dos problemas: Hualien y Taitung ocupan tanto espacio que dominan la visual, y los dibujos de IA de la forma de Taiwán a menudo terminan pareciendo “entre una oliva y una patata”. El mosaico coloca los 22 municipios en bloques de igual tamaño (disposición fija en el sistema, respetando la posición relativa real); cada bloque tiene el mismo peso y el número se escribe directamente sobre él. La forma siempre es correcta porque no se dibuja la silueta.
| 縣市 | 數值 |
|---|---|
| 台北 | 24.18 |
| 新北 | 19.95 |
| 桃園 | 16.72 |
| 台中 | 17.40 |
| 台南 | 20.48 |
| 高雄 | 20.79 |
| 基隆 | 22.28 |
| 新竹市 | 16.16 |
| 嘉義市 | 19.90 |
| 新竹縣 | 15.08 |
| 苗栗 | 20.23 |
| 彰化 | 20.37 |
| 南投 | 22.66 |
| 雲林 | 21.76 |
| 嘉義縣 | 24.11 |
| 屏東 | 21.84 |
| 宜蘭 | 20.77 |
| 花蓮 | 21.52 |
| 台東 | 20.93 |
| 澎湖 | 21.03 |
| 金門 | 19.69 |
| 連江 | 17.14 |
資料來源：內政部戶政司，2025 年底
Diagrama de unidades tw-iso
“174,891 hogares” es un número que se olvida; nueve puntos que pueden contarse con los dedos son más tangibles. El diagrama de unidades convierte un número grande en “un símbolo = cuánto”. Solo se usan enteros; el valor exacto se escribe al lado.
● ≈ 20,000 戶
資料來源：行政院廢止國民住宅條例新聞稿
Cómo usar estos módulos
Cada módulo se escribe en el Markdown del artículo dentro de un bloque ```tw-*, usando | para separar columnas; al compilar, se transforma automáticamente en la visualización que ves — el autor no necesita escribir HTML ni JavaScript. La sintaxis completa, cuándo usar cada tipo, colores y ejes que eviten confusión, y la lista de verificación visual antes de publicar, están en graph.md.
Este sistema se inspira en la filosofía editorial de medios narrativos como The Pudding: el problema antes que los datos, conclusiones claras, y la atribución como protagonista — pero adaptado a la anatomía propia de Taiwan.md: estático, multilingüe y legible por IA. El contexto completo del diseño está en el Informe del sistema de visualización.
Para ver cómo estos módulos se insertan en un artículo profundo, lee Vivienda pública y justicia habitacional — la mayoría de los datos de esta página provienen de esa investigación.
Lecturas complementarias:
- Vivienda pública y justicia habitacional — la historia completa detrás de los datos de vivienda: cómo la vivienda pública pasó de ser vivienda barata a una escalera de activos, y la mayor parte de los módulos usan esas cifras.
- Ver Taiwán con datos — los datos de envejecimiento para los diagramas de puntos, pirámide y mosaico provienen de este análisis de los 22 municipios.
- Debate sobre la energía nuclear en Taiwán — la historia completa de los tres referéndums que alimentan el diagrama de barras apiladas.
- Vivienda social y justicia habitacional — la ruta de “solo alquiler, no venta” después de 2016.
- Crisis de natalidad en Taiwán — la imposibilidad de comprar vivienda y la falta de hijos, otra cara de la justicia generacional.
Referencias
Fuente de la imagen
Esta publicación usa una imagen bajo licencia CC BY‑SA 4.0, almacenada en public/article-images/society/:
- Taipei skyline (vista desde Xiangshan) — Foto: Heeheemalu, 2026, CC BY‑SA 4.0 (hero)