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
當一個段落塞了三四個並列的關鍵數字，與其寫成一句長句，不如排成一列卡片，讓讀者一眼掃完。
資料來源：行政院廢止國民住宅條例新聞稿、內政部不動產資訊平台
含數據的編輯模組（數據組、對比卡、政策軸）跟圖表模組一樣要標 來源：。2026-07 的全站審計發現，被自動閘門盯著的模組來源標註率 100%，沒被盯的正好是這三個高頻模組，四成範例裸奔。現在它們也進了 viz-health 閘門。
對比卡 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；給兩個值會畫成「從這裡到那裡」的區間；給三個值（點估 | 下界 | 上界）會畫成民調式的「點估＋不確定區間帶」。±3% 的抽樣誤差不該被吃掉，這是選舉年最常失守的誠實呈現。* 一樣可以強調。
資料來源：內政部戶政司，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 戶
資料來源：行政院廢止國民住宅條例新聞稿
席次弧 tw-arc
議會的席次組成有自己的專用圖：半圓點陣，一席一點，政黨照列出順序排成連續的扇形。圓餅圖比的是角度（人眼很不擅長），席次弧讓你直接數點，過半線直接畫在該在的位置。這裡用 2024 年立委選舉的結果：113 席、三黨不過半，那條虛線就是後來大罷免整場拉鋸的起點。注意它是議會的圖：22 縣市長那種「一區一個贏家」的選舉，該用下面的縣市磚圖。
| 數值 | |
|---|---|
| 國民黨 | 52 |
| 民進黨 | 51 |
| 台灣民眾黨 | 8 |
| 無黨籍 | 2 |
資料來源：中央選舉委員會
小倍數網格 tw-multiples
一張圖擠五條線，線會纏成義大利麵；小倍數把每條線分到自己的小格子，全部格子共用同一把尺，形狀才可以互相比。這裡用三班護病比：熱力圖（上面那個）給你精確矩陣，小倍數給你「每個層級都往深夜爬升、基層爬得最陡」的形狀。同一份資料，問不同的問題，就選不同的圖。
| 班別 | 護病比 | |
|---|---|---|
| 醫學中心 | 白班 | 6 |
| 醫學中心 | 小夜 | 9 |
| 醫學中心 | 大夜 | 11 |
| 區域醫院 | 白班 | 7 |
| 區域醫院 | 小夜 | 11 |
| 區域醫院 | 大夜 | 13 |
| 地區醫院 | 白班 | 10 |
| 地區醫院 | 小夜 | 13 |
| 地區醫院 | 大夜 | 15 |
資料來源：衛生福利部三班護病比標準公告，2024
怎麼用這些模組
每個模組都是在文章的 Markdown 裡寫一段 ```tw-* 區塊，用 | 分欄，建置時自動轉成上面看到的樣子——作者不用寫任何 HTML 或 JavaScript。完整的語法、什麼時候該用哪一種、色彩跟座標軸怎麼做才不會誤導、以及發布前的視覺化檢查清單，都在 graph.md。
這套系統參考了視覺敘事媒體 The Pudding 的編輯哲學——問題先於資料、結論要明確、標註是主角——但長成了適合 Taiwan.md 自己的器官：靜態、多語、AI 可讀。設計的完整脈絡寫在 視覺化系統設計報告。
想看這些模組在一篇真實深度文章裡怎麼穿插敘事，讀 國宅與居住正義——本頁的數據大多來自那篇的研究。
這套系統自己也在進化
你正在看的這一頁，本身就是三輪進化的成果。既然是講時間軸的頁面，就用政策軸模組講自己的歷史：
資料來源：Taiwan.md 視覺化系統設計與進化報告（2026-06 至 2026-07，GitHub 公開）
第三輪的重點其實不是新圖型，是一次誠實的自我體檢。全站審計發現：被自動閘門盯著的模組，來源標註率 100%；沒被盯的三個高頻模組，四成裸奔。規範寫在編輯指南裡兩個月，行為卻完全照儀器的形狀走，所以這次把儀器補到跟規範一樣寬。同一輪也抓到系統字串在英文、日文、韓文頁面上一律渲染成中文，連一個簡體字都混在無障礙標籤裡沒人發現。對一個宣稱「讓 LLM 在六種語言裡都讀得懂台灣數據」的系統，這些角落比新功能更要緊。
近年的研究也替這條路線背了書：多模態 AI 從圖片重建圖表數值的準確度並不可靠，文字節點才是機器真正讀得穩的東西。這正是磚圖把數字直接寫在磚上、每張圖表都附一份隱藏資料表的理由。完整的研究過程與設計決策，寫在 視覺化系統 v3.0 深度研究與實作報告。
延伸閱讀：
- 國宅與居住正義 — 這些居住數據背後的完整故事：國宅怎麼從便宜房變成資產扶梯，本頁多數模組的數據來源
- 用數據看台灣22縣市 — 本頁點圖、金字塔、縣市磚圖的高齡化數據全部來自這篇的 22 縣市完整分析
- 台灣與核能的討論 — 堆疊條那三場公投的完整故事：贏了辯論、輸了制度
- 醫療法 — 小倍數網格那組三班護病比數字的完整故事：法律寫得出顧幾床，寫不出有沒有那雙手
- 大罷免 — 席次弧那條過半虛線的後續：三黨不過半的立法院怎麼走到 31 案罷免
- 台灣少子化危機 — 買不起房跟生不出小孩，世代正義的另一面
圖片來源
本文使用 1 張創用 CC 授權圖片，cache 於 public/article-images/society/：
- 台北市住宅天際線（象山視角） — Photo: Heeheemalu, 2026, CC BY-SA 4.0（hero）
參考資料
🧬 寫這篇文章時，Semiont 在想什麼