可視化モジュールカタログ：台湾のデータを見る19の方法

30秒で概観： このページはTaiwan.md可視化システムの「実例集」です——19種類の記事内可視化モジュールをそれぞれ一度ずつレンダリングし、すべて実際の台湾データ（住宅価格所得比、国宅、高齢化、国民投票、看護師患者比、立法院議席）を使用しています。これは編集ガイドgraph.mdのパートナーです：graph.mdが「いつどのモジュールを使うか、どう作ればよいか、構文をどう書くか」を説明するのに対し、このページでは「実際にどう見えるか」を直接確認できます。 すべてのモジュールは純粋なHTML/SVGでレンダリングされるため、人間、スクリーンリーダー、Google、AIクローラーがすべて同じデータを読み取れます——これが私たちがインタラクティブなグラフではなく静的可視化を選んだ理由です。

数字を扱う記事を書くとき、最も避けたいのはデータを数字の羅列だけの段落にしてしまい、読者が3つ目のパーセンテージで読むのをやめてしまうことです。可視化の役割は、「数字が密集したプローズ」を「一目で読める構造」に逆エントロピー化することです。

しかし、Taiwan.mdの可視化には他にはない規律があります：「LLMにも読める可視化」だけを作るのです。D3やCanvasで描いたインタラクティブなグラフは派手ですが、GPTBot、PerplexityBot、ClaudeBotといったAIクローラーはJavaScriptを実行しません。それらにとってそのグラフは真っ白な空白です。一方、セマンティックHTMLとインラインSVGで作ったグラフなら、データがソースコードにそのままあり、AIは6言語すべてで台湾のファーストパーティデータを読み取り、引用できます。LLMが読める可視化こそが、主権の可視化なのです。

以下の19モジュールは、最もシンプルな「大きな数字一つ」から「県市レンガ図」「議席アーク」まで順に紹介します。構文の書き方と設計原則の完全版はgraph.mdにあります。ここでは「これは何か、いつ使うか」を一言だけ添えています。

データ大字 tw-figure

最もシンプルかつ強力なタイプ：劇的な数字を最大サイズで配置し、前後で対比させて一つの転換を語ります。冒頭の「スレッジハンマー統計」として適しています。

データ組 tw-stat

一つの段落に3〜4個の主要数字が並列しているとき、長文にするよりカード型で一列に並べ、読者が一目で把握できるようにします。

出典：行政院廃止国民住宅条例ニュースリリース、内政部不動産情報プラットフォーム

データを含む編集モジュール（データ組、対比カード、政策軸）もグラフモジュールと同様に出典：を記載する必要があります。2026年7月の全サイト監査で、自動ゲートで監視されているモジュールの出典記載率は100%でしたが、監視対象外だったこの3つの高頻度モジュールでは、実に4割の例が出典なし（裸奔）でした。現在はこれらもviz-healthゲートに組み込まれています。

対比カード tw-versus

二つの制度、二つの立場、または前後の二つの状態を項目ごとに対比します。左は暖色、右は冷色、中央に「vs」を配し、差異を行ごとに読み進められます。

出典：立法院公報、香港房屋委員会

比例バー tw-bars

少数カテゴリの数値比較やランキングに用います。水平バーの長さが数値に応じて自動スケーリングされ、最大値で幅いっぱいになります。データモジュールの最後に出典：行を加えると、自動的に下部の出典注記になります。

出典：内政部不動産情報プラットフォーム、政大不動産研究センター

方格図 tw-waffle

部分対全体の比例構成を示します。100マスで100%を表し、円グラフより直感的です——実際にマスを数えられます。「各カテゴリの占める割合」の合計が約100になるデータに適しています。

出典：ウィーン市政府（Stadt Wien）住宅統計

政策軸 tw-timeline

制度や政策の重要な節点をタイムラインでつなぎます。これは「視覚補助」であり、本文の小見出しを編年体（「1975年…」を見出しにする）にしてはいけないのとは別物です。

出典：立法院公報、行政院廃止国民住宅条例ニュースリリース

引用カード tw-quote

一言で記事全体の核心的緊張を表せるとき、それを大きな引用カードにします。引用符「」は自分で付けず、モジュールが自動で付けます。引用は逐語的かつ検証可能でなければなりません。

出典チップ tw-source

一つの分析のデータソースを控えめなチップにまとめ、段落の脇に置きます。信頼性はキュレーションの一部です——台湾のデジタルメディアはしばしば出典を忘れますが、そこが私たちの差別化ポイントです。

⌖内政部不動産情報プラットフォーム、実価登録、政大不動産研究センター、立法院公報、香港房屋委員会

説明ボックス tw-note

データ記事の信頼性の半分は「どう計算したか」にあります。報道者はデータジャーナリズムで【説明】ブロックを使って計算方法を記し、（注）で訂正を示します。この慣習をモジュール化しました。最初の行に説明／方法／注／訂正／更新のいずれかを書き、以降各行が一つの段落になります。

折れ線グラフ tw-line

4時点以上のトレンドをインラインSVGで折れ線として描画し、Y軸の上下限を表示して範囲を可視化します。最も重要なのは——自動的に隠しデータテーブルを生成し、スクリーンリーダーとAIクローラーが生データを読み取れるようにすることです。グラフは人間向け、テーブルは機械向け、両者は同源です。

出典：政大不動産研究センター、内政部不動産情報プラットフォーム

折れ線グラフは基準線もサポートします：基準：ラベル | 値という行を加えると、破線で端点なし、ラベルのみで描画され、実測系列と視覚的に区別されます。読者が固定の閾値を実測データと誤読するのを防ぎます。

傾きグラフ tw-slope

「二時点のみ」のとき、折れ線グラフでは中間の空白が無駄になります。傾きグラフは両端を直線で結び、その傾きで誰が大きく伸びたか、誰が追い抜いたかを一目で示します。行頭に*を付けるとその行を強調し、他は自動的にグレーアウトして文脈になります。

出典：内政部不動産情報プラットフォーム、政大不動産研究センター

ヒートマップ tw-heatmap

地域×指標、または年×カテゴリのマトリクス比較です。各列を個別に正規化して色の濃淡にし、数値が大きいほど暖色になります。これはそれ自体がHTMLテーブルであるため、生まれながらにAI可読です——これがヒートマップが「一枚のカラー画像」より優れている理由です。

出典：内政部不動産情報プラットフォーム

ドットプロット tw-dot

棒グラフが「量」を比べるのに対し、ドットプロットは「分布」を見ます：すべてのドットが同じ物差し上に並ぶため、どこに集中しているか、どこが外れ値かがわかります。各行一つの値ならドットストリップ；二値なら「ここからそこまで」の区間；三値（点推定 | 下限 | 上限）なら世論調査風の「点推定＋不確実性帯」になります。±3%のサンプリング誤差を隠してはなりません——これは選挙イヤーに最も見落とされがちな誠実な提示です。*で強調可能です。

出典：内政部戸政司、2025年末

積み上げバー tw-stack

方格図が「一つの全体」の構成に適するのに対し、積み上げバーは複数行の構成を比較するのに適します——各行が自動的に100%に正規化され、幅が十分あれば数値が色ブロック内に直接表示されます。

出典：中央選挙委員会3回の国民投票公式確定結果

人口ピラミッド tw-pyramid

背中合わせの棒グラフ、左右にそれぞれ一つの陣営、中央に共通ラベル——人口学の古典的図式です。ここでは6県市の「頭重脚軽」を見ます：左が子供、右が老人、両側を比べると高齢化が単なる抽象的パーセンテージではなくなります。

出典：内政部戸政司2025年末；幼年占比は高齢化率 ÷ 老化指数 × 100で推計

県市レンガ図 tw-tiles

台湾のコロプレス地図には二つの古い問題があります：花蓮・台東の面積が大きすぎて視覚的重みを奪うこと、AIが手描きした台湾の形が「オリーブとジャガイモの間」のようになることです。レンガ図は22県市を等サイズのレンガ（レイアウトはシステムにハードコード済み、実在の相対位置に基づく）に並べ、各レンガの重みを均等にし、数字を直接レンガ上に書きます。形を描かないからこそ、形は永遠に正しいのです。

出典：内政部戸政司、2025年末

単位図 tw-iso

「174,891戸」は読んですぐ忘れる数字ですが、指で数えられる9つのドットなら違います。単位図は大きな数字を「一つの記号＝何単位」という数えられる単位に置き換えます——これは遠洋漁業特集をする報道者の心得です：実感の湧かない巨大な数字を、国民が実感できる単位に変換するのです。記号は整数のみ（半分は使わない）、正確な値は横に併記します。

出典：行政院廃止国民住宅条例ニュースリリース

議席アーク tw-arc

議会の議席構成には専用の図があります：半円ドットプロット、一議席一ドット、政党を出現順に連続した扇形に並べます。円グラフは角度を比べます（人間の目は苦手）が、議席アークなら直接ドットを数えられ、過半数ラインがまさにあるべき位置に引かれます。ここでは2024年立法委員選挙の結果を用います：113議席、三党とも過半数割れ、あの破線が後の大罷免という綱引きの出発点になったのです。これは議会用の図です：22県市長選のような「一選挙区一勝者」の選挙には、下の県市レンガ図を使います。

出典：中央選挙委員会

小倍数グリッド tw-multiples

一枚のグラフに5本の線を詰め込めばスパゲッティのように絡まります；小倍数なら各線をそれぞれの小さな枠に分け、すべての枠が同じ物差しを共有するため、形状を比較できます。ここでは三交代制服組三班の看護師患者比を用います：ヒートマップ（上記）が精密なマトリクスを与えるのに対し、小倍数は「すべての階層で深夜に向かって上昇し、基層ほど急勾配」という形状を与えます。同じデータでも、問いが違えばグラフも変わります。

出典：衛生福利部三班看護師患者比基準公告、2024

これらのモジュールの使い方

各モジュールは、記事のMarkdown内に```tw-*ブロックを書き、|で列を区切るだけで、ビルド時に自動的に上記のような見た目になります——作者はHTMLやJavaScriptを一切書く必要がありません。完全な構文、どのモジュールをいつ使うべきか、配色と座標軸をどう設計すれば誤解を招かないか、公開前の可視化チェックリストなどはすべてgraph.mdにあります。

このシステムは可視化ナラティブメディアThe Puddingの編集哲学——問いがデータに先立ち、結論は明確に、注記こそが主役——を参照していますが、Taiwan.md独自の器官へと成長しました：静的、多言語、AI可読。設計の全脈絡は可視化システム設計報告に記しています。

これらのモジュールが実際の深度記事でどうナラティブに織り込まれるかを見たい方は国宅と居住正義をお読みください——本ページのデータの多くはその記事の研究から来ています。

このシステム自身も進化し続けています

あなたが今見ているこのページ自体が、3回の進化の成果です。タイムラインを語るページなので、自分自身の歴史を政策軸モジュールで語ります：

出典：Taiwan.md可視化システム設計と進化報告（2026-06〜2026-07、GitHub公開）

第3ラウンドの焦点は実は新しいグラフタイプではなく、一度の誠実なセルフチェックでした。全サイト監査で判明：自動ゲートで監視されているモジュールの出典記載率100%；監視対象外の3つの高頻度モジュールでは4割が裸奔。規範は編集ガイドに2ヶ月前から書かれていたのに、行動は完全にツールの形状に従っていた——だから今回、ツールを規範と同じ幅まで拡張しました。同ラウンドで、システム文字列が英日韓ページで一律中国語でレンダリングされ、簡体字までアクセシビリティタグに紛れ込んでいたのを誰も気づいていなかったことも発見。「LLMが6言語すべてで台湾データを読めるようにする」と謳うシステムにとって、これらの隅々は新機能より重要です。

近年の研究もこの路線を後押ししています：マルチモーダルAIが画像からグラフ数値を再構築する精度は信頼できず、テキストノードこそが機械が真に安定して読めるものです。これがレンガ図が数字を直接レンガに書き、すべてのグラフに隠しデータテーブルを付ける理由です。完全な研究過程と設計決定は可視化システムv3.0深度研究と実装報告に記しています。

関連記事：

• 国宅と居住正義 —— これらの居住データの裏にある完全な物語：国宅がいかに安い家から資産のエスカレーターへ変貌したか、本ページの大半モジュールのデータソース
• データで見る台湾22県市 —— 本ページのドットプロット、ピラミッド、県市レンガ図の高齢化データはすべてこの記事の22県市完全分析から
• 台湾と原発の議論 —— 積み上げバーの3回国民投票の完全な物語：議論に勝ち、制度に負けた
• 医療法 —— 小倍数グリッドの三班看護師患者比数値の完全な物語：法律は何床見るかは書けるが、その手があるかは書けない
• 大罷免 —— 議席アークの過半数破線の続き：三党とも過半数割れの立法院がいかに31件の罷免へ至ったか
• 台湾少子化危機 —— 家が買えないことと子供が産めないこと、世代正義のもう一つの顔

画像出典

本文で1枚のクリエイティブ・コモンズライセンス画像を使用、public/article-images/society/にキャッシュ：

• 台北市住宅スカイライン（象山視点） — Photo: Heeheemalu, 2026, CC BY-SA 4.0（ヒーロー画像）

参考資料