fable-dataviz

Fable DataViz

データが実際に示していることを変えずに、読み取りやすい視覚的な主張へと変換します。

ミッション

チャートは、規模、傾向、分布、関係性、不確実性、構成についての主張です。最初にすべきことは、その問いに合った視覚表現を選ぶことです。次に、統計的な意味を保ちます。スタイリングはその後です。

見栄えのよい色を使った有効な SVG であっても、軸を誤解を招く形で切り詰めたり、互換性のないグループを集計したり、欠損データを隠したり、相関から因果関係を示唆したり、元データが裏付けていない精度を捏造したりすれば、悪い可視化になり得ます。

以下の場合に有効化

• 指標／傾向／分布／比較／関係性を視覚的に説明する必要がある場合；
• ベンチマーク／評価結果をチャートや統計グラフィックで示す必要がある場合；
• レポート／成果物に、根拠に基づいたビジュアルが必要な場合；
• 生データを SVG／チャートコードまたはビジュアル仕様に変換する必要がある場合。

以下の場合は有効化しない

• 実際のデータがなく、値を捏造する必要がある場合；
• 少数の項目を調べるタスクでは、単純な表のほうが正確で読みやすい場合；
• 中心となるタスクが視覚表現ではなくドキュメント構成である場合（fable-artifact）；
• ユーザーがデータ可視化ではなく、説明用の画像を求めている場合。

問いの分類

問い	最初に検討する視覚表現	よくある誤用
カテゴリを比較する	棒グラフ／ドットプロット	似た大きさのスライスが多い円グラフ
順序のある時間の傾向を見る	ベースラインに注意した折れ線／面グラフ	順序のないカテゴリを結ぶ折れ線グラフ
分布を見る	ヒストグラム／箱ひげ図／バイオリンプロット／ドットプロット	平均値だけを示す棒グラフ
関係性を見る	スケール上の注意書きを添えた散布図／バブルチャート	相関を装う二軸グラフ
全体に占める割合を見る	積み上げ棒グラフ／100％積み上げ棒グラフ；限定的な円グラフ	ひとつの全体を構成していない要素を合計する
順位を見る	順に並べた棒グラフ／ドットプロット	順位がわからなくなるアルファベット順
単一の KPI と文脈を示す	統計値＋ベースライン／変化	分母／期間のない巨大な数値
不確実性を示す	区間／帯／誤差範囲	ばらつきを隠した精密な点

プロトコル

ステージ 1 — データの出所と意味上の取り決めを確認する

以下を記録します。

• 出典／データセット／バージョン／期間；
• 単位と分母；
• カテゴリ／時間の定義；
• 欠損値／null の意味；
• 値が件数、割合、パーセンテージ、通貨、推定値、モデル出力のいずれであるか；
• 利用可能な不確実性／精度。

出典や指標の意味が曖昧な場合は、描画する前に作業を止めて解決します。

ステージ 2 — 視覚的な問いを明確にする

次の文を一文で書きます。このチャートは、読者が___を把握できるようにする必要があります。

互いに無関係な問いが複数ある場合は、ひとつの過剰なチャートに押し込まず、個別のビューを作成します。

ステージ 3 — 変換を検証する

プロットする前に、以下を明示的に定義します。

• フィルター；
• グループ化／集計；
• 正規化／分母；
• 並べ替え；
• 日付の区切り／タイムゾーン；
• 欠損値／外れ値の扱い；
• 派生指標／計算。

変換の前後で合計値／範囲を確認します。主張を変えるレコードを、決して黙って除外してはいけません。

ステージ 4 — 視覚表現とスケールを選ぶ

可能であれば、正確な比較には位置／長さを使用します。指標の意味に基づいて、線形／対数／パーセンテージのスケールを選びます。

ベースラインのルール：

• 長さで規模を表す棒グラフでは、通常、意味のあるゼロが必要です；
• 折れ線／散布図の軸は、明確にラベル付けされ、示唆を誇張しない場合に限り、ゼロ以外の範囲を使用できます；
• 対数スケールには正の値が必要で、明示的なラベル付けが求められます；
• 二軸グラフはリスクが高く、十分な正当化が必要です。

ステージ 5 — 不確実性とデータ品質を表現する

推定値に区間／分散／サンプルサイズがある場合、重要であればそれらを表示または明記します。欠損している期間／カテゴリは、観測値であるかのようにつないで表示せず、欠損として示します。

元データの精度で正当化できる桁数を超えて、小数点以下の桁数を表示してはいけません。

ステージ 6 — 読みやすさとアクセシビリティを考慮して設計する

以下を優先します。

• 指標やコンテキストを示す具体的なタイトル。
• 凡例の読み解きを減らせる場合は、データに直接ラベルを付ける。
• 読みやすいタイポグラフィと余白。
• コントラストと色以外の手がかり。
• SVG のアクセシブルなタイトルと説明。
• レスポンシブな viewBox と適切なコンテナの動作。
• 単位と出典の注記。

意味を表す際に、赤と緑の区別や色相だけに頼らないでください。

ステージ 7 — レンダリングされた成果物を検証する

以下を確認します。

• グラフが欠けたり重なったりせずにレンダリングされる。
• データ座標が元の値と一致している。
• 軸、目盛り、ラベル、凡例が正しい。
• レスポンシブな場合は、小画面と大画面の両方で適切に表示される。
• 必要な場合は、ライトテーマとダークテーマの両方で適切に表示される。
• アクセシビリティ用メタデータがある。
• 変換コードやレンダリングコードによって順序や値が気付かないうちに変わっていない。

ステージ 8 — 誤解を招く表現がないか監査する

以下を確認します。

• 合理的な読者が、元データの裏付けを超える大きさの効果を推測しないか。
• 分母や期間が明確か。
• 欠損値が隠されていないか。
• 注釈が、立証されていない因果関係を示唆していないか。
• 基準が異なるため、カテゴリ同士の比較ができなくなっていないか。

見た目だけでなく、視覚表現が伝える主張を修正してください。

判断ルール

• データ、ラベル、サンプルサイズ、出典、ベンチマーク結果を決して創作しないでください。
• 分母や基準値のない割合は、可視化する前に背景情報を補う必要があることがよくあります。
• 正確な比較が必要な場合やカテゴリ数が多い場合は、円グラフやドーナツグラフを避けてください。
• 極値やイベントが重要な場合、単に点を削除してダウンサンプリングしないでください。文書化された集約またはサンプリング方法を使用してください。
• 領域で明示的に定義されていない限り、欠損値をゼロとして扱わないでください。
• 自然な順序や順序に関する意味がある場合を除き、問いに適した順序にカテゴリを並べ替えてください。
• 原則として、棒グラフはゼロを基準値にしてください。例外として、切り詰めても誤解を招かない表現を用いる場合は、そのことが常に明確に分かるようにしてください。
• 相関グラフや時間的な一致だけでは、因果関係を示す注釈の根拠になりません。
• 目標サイズでグラフの可読性を保てない場合は、ラベルを読めないほど小さくするのではなく、簡略化または分割してください。

不変条件

• プロットされたすべてのマークが、元データまたは変換処理のロジックに対応している。
• 単位、分母、期間が正確に保たれている。
• 欠損データや不確実なデータを、気付かれないまま確実なものに変換しない。
• 尺度の選択によって、規模を意図的に誇張しない。
• アクセシビリティが色だけに依存しない。
• レンダリング結果を、元データと変換手順までたどれる。

失敗の分類

問いに合わないグラフ

読み手が正確な比較を必要としているのに、構成比を示す表現になっています。分析上の問いに応じてグラフを選び直してください。

集約による歪み

グループ化や正規化によって分母が変わったり、重要なサブグループの挙動が隠れたりしています。変換処理を再計算し、その内容を文書化してください。

尺度による誤解

軸や表示範囲によって、小さな変化が極端に見えます。適切な基準値や表示範囲、ラベルに戻してください。

欠損データの捏造

正当な理由なく、null の期間がゼロまたは補間値として描かれています。欠損を表示するか、補完方法を文書化してください。

過剰な重なり・混雑

マークやラベルが重なり、分布が見えなくなっています。集約、ファセット分割、適切なサンプリング、または表現方法の変更を行ってください。

アクセシビリティの不備

コントラストや色だけに依存した意味表現、あるいは文字サイズが原因で解釈できません。色以外の手がかり、直接ラベル、アクセシブルなメタデータを追加してください。

出典の不確実性

指標の意味や出所が不明確です。描画を止め、出典の仕様を確認してください。

アンチパターン

• 問いを理解する前に「ドーナツグラフにする」ことから始める。
• 変化を誇張するために棒グラフの軸を切り詰める。
• 相関を作り出すために二重軸を使う。
• 欠損値をゼロとして扱う。
• グラフを完成して見せるためにサンプルデータを創作する。
• 開示せずに、スパイクを取り除くダウンサンプリングを行う。
• 面積や長さを歪める 3D や遠近法の効果を使う。
• 意味上の理由がないのに虹色のパレットを使う。
• 単位や期間のない「売上」のようなタイトルを付ける。
• SVG の構文を解析できることを理由に、グラフを検証済みと宣言する。

可視化パケット

Question / intended takeaway:
Source + version/timeframe:
Metric definition / unit / denominator:
Transformations:
Missing/outlier/uncertainty handling:
Encoding + scale rationale:
Accessibility choices:
Rendered validation:
Deception audit:
Source note:

完了条件

以下を満たすと、可視化は完了です。

• 視覚的な問いと指標の意味が明確であること。
• 変換を再現でき、合計値／範囲を確認済みであること。
• エンコーディング／スケールが分析タスクに適しており、歪みがないこと。
• 欠損データや不確実性を誠実に示していること。
• 成果物が対象のサイズ／テーマでアクセシブルに表示されること。
• ソース／データからマークまでの追跡可能性があること。
• データが裏付ける範囲を超える主張がないこと。

段階的なリソース

• 詳細ガイド：references/truthful-chart-selection-and-validation.md
• 既存のデザインシステム：references/dataviz-design-system.md
• 例：examples/render-bar-chart.md