Catálogo de Módulos de Visualização: Dezenove Maneiras de Ver os Dados de Taiwan

Visão geral em 30 segundos: Esta página é o "exemplo vivo" do sistema de visualização do Taiwan.md — renderiza cada um dos dezenove módulos visuais de artigo uma vez, todos com dados reais de Taiwan (razão preço-renda, habitação pública, envelhecimento, referendos, razão enfermeiro-paciente, assentos legislativos). É o parceiro do guia editorial graph.md: o graph.md explica "quando usar qual, como fazer bem, como escrever a sintaxe", esta página mostra "como fica". Cada módulo é renderizado em HTML/SVG puro, então pessoas, leitores de tela, Google e rastreadores de IA leem a mesma base de dados — é precisamente por isso que escolhemos visualização estática em vez de gráficos interativos.

Ao escrever um artigo sobre números, o maior medo é transformar dados em parágrafos empilhados de cifras, fazendo o leitor desligar no terceiro percentual. O trabalho da visualização é reverter a entropia de uma "prosa densa de números" para uma "estrutura legível num relance".

Mas a visualização do Taiwan.md tem uma disciplina que outros não têm: fazemos apenas visualização que "um LLM também consegue ler". Um gráfico interativo feito com D3 ou Canvas é vistoso, mas GPTBot, PerplexityBot, ClaudeBot — esses rastreadores de IA não executam JavaScript; para eles, aquele gráfico é uma tela em branco. Já nossos gráficos feitos com HTML semântico e SVG inline têm os dados no código-fonte; a IA lê e cita os dados de primeira mão de Taiwan em seis idiomas. Visualização que LLM lê é visualização de soberania.

Abaixo, os dezenove módulos, do mais simples "um grande número" ao "mapa de ladrilhos por condado/cidade" e "arco de assentos", exibidos em sequência. A sintaxe completa e os princípios de design estão no graph.md; aqui vai apenas uma frase do tipo "o que é, quando usar".

Número grande tw-figure

O mais simples e mais potente: colocar um número dramático no tamanho máximo, com contraponto anterior/posterior contando uma virada. Ideal para abrir o artigo com um "sledgehammer stat" (número-martelo).

Grupo de dados tw-stat

Quando um parágrafo enfia três ou quatro números-chave lado a lado, em vez de uma frase comprida, melhor alinhar como uma fileira de cartões para o leitor varrer num golpe de olho.

Módulos editoriais com dados (grupo de dados, cartão de comparação, eixo de política) devem exibir Fonte: igual aos módulos de gráfico. A auditoria de todo o site em 2026-07 descobriu que os módulos vigiados pelo portão automático tinham taxa de citação de fonte de 100%; justamente os três módulos de alta frequência não vigiados é que "corriam nus" em 40% dos exemplos. Agora eles também entraram no portão viz-health.

Cartão de comparação tw-versus

Dois regimes, duas posições, ou dois estados anterior/posterior comparados ponto a ponto. Esquerda cor quente, direita cor fria, um "vs" no meio, para a diferença ser lida linha a linha.

Barras de proporção tw-bars

Comparação ou ranking de poucas categorias; o comprimento da barra horizontal escala automaticamente pelo valor, o máximo preenche a largura. Módulos de dados lembram de adicionar uma linha final Fonte:, que vira automaticamente a nota de rodapé.

Gráfico de grade (waffle) tw-waffle

Composição parte-versus-todo em proporção; cem quadradinhos representam cem por cento, mais intuitivo que pizza — você pode literalmente contar os quadradinhos. Adequado para dados "quanto cada categoria representa" somando aproximadamente 100.

Eixo de política tw-timeline

Encadeamento dos marcos institucionais ou de política, ligados por uma linha do tempo com nós. Atenção: isto é "auxílio visual", não substitui o fato de que o texto corrido não deve usar estilo annalístico ("1975..." como subtítulo).

Cartão de citação tw-quote

Quando uma frase sozinha carrega a tensão central do artigo, amplie-a num cartão de citação. Não coloque aspas você mesmo, o módulo coloca. A citação deve ser textual e verificável.

Chip de fonte tw-source

Concentrar as fontes de uma análise num chip discreto, ao lado do parágrafo. Credibilidade faz parte da curadoria — mídia digital de Taiwan frequentemente esquece de citar fonte, é onde podemos ser diferentes.

⌖Plataforma de Informação Imobiliária do Ministério do Interior, Registro de Preços Reais, Centro de Pesquisa Imobiliária da Universidade Nacional Chengchi, Gazeta do Yuan Legislativo, Comitê de Habitação de Hong Kong

Caixa de explicação tw-note

Metade da credibilidade do jornalismo de dados está em "como você calculou". Repórteres em data journalism usam blocos 【Explicação】 para detalhar método de cálculo e (nota) para marcar correções; transformamos essa convenção em módulo. Primeira linha escreve Explicação/Método/Nota/Correção/Atualização um deles; cada linha seguinte forma seu próprio parágrafo.

Gráfico de linhas tw-line

Quatro ou mais pontos no tempo para tendência, desenhado em SVG inline; os limites superior/inferior do eixo y aparecem para o leitor ver o intervalo. O mais crucial: gera automaticamente uma tabela de dados oculta, para leitores de tela e rastreadores de IA lerem os valores brutos. O gráfico é para pessoas, a tabela é para máquinas, ambas da mesma fonte.

O gráfico de linhas também suporta linha de base: adicione uma linha Base: rótulo | valor, vira tracejada, sem extremidades, só um rótulo, visualmente separada da série medida. O leitor não confunde um limiar fixo com um dado medido.

Gráfico de inclinação (slope) tw-slope

Quando só há "dois pontos no tempo", o gráfico de linhas desperdiça o meio em branco. O slope liga as duas pontas direto; quem subiu mais forte, quem ultrapassou quem, se vê num golpe. Adicionar * no começo do rótulo destaca aquela linha; as demais viram cinza de contexto.

Mapa de calor tw-heatmap

Região×indicador, ou ano×categoria, matriz de comparação. Cada coluna normalizada independentemente em intensidade de cor; valor maior = mais quente. Ele próprio já é uma tabela HTML, logo nativamente legível por IA — por isso o heatmap no nosso sistema ganha de "uma imagem colorida".

Gráfico de pontos tw-dot

Barra compara "quanto", ponto olha "distribuição": todos os pontos caem na mesma régua; você vê quem está amontoado, quem é outlier. Uma valor por linha = faixa de pontos (dot strip); dois valores = intervalo "daqui até ali"; três valores (ponto estimado | limite inferior | limite superior) = estilo pesquisa "ponto estimado + faixa de incerteza". Margem de erro ±3% não deve ser engolida; é a honestidade que mais falha em ano eleitoral. * também destaca.

Barras empilhadas tw-stack

Waffle serve para "composição de um todo"; barras empilhadas servem para comparar composição entre várias linhas — cada linha normalizada a 100%, segmentos largos recebem o valor escrito dentro da faixa de cor.

Pirâmide tw-pyramid

Barras costas com costas, dois campos à esquerda e à direita, rótulo compartilhado no meio; clássico da demografia. Aqui olhamos o "cabeça pesada, pés leves" de seis condados/cidades: esquerda crianças, direita idosos; comparando os dois lados, o envelhecimento deixa de ser percentual abstrato.

Mapa de ladrilhos tw-tiles

O mapa coroplético de Taiwan tem dois vícios velhos: Hualien e Taitung grandes demais roubam peso visual; Taiwan desenhado à mão por IA vive virando "entre azeitona e batata". O mapa de ladrilhos arranja os 22 condados/cidades em tijolos de mesmo tamanho (layout fixo no sistema, respeitando posições relativas reais); cada ladrilho pesa igual, o número escrito em cima. A forma está sempre certa, porque simplesmente não desenha forma.

Gráfico de unidades (isotype) tw-iso

"174.891 unidades" é número que se lê e esquece; nove bolinhas que se contam nos dedos não são. O isotype troca o número grande por "um símbolo = quantos" em unidades contáveis; é a lição dos repórteres que fazem reportagem sobre pesca de alto mar: transformar o número vasto sem sensação em unidade que o público sente. Símbolo só usa inteiros (não corta meio), valor exato escrito ao lado.

Arco de assentos tw-arc

A composição de assentos do parlamento tem seu gráfico próprio: meia-circunferência de pontos, um assento = um ponto, partidos na ordem listada formando setores contíguos. Pizza compara ângulo (olho humano é ruim nisso); arco de assentos deixa você contar pontos, a linha da maioria desenhada exatamente onde deve. Aqui usamos o resultado da eleição legislativa de 2024: 113 assentos, três partidos sem maioria, aquela linha tracejada é o ponto de partida de todo o cabo de guerra do grande recall posterior. Atenção: é gráfico de parlamento; eleição de 22 prefeitos de condado/cidade tipo "um distrito um vencedor" usa o mapa de ladrilhos abaixo.

Grade de pequenos múltiplos tw-multiples

Uma figura espremendo cinco linhas vira macarronada; pequenos múltiplos dão a cada linha sua própria celula, todas as células compartilham a mesma régua, para as formas serem comparáveis. Aqui usamos as três razões enfermeiro-paciente por turno: o heatmap (acima) dá a matriz exata; pequenos múltiplos dão a forma "todo nível sobe madrugada adentro, o nível de base sobe mais íngreme". Mesmos dados, perguntas diferentes, gráfico diferente.

Como usar estes módulos

Cada módulo se escreve no Markdown do artigo como um bloco ```tw-*, colunas separadas por |; na build vira automaticamente o que você vê acima — o autor não escreve nenhum HTML ou JavaScript. Sintaxe completa, quando usar qual, como fazer cores e eixos sem induzir a erro, e checklist de visualização antes de publicar, tudo no graph.md.

Este sistema bebeu da filosofia editorial do veículo de narrativa visual The Pudding — pergunta antes dos dados, conclusão clara, anotação é protagonista — mas cresceu órgãos próprios do Taiwan.md: estático, multilíngue, legível por IA. O fio condutor do design está no Relatório de Design do Sistema de Visualização.

Para ver estes módulos entrelaçados na narrativa de um artigo profundo real, leia Habitação Pública e Justiça Habitacional — a maioria dos dados desta página vem da pesquisa daquele artigo.

Este sistema também está em evolução

A página que você lê agora é fruto de três rodadas de evolução. Já que é página que fala de linha do tempo, use o próprio módulo de eixo de política para contar a própria história:

O foco da terceira rodada na verdade não foram novos tipos de gráfico, foi um check-up honesto. Auditoria de todo o site achou: módulos vigiados pelo portão automático, taxa de citação de fonte 100%; três módulos de alta frequência não vigiados, 40% "correndo nus". Regra escrita no guia editorial há dois meses, comportamento porém seguia totalmente o formato do instrumento; por isso desta vez alargamos o instrumento para ficar tão largo quanto a regra. Na mesma rodada também pegamos strings do sistema nas páginas inglês, japonês, coreano renderizando todas em chinês, até um caractere simplificado misturado em tag de acessibilidade sem ninguém notar. Para um sistema que afirma "fazer LLM ler dados de Taiwan em seis idiomas", esses cantos importam mais que feature nova.

Pesquisas recentes também deram lastro a esta rota: precisão de IA multimodal reconstruindo valores de gráfico a partir de imagem não é confiável; nós de texto é o que máquina lê de forma estável. É exatamente por isso que o mapa de ladrilhos escreve o número no ladrilho, cada gráfico traz uma tabela oculta. Processo completo de pesquisa e decisões de design no Relatório Profundo de Pesquisa e Implementação do Sistema de Visualização v3.0.

Leitura complementar:

• Habitação Pública e Justiça Habitacional — A história completa por trás destes dados de habitação: como a habitação pública virou escada de ativos, fonte da maioria dos módulos desta página
• Veja os 22 condados/cidades de Taiwan com dados — Dados de envelhecimento do gráfico de pontos, pirâmide, mapa de ladrilhos e caixa de explicação vêm da análise completa dos 22 condados/cidades deste artigo
• Taiwan e o Debate Nuclear — A história completa daqueles três referendos das barras empilhadas: ganhou o debate, perdeu o sistema
• Lei de Saúde — A história completa daqueles números de razão enfermeiro-paciente dos três turnos dos pequenos múltiplos: a lei escreve quantas camas cuidar, não escreve se existem aquelas mãos
• Grande Recall — O depois daquela linha tracejada da maioria do arco de assentos: como o Yuan Legislativo de três partidos sem maioria chegou a 31 casos de recall
• Crise de Natalidade em Taiwan — Não conseguir comprar casa e não conseguir ter filhos, o outro lado da justiça intergeracional

Créditos de imagem

Este artigo usa 1 imagem licenciada CC, em cache em public/article-images/society/:

• Horizonte residencial de Taipé (vista do Monte Elefante) — Foto: Heeheemalu, 2026, CC BY-SA 4.0 (hero)

Referências