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-note
數據文章的可信度有一半在「你怎麼算的」。報導者在資料新聞裡用【說明】區塊交代計算方式、用（註）標記更正，我們把這個公約做成模組。第一列寫 說明／方法／註／更正／更新 之一，其餘每列自成一段。
折線圖 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-slope
當你只有「兩個時間點」，折線圖會浪費掉中間的空白。斜率圖直接讓兩端連線的傾斜度說話，誰漲得兇、誰追過誰，一眼看完。標籤開頭加 * 可以強調某一列，其餘列自動退灰當脈絡。
| 2014 | 2024 | |
|---|---|---|
| 全國 | 8.41 | 10.76 |
| 台北 | 12.0 | 16.60 |
資料來源：內政部不動產資訊平台、政大不動產研究中心
熱力圖 tw-heatmap
地區×指標、或年×類別的矩陣比較。每一欄各自正規化成色深，數字越大越暖。它本身就是一個 HTML 表格，所以天生就是 AI 可讀的——這也是熱力圖在我們系統裡比「一張彩色圖片」好的原因。
| 縣市 | 房價所得比（倍） | 房貸負擔率（%） |
|---|---|---|
| 台北 | 16.60 | 63.9 |
| 新北 | 13.03 | 56.9 |
| 台中 | 11.11 | 48.0 |
| 桃園 | 9.0 | 40.0 |
資料來源：內政部不動產資訊平台
點圖 tw-dot
長條圖比「量」，點圖看「分布」：所有的點落在同一把尺上，你看得到誰擠在一起、誰是離群值。每列一個值就是 dot strip；給兩個值會畫成「從這裡到那裡」的區間。* 一樣可以強調。
資料來源：內政部戶政司，2025 年底
堆疊條 tw-stack
方格圖適合「一個整體」的組成；堆疊條適合跨好幾列比較組成——每列自動正規化成 100%，段落夠寬會直接把數值標在色塊裡。
| 公投 | 同意 | 不同意 |
|---|---|---|
| 2018 以核養綠 | 59 | 41 |
| 2021 重啟核四 | 47 | 53 |
| 2025 核三延役 | 74 | 26 |
資料來源：中央選舉委員會三場公投官方審定結果
金字塔 tw-pyramid
背對背的長條，左右各一個陣營，中間共用標籤，是人口學的經典圖型。這裡用它看六個縣市的「頭重腳輕」：左邊是小孩，右邊是老人，兩邊一比，高齡化就不是一個抽象的百分比了。
資料來源：內政部戶政司 2025 年底；幼年占比由高齡化率 ÷ 老化指數 × 100 推算
縣市磚圖 tw-tiles
台灣的 choropleth 地圖有兩個老問題：花蓮台東面積大到搶走視覺重量，AI 手繪的台灣形狀常常變成「介於橄欖與馬鈴薯之間」。磚圖把 22 縣市排成等大的磚塊（佈局寫死在系統裡，照真實的相對位置），每塊磚一樣重，數字直接寫在磚上。形狀永遠是對的，因為根本不畫形狀。
| 縣市 | 數值 |
|---|---|
| 台北 | 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 年底
單位圖 tw-iso
「174,891 戶」是一個讀過就忘的數字；九個可以用手指數的圓點不是。單位圖把大數字換成「一個符號＝多少」的可數單位，這是報導者做遠洋漁業專題時的心法：把無感的龐大數字，換成民眾有感的單位。符號只用整數（不切半個），精確值寫在旁邊。
● ≈ 20,000 戶
資料來源：行政院廢止國民住宅條例新聞稿
怎麼用這些模組
每個模組都是在文章的 Markdown 裡寫一段 ```tw-* 區塊，用 | 分欄，建置時自動轉成上面看到的樣子——作者不用寫任何 HTML 或 JavaScript。完整的語法、什麼時候該用哪一種、色彩跟座標軸怎麼做才不會誤導、以及發布前的視覺化檢查清單，都在 graph.md。
這套系統參考了視覺敘事媒體 The Pudding 的編輯哲學——問題先於資料、結論要明確、標註是主角——但長成了適合 Taiwan.md 自己的器官：靜態、多語、AI 可讀。設計的完整脈絡寫在 視覺化系統設計報告。
想看這些模組在一篇真實深度文章裡怎麼穿插敘事，讀 國宅與居住正義——本頁的數據大多來自那篇的研究。
延伸閱讀：
- 國宅與居住正義 — 這些居住數據背後的完整故事：國宅怎麼從便宜房變成資產扶梯，本頁多數模組的數據來源
- 用數據看台灣22縣市 — 本頁點圖、金字塔、縣市磚圖的高齡化數據全部來自這篇的 22 縣市完整分析
- 台灣與核能的討論 — 堆疊條那三場公投的完整故事：贏了辯論、輸了制度
- 社會住宅與居住正義 — 2016 後「只租不售」社宅這條路線
- 台灣少子化危機 — 買不起房跟生不出小孩，世代正義的另一面
參考資料
圖片來源
本文使用 1 張創用 CC 授權圖片，cache 於 public/article-images/society/：
- 台北市住宅天際線（象山視角） — Photo: Heeheemalu, 2026, CC BY-SA 4.0（hero）