30-second overview: This page is a "live example" of the Taiwan.md visualization system: it renders each of the ten in-article visual modules once, all using the same set of real Taiwan housing data, including the price-to-income ratio, National Housing, social housing, and international comparisons. It is a companion to the editorial guide graph.md: graph.md explains "when to use which module, how to make it work well, and how to write the syntax"; this page lets you directly see "what it looks like." Each module is rendered in pure HTML/SVG, so people, screen readers, Google, and AI crawlers all read the same data. This is precisely why we chose static visualization rather than interactive charts.
When writing an article about numbers, the greatest risk is turning data into stacked paragraphs of figures, leaving readers checked out by the third percentage. The work of visualization is to reverse the entropy of "dense numerical prose" into "a structure readable at a glance."
But Taiwan.md's visualizations have a discipline others do not: we only make visualizations that LLMs can also understand. An interactive chart drawn with D3 or Canvas may look impressive, but AI crawlers such as GPTBot, PerplexityBot, and ClaudeBot do not run JavaScript; to them, the chart is a blank space. In the charts we make with semantic HTML and inline SVG, the data is in the source code, allowing AI to read and cite Taiwan's first-person data across six languages. Visualization that LLMs can understand is visualization with sovereignty.
The ten modules below are shown in sequence, from the simplest "one big number" to a "multi-series line chart." The full syntax and design principles are in graph.md; here, each module gets only one sentence on what it is and when to use it.
Big Figure tw-figure
The simplest and most forceful type: make one dramatic number as large as possible, then use before-and-after contrast to tell a story of transformation. Suitable as an opening "sledgehammer stat."
Stat Set tw-stat
When a paragraph contains three or four parallel key numbers, arranging them as a row of cards lets readers scan them at once instead of reading a long sentence.
Versus Card tw-versus
A point-by-point comparison between two systems, two positions, or two before-and-after states. Warm color on the left, cool color on the right, with a "vs" in the middle, so differences can be read line by line.
Bar Chart tw-bars
For comparing or ranking a small number of categories, the horizontal bar length automatically scales to the values, with the maximum filling the available width. Remember to add a final Source: row in the data module; it will automatically become the source note below.
資料來源：Ministry of the Interior Real Estate Information Platform; NCCU Real Estate Research Center
Waffle Chart tw-waffle
For part-to-whole proportions, one hundred squares represent 100 percent. It is more intuitive than a pie chart: you can actually count the squares. Suitable for data in which "how much each category accounts for" adds up to roughly 100.
資料來源：City of Vienna (Stadt Wien) housing statistics
Policy Timeline tw-timeline
A node-based timeline connecting the key context of a system or policy. Note that this is a "visual aid"; it is different from the rule that body subheadings should not be written chronologically, such as using "1975..." as a heading.
Quote Card tw-quote
When one sentence can represent the core tension of an entire article, enlarge it into a quote card. Do not add quotation marks yourself; the module will add them. The quotation must be verbatim and verifiable.
A house with a market price of NT$30 million becomes a house worth NT$60 million to NT$70 million... robbing the poor to help the rich, with the state paying to help wealthy people redevelop their homes
Source Strip tw-source
Gather the data sources for a section of analysis into a low-key chip placed beside the paragraph. Credibility is part of curation. Taiwan's digital media often forgets to cite sources; this is where we can do things differently.
Ministry of the Interior Real Estate Information Platform, Actual Price Registration, NCCU Real Estate Research Center, Legislative Yuan Gazette, Hong Kong Housing Authority
Line Chart tw-line
For trends across four or more time points, an inline SVG draws the line, while the upper and lower bounds of the y-axis are labeled so readers can see the range. Most importantly, it automatically generates a hidden data table, allowing screen readers and AI crawlers to read the original data. The chart is for people; the table is for machines. Both come from the same source.
| Year | Nationwide |
|---|---|
| 2014 | 8.41 |
| 2016 | 9.32 |
| 2018 | 8.57 |
| 2020 | 9.2 |
| 2022 | 9.61 |
| 2024 | 10.76 |
資料來源：NCCU Real Estate Research Center; Ministry of the Interior Real Estate Information Platform
Heatmap tw-heatmap
A matrix comparison for region-by-indicator or year-by-category data. Each column is normalized separately into color intensity; larger numbers are warmer. It is itself an HTML table, so it is inherently AI-readable. This is also why, in our system, a heatmap is better than "a colorful image."
| City/County | Price-to-income ratio (times) | 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
How to Use These Modules
Each module is written in an article's Markdown as a ```tw-* block, using | to divide columns. At build time, it is automatically converted into what you see above; authors do not need to write any HTML or JavaScript. The full syntax, guidance on when to use each type, principles for color and axes that avoid misleading readers, and the pre-publication visualization checklist are all in graph.md.
This system draws on the editorial philosophy of the visual storytelling publication The Pudding: questions come before data, conclusions must be explicit, and annotation is the protagonist. But it has grown into an organ suited to Taiwan.md itself: static, multilingual, and AI-readable. The full design context is documented in the Visualization System Design Report.
To see how these modules are interwoven with narrative in a real long-form article, read National Housing and Housing Justice. Most of the data on this page comes from that article's research.
Further Reading:
- National Housing and Housing Justice — The full story behind this housing data: how National Housing went from affordable homes to an asset escalator, and the data source for most modules on this page
- Social Housing and Housing Justice — The post-2016 path of social housing for rent only, not sale
- Taiwan's Low Birthrate Crisis — The other side of generational justice: unaffordable housing and the inability to have children
References
Image Sources
This article uses one Creative Commons-licensed image, cached in public/article-images/society/:
- Taipei residential skyline from Xiangshan — Photo: Heeheemalu, 2026, CC BY-SA 4.0 (hero)