30 秒概覽： 這一頁是 Taiwan.md 視覺化系統的「活範例」——把十種文章內視覺模組各渲染一次，全部用同一組真實的台灣居住數據（房價所得比、國宅、社宅、國際對照）。它是編輯指南 graph.md 的搭檔：graph.md 講「何時用哪種、怎麼做才好、語法怎麼寫」，這一頁讓你直接看到「長什麼樣」。 每個模組都是純 HTML／SVG 渲染的，所以人、螢幕閱讀器、Google、AI 爬蟲都讀得到同一份數據——這正是我們選擇靜態視覺化而非互動圖表的理由。
寫一篇談數字的文章時，最怕的是把資料寫成一段一段的數字堆疊，讀者讀到第三個百分比就放空了。視覺化的工作，是把「一段密集的數字 prose」逆熵成「一眼可讀的結構」。
但 Taiwan.md 的視覺化有一條別人沒有的紀律：我們只做「讓 LLM 也讀得懂」的視覺化。一張用 D3 或 Canvas 畫的互動圖表很炫，但 GPTBot、PerplexityBot、ClaudeBot 這些 AI 爬蟲不會跑 JavaScript，對它們來說那張圖是一片空白。而我們用 semantic HTML 跟 inline SVG 做的圖，數據就在原始碼裡，AI 在六種語言裡都讀得到、引用得到台灣的第一人稱數據。讓 LLM 讀得懂的視覺化，就是主權的視覺化。
下面十個模組，從最簡單的「一個大數字」到「多序列折線圖」，依序展示。語法寫法跟設計原則的完整版本在 graph.md，這裡只放一句「這是什麼、什麼時候用」。
數據大字 tw-figure
最簡單也最有力的一種：把一個戲劇性的數字放到最大，前後對照講一個轉化。適合當開門見山的「sledgehammer stat」。
數據組 tw-stat
當一個段落塞了三四個並列的關鍵數字，與其寫成一句長句，不如排成一列卡片，讓讀者一眼掃完。
對比卡 tw-versus
兩種制度、兩種立場、或前後兩個狀態的逐點對照。左暖色、右冷色，中間一個「vs」，讓差異一行一行讀下來。
比例條 tw-bars
少量類別的數值比較或排名，水平條的長度會自動依數值縮放，最大值撐滿。資料模組記得在最後加一列 來源：，會自動變成下方的來源標註。
資料來源：內政部不動產資訊平台、政大不動產研究中心
方格圖 tw-waffle
部分對全體的比例組成，一百格代表一百趴，比圓餅圖更直覺——你可以真的數格子。適合「各類別佔多少」加總約等於 100 的數據。
資料來源：維也納市政府（Stadt Wien）住宅統計
政策軸 tw-timeline
制度或政策的關鍵節點脈絡，用節點時間軸串起來。注意這是「視覺輔助」，跟正文小標題不能用編年體（「1975 年…」當標題）是兩回事。
引語卡 tw-quote
當一句話就能代表整篇的核心張力，把它放大成引語卡。引文不用自己加「」，模組會加。引語必須是逐字、可查證的。
市價 3000 萬元的房子，變成 6000 至 7000 萬元的房子……劫貧濟富，國家出錢幫有錢人改建房子
來源條 tw-source
把一段分析的資料來源集中成一個低調的 chip，放在段落旁邊。可信度是策展的一部分——台灣數位媒體常常忘了標來源，這是我們可以做得不一樣的地方。
內政部不動產資訊平台、實價登錄、政大不動產研究中心、立法院公報、香港房屋委員會
折線圖 tw-line
四個以上時間點的趨勢，用 inline SVG 畫成折線，y 軸的上下限會標出來讓讀者看見範圍。最關鍵的是——它會自動產生一份隱藏的資料表，讓螢幕閱讀器跟 AI 爬蟲讀到原始數據。圖是給人看的，表是給機器讀的，兩者同源。
| 年 | 全國 |
|---|---|
| 2014 | 8.41 |
| 2016 | 9.32 |
| 2018 | 8.57 |
| 2020 | 9.2 |
| 2022 | 9.61 |
| 2024 | 10.76 |
資料來源：政大不動產研究中心、內政部不動產資訊平台
熱力圖 tw-heatmap
地區×指標、或年×類別的矩陣比較。每一欄各自正規化成色深，數字越大越暖。它本身就是一個 HTML 表格，所以天生就是 AI 可讀的——這也是熱力圖在我們系統裡比「一張彩色圖片」好的原因。
| 縣市 | 房價所得比（倍） | 房貸負擔率（%） |
|---|---|---|
| 台北 | 16.60 | 63.9 |
| 新北 | 13.03 | 56.9 |
| 台中 | 11.11 | 48.0 |
| 桃園 | 9.0 | 40.0 |
資料來源：內政部不動產資訊平台
怎麼用這些模組
每個模組都是在文章的 Markdown 裡寫一段 ```tw-* 區塊，用 | 分欄，建置時自動轉成上面看到的樣子——作者不用寫任何 HTML 或 JavaScript。完整的語法、什麼時候該用哪一種、色彩跟座標軸怎麼做才不會誤導、以及發布前的視覺化檢查清單，都在 graph.md。
這套系統參考了視覺敘事媒體 The Pudding 的編輯哲學——問題先於資料、結論要明確、標註是主角——但長成了適合 Taiwan.md 自己的器官：靜態、多語、AI 可讀。設計的完整脈絡寫在 視覺化系統設計報告。
想看這些模組在一篇真實深度文章裡怎麼穿插敘事，讀 國宅與居住正義——本頁的數據大多來自那篇的研究。
延伸閱讀：
- 國宅與居住正義 — 這些居住數據背後的完整故事：國宅怎麼從便宜房變成資產扶梯，本頁多數模組的數據來源
- 社會住宅與居住正義 — 2016 後「只租不售」社宅這條路線
- 台灣少子化危機 — 買不起房跟生不出小孩，世代正義的另一面
參考資料
圖片來源
本文使用 1 張創用 CC 授權圖片，cache 於 public/article-images/society/：
- 台北市住宅天際線（象山視角） — Photo: Heeheemalu, 2026, CC BY-SA 4.0（hero）