30‑second overview: This page is the “live example” of Taiwan.md’s visualization system—rendering each of the seventeen article‑level visualization modules once, all with real Taiwan data (price‑to‑income ratio, public housing, aging, referendums). It is the companion to the editorial guide graph.md: graph.md explains “when to use which, how to do it well, and the syntax,” and this page shows you exactly “what it looks like.” Each module is pure HTML/SVG, so people, screen readers, Google, and AI crawlers all read the same data—this is why we choose static visualizations over interactive charts.
When writing a data‑heavy article, the biggest fear is turning the information into a wall of numbers that makes readers tune out after the third percentage point. Visualization’s job is to turn “dense numeric prose” into “a structure readable at a glance.”
But Taiwan.md’s visualizations follow a discipline that others lack: we only make visualizations that LLMs can also understand. An interactive D3 or Canvas chart may look flashy, but GPTBot, PerplexityBot, ClaudeBot and similar AI crawlers do not execute JavaScript; to them the chart is a blank space. Our charts, built with semantic HTML and inline SVG, embed the data directly in the source code, so AI can read and cite Taiwan’s first‑person data in any of the six supported languages. Visualizations that LLMs can read are sovereign visualizations.
The seventeen modules below range from the simplest “big number” to “county‑level tile map,” displayed in order. The full syntax and design principles are in graph.md; here we only give a one‑sentence “what it is, when to use it.”
Data‑Big‑Number `tw-figure`
The simplest and most powerful: put a dramatic figure at maximum size, with a before‑and‑after contrast that tells a transformation story. Ideal for an opening “sledgehammer stat.”
Data‑Set `tw-stat`
When a paragraph contains three or four parallel key figures, instead of a long sentence, lay them out as a row of cards for a quick scan.
Comparison Card `tw-versus`
Side‑by‑side point‑by‑point comparison of two systems, positions, or time periods. Warm colour on the left, cool on the right, with a “vs” in the middle.
Proportion Grid `tw-waffle`
Shows part‑of‑whole composition; 100 squares represent 100 %. More intuitive than a pie chart—you can actually count the squares. Good for data that sum to roughly 100 %.
資料來源：City of Vienna (Stadt Wien) housing statistics
Policy Timeline `tw-timeline`
Key policy or institutional milestones linked on a timeline. Note this is a “visual aid,” not a chronological heading in the main text.
Quote Card `tw-quote`
When a single sentence captures the core tension of the article, enlarge it as a quote card. The module adds quotation marks automatically; the quote must be verbatim and verifiable.
A house priced at NT$30 million becomes NT$60–70 million… enriching the rich while impoverishing the poor, the state pays to help the wealthy rebuild.
Source Chip `tw-source`
Collect the sources for a paragraph into a low‑key chip placed beside the text. Credibility is part of curation—Taiwan’s digital media often forget to cite sources; this is where we can differ.
Ministry of the Interior Real‑Estate Information Platform, Real‑estate Transaction Registry, NCCU Real‑Estate Research Center, Legislative Yuan Gazette, Hong Kong Housing Authority
Note Box `tw-note`
Half of a data article’s credibility lies in “how you calculated it.” Reporters use a Note block to explain methodology or issue corrections; we formalize that as a module. The first line is one of: 說明 (Explanation), 方法 (Method), 註 (Note), 更正 (Correction), 更新 (Update); each subsequent line forms its own paragraph.
Line Chart `tw-line`
For trends with four or more time points, an inline‑SVG line chart shows the shape, with explicit y‑axis limits so readers see the range. Crucially, it automatically generates a hidden data table that screen readers and AI crawlers can read. The chart is for humans; the table is for machines, and they share the same source.
| Year | Nationwide |
|---|---|
| 2014 | 8.41 |
| 2016 | 9.32 |
| 2018 | 8.57 |
| 2020 | 9.2 |
| 2022 | 9.61 |
| 2024 | 10.76 |
| Baseline: 2014 start | 8.41 |
資料來源：NCCU Real‑Estate Research Center, Ministry of the Interior Real‑Estate Information Platform
Line charts also support baseline lines: add a row Baseline: label | value to draw a dashed line without endpoints, visually separating it from the measured series.
Slope Chart `tw-slope`
When you have only two time points, a line chart wastes space. A slope chart connects the two ends directly, letting the steepness speak for itself—who surged, who fell, at a glance. Prefix a label with * to highlight a row; other rows are automatically de‑emphasized.
| 2014 | 2024 | |
|---|---|---|
| Nationwide | 8.41 | 10.76 |
| Taipei | 12.0 | 16.60 |
資料來源：Ministry of the Interior Real‑Estate Information Platform, NCCU Real‑Estate Research Center
Heatmap `tw-heatmap`
A matrix of regions × indicators or years × categories. Each column is normalized to a colour intensity; larger numbers are warmer. Because it is an HTML table, it is inherently AI‑readable—this is why heatmaps are preferred over a single coloured image in our system.
| County/City | Price‑to‑income ratio (×) | Mortgage‑burden ratio (%) |
|---|---|---|
| Taipei | 16.60 | 63.9 |
| New Taipei | 13.03 | 56.9 |
| Taichung | 11.11 | 48.0 |
| Taoyuan | 9.0 | 40.0 |
資料來源：Ministry of the Interior Real‑Estate Information Platform
Dot Plot `tw-dot`
Bar charts show “quantity”; dot plots show “distribution.” All dots lie on the same scale, so you can see clusters and outliers. One value per line creates a dot strip; two values draw a “from‑to” interval. * can again highlight rows.
資料來源：Ministry of the Interior Household Registration Department, 2025 year‑end
Stacked Bar `tw-stack`
Waffle charts are good for a single whole; stacked bars are ideal for comparing compositions across several rows—each row automatically normalizes to 100 %, and if the bar is wide enough the values appear inside the colour blocks.
| Referendum | Yes | No |
|---|---|---|
| 2018 Keep Nuclear for Green Energy | 59 | 41 |
| 2021 Restart Nuclear Plant 4 | 47 | 53 |
| 2025 Extend Nuclear Plant 3 | 74 | 26 |
資料來源：Central Election Commission, official results of the three referendums
Pyramid `tw-pyramid`
Back‑to‑back bars, one for each side, sharing a common axis—classic demographic pyramid. Here we use it to compare six counties’ “top‑heavy vs bottom‑heavy” structure: children on the left, elderly on the right. When the two sides differ, aging is no longer an abstract percentage.
資料來源：Ministry of the Interior Household Registration Department, 2025 year‑end; child share derived from aging rate ÷ aging index × 100
County‑Level Tile Map `tw-tiles`
Taiwan’s choropleth maps suffer from two problems: Hualien and Taitung’s large areas dominate visual weight, and AI‑generated outlines of Taiwan often look “between an olive and a potato.” Tiles arrange the 22 counties and cities into equal‑sized squares (layout hard‑coded to reflect real relative positions); each tile carries the same visual weight, and the number is written directly on the tile. The shape is always correct because we never draw the outline.
資料來源：Ministry of the Interior Household Registration Department, 2025 year‑end
Unit Chart `tw-iso`
“174,891 households” is a number that slips away after a glance; nine hand‑countable dots stay with the reader. A unit chart converts a huge figure into “one symbol = how many,” a technique reporters use for offshore‑fishing pieces: turn an abstract large number into a tangible unit. Symbols use whole numbers only; the exact value is written beside them.
● ≈ 1
資料來源：Executive Yuan press release on the repeal of the National Housing Act
How to Use These Modules
Each module is written in an article’s Markdown as a fenced block ```tw-* with columns separated by |. During build, it is automatically transformed into the visual you see above—authors never need to write HTML or JavaScript. The complete syntax, guidance on when to use each type, colour‑ and axis‑design best practices, and a pre‑publication visual‑checklist are all in graph.md.
Our system draws inspiration from the visual‑storytelling outlet The Pudding, whose editorial philosophy stresses “question before data, clear conclusions, and attribution as the protagonist.” It has evolved into a tool that fits Taiwan.md: static, multilingual, AI‑readable. The full design rationale is documented in the Visualization System Design Report.
To see how these modules are woven into a real in‑depth article, read Public Housing and Housing Justice—most of the data on this page comes from that research.
Further Reading
- Public Housing and Housing Justice — the full story behind the housing data: how public housing shifted from cheap homes to an asset ladder; source for most modules on this page
- Using Data to View Taiwan’s 22 Counties and Cities — all aging‑rate data for the dot plot, pyramid, and tile map come from this comprehensive analysis
- Taiwan and Nuclear Power Debate — the full narrative behind the stacked‑bar referendums
- Social Housing and Housing Justice — the post‑2016 “rental‑only” public housing trajectory
- Taiwan’s Low‑Birth‑Rate Crisis — unaffordable housing and declining births, another facet of inter‑generational justice
References
Image Credit
The article uses one CC‑licensed image, cached in public/article-images/society/:
- Taipei skyline from Xiangshan (2026) — Photo by Heeheemalu, 2026, CC BY‑SA 4.0 (hero)