tufte-data-viz

Tufte データビジュアライゼーション

データを視覚的に表示するコードを生成またはレビューする際は、Edward Tufte の原則を適用してください。このスキルの対象はチャートの生成であり、スライドやプレゼンテーションのデザインではありません。

ワークフロー

チャートを作成する際は、次の手順を順番に実行してください。

Step 1: メッセージを特定する

コードを書く前に、次の点を明確にします。

1. チャートで可視化すべき主要な発見や傾向。
2. 比較の文脈 — 基準値、前の期間、目標、または同業者グループ。文脈のない数値に意味はありません。
3. データ構造に最適なチャートの種類（下記の「チャートの種類に関するガイダンス」を参照）。

Step 2: 共通ルールを適用する

以下のルールを確認してください。各ルールはデフォルトです。ユーザーから明示的な指定がある場合に限り、変更してください。

Step 3: ライブラリ固有の設定を適用する

ライブラリのクイックリファレンステーブルで、対象ライブラリに必要な上書き設定を確認します。コード例とヘルパー関数について詳しくは、rules/ の中から対象ライブラリに合致するルールファイルを1つ読んでください。

Step 4: 検証する

チャートを提示する前に、このファイルの最後にある検証チェックリストに従って確認してください。

---

共通ルール

ルール1〜14は静的な原則を扱い、15〜19は画面向けの原則を追加し、20〜22は内容と書式を扱います。

1. 上枠線と右枠線を削除する

チャートに上または右の軸線、枠線、スパインを表示しないでください。下軸と左軸だけで十分です。上と右の線は、純粋なチャートジャンクです。

2. 凡例ではなく直接ラベルを付ける

各データ系列に直接ラベルを付けます — 線の終点、バーの上または横、クラスターの隣などに配置してください。<Legend> コンポーネントは完全に削除します。系列が1つだけの場合は、チャートタイトルがその文脈を示すため、ラベルは必要ありません。

3. デフォルトではグリッド線を表示しない

デフォルトではグリッド線を表示しません。正確な値を読み取る必要がある静的チャートでは、不透明度を非常に低く（0.08〜0.12）設定した水平方向のみのグリッド線を追加します。インタラクティブなチャートでは、代わりにホバー時に文脈に応じた十字カーソルを表示することを推奨します（ルール15を参照）。垂直方向のグリッド線は追加しないでください。

4. データ範囲に合わせた軸

軸線は、任意の最大値までではなく、データの範囲だけに合わせてください。軸はデータの最小値（またはその近辺）から始まり、最大値で終わります。

5. 3D 効果を使わない

透視表現、奥行き、チャート要素の影は使用しないでください。2次元のデータは、2次元で表現します。

6. 明示的に求められない限り円グラフを使わない

デフォルトでは、値の順に並べた横棒グラフを使用してください。ユーザーが円グラフを明示的に求めた場合は、扇形を最大4つとし、2D のみで、12時の位置から開始し、各扇形にパーセンテージを直接表示してください。

7. アスペクト比は約1.5:1

チャートの幅は高さの約1.5倍にしてください。標準サイズは600x400、750x500、900x600です。例外として、スパークラインやスモールマルチプルは、よりコンパクトにできます。

8. まずグレーを使い、選択的に強調する

デフォルトのデータ系列の色はミディアムグレー（#666）です。最も重要な系列またはデータポイントを強調するには、アクセントカラーを1色だけ使用してください。異なる色を4色より多く使用しないでください。適切なパレットの種類を選びます。順序のないグループには カテゴリカル（4色の落ち着いた配色）、順序のある大きさには シーケンシャル（単一色相のグラデーション）、中間点からの偏差には ダイバージング（中心から二つの色相に分かれる配色）を使います。16進数の色値は rules/typography-and-color.md を参照してください。

9. オフホワイトの背景

ライトモード：#fffff8。ダークモード：#151515。純白（#ffffff）や純黒（#000000）は使用しないでください。

10. データにはセリフフォントを使う

データラベル、注釈、チャートタイトルにはセリフフォントを使用してください。"ET Book", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif。サンセリフ（system-ui, sans-serif）は、小さな軸目盛りラベル（11〜12px）に限り使用できます。

11. y軸を二重にしない

1つのチャートに2つの y 軸を配置すると、誤った相関関係を暗示します。代わりにスモールマルチプルを使用し、x 軸を共有する2つのチャートを上下に並べてください。

12. 注目すべき点に注釈を付ける

データにピーク、谷、変曲点、またはイベントの境界がある場合は、チャート上でその箇所を直接指すテキスト注釈を追加します。注釈は最も近い空きスペースに配置します。必要に応じて、データポイントから少し離し、短い引き出し線を付けてください。複数の注釈がスペースを奪い合う場合は、最も重要なものだけを残し、ほかは脚注またはツールチップに移します。

13. 比較の文脈を示す

少なくとも1つの参照要素を含めます。参照線（平均、目標、前期間）、網掛けの帯、または2つ目の系列などです。文脈のない単一の折れ線を示すチャートは、「何と比べているのか？」という基準を満たしません。

14. ツールチップは最小限に

ツールチップは、データ値とラベルを示すプレーンテキストにします。色付きの背景、枠線、矢印、影は付けません。

15. 静的な情報の詰め込みより段階的な開示を優先する

デフォルトでは、タフテの原則に沿ったすっきりした概要を表示します。データインクの比率を高くし、装飾を最小限に抑えます。詳細（値、注釈、比較）は、ホバー、タップ、クリックで段階的に表示します。すべてを1つの静的なビューに詰め込まないでください。ホバー時に表示するコンテキスト付きの十字線を使えば、常時表示のグリッド線は不要です。

16. デフォルトでアクセシブルにする

チャート要素と背景のコントラスト比は最低3:1、チャート内のテキストは最低4.5:1にします。色だけで区別せず、形状、パターン、または直接的なラベルを組み合わせてください。すべてのチャートにテキストでの代替情報を用意します（主な発見を示すaria-label、または補足データテーブル）。インタラクティブなチャートはキーボードで操作できるようにします。

17. 単にサイズを変えるのではなく、レスポンシブにする

チャートには、流動的（幅のパーセンテージ＋viewBox）、適応型（ブレークポイントに基づくレイアウト変更）、またはハイブリッドのいずれかのレスポンシブ戦略が必要です。狭いビューポートでは、チャートの種類やレイアウトを変更します（カテゴリには横棒グラフを使う、目盛りの密度を下げる、ラベルを短縮するなど）。単に縮小するだけではいけません。

18. 装飾ではなく、説明のためにアニメーションを使う

データの変化（並べ替え、フィルタリング、時間の進行）を表すトランジションは、変化を追いやすくするため効果的です。不必要な登場アニメーション、バウンド、装飾的な動きはチャートジャンクです。時間は200～500ms、イージングはease-outにします。必ずprefers-reduced-motionを尊重してください。

19. ダークモードを第一級の機能として扱う

ライトモードとダークモードの両方の配色を意図的に設計します。色を単純に反転しないでください。ダークモードでは彩度を下げます（明るい色は暗い背景で「ちらついて」見えます）。prefers-color-schemeを尊重してください（--tufte-bg、--tufte-text、--tufte-series-defaultなどの）セマンティックカラーのトークンを使い、チャートが自動的に適応するようにします。

20. タイトルで発見を伝える

チャートのタイトルには軸の説明ではなく、主な洞察を示します。「四半期別収益、2024年」ではなく、「第3四半期の収益が23%急増」とします。サブタイトルには文脈（「前年同期比、百万米ドル」など）を記載できます。データに明確な発見がない場合は、チャート自体が不要かもしれません（ルール22を参照）。

21. 人にとって読みやすい数値形式を使う

大きな数値は省略表記にします。$1,200,000ではなく$1.2Mとします。中程度の数値には桁区切りを使います（12450ではなく12,450）。小数の精度は有意性に合わせます（$4.2Mで十分なら、$4.2391Mとは表示しません）。テーブル内の数値は右揃えにします。単位は統一し、各データポイントではなく、軸ラベルまたはタイトルに一度だけ記載します。

22. 一文で伝えられるデータはチャートにしない

データが1～2個の数値なら、文脈を含めた一文で記述します（「収益は$4.2Mで、第2四半期から23%増加しました」など）。データが3～5項目の単純な順位なら、テーブルを検討します。テキストやテーブルでは伝えられないパターン、傾向、分布を明らかにすることが、チャートにスペースを割く価値をもたらします。2本の棒だけを示すチャートは、ほとんどの場合、一文で伝えるより劣ります。

---

ライブラリのクイックリファレンス

上記の共通ルールは、ほとんどのチャートに適用できます。コード例とライブラリ固有のヘルパーについては、このスキルのフォルダーにある rules/ ディレクトリから該当するルールファイルをお読みください。タスクごとに読むルールファイルは1つだけにしてください。

ライブラリ	読むルールファイル	必須設定（ファイルを読まなくても適用）
Recharts	rules/recharts.md	<CartesianGrid stroke="none" />、<Legend />を削除、<YAxis axisLine={false} tickLine={false} />、<Line dot={false} strokeWidth={1.5} />
ECharts	rules/echarts.md	splitLine: { show: false }、legend: { show: false }、grid: { show: false }、系列にendLabelを使用
Chart.js	rules/chartjs.md	grid: { display: false }、border: { display: false }、plugins.legend.display: false、chartjs-plugin-datalabelsを使用
matplotlib	rules/matplotlib.md	spines['top'].set_visible(False)、spines['right'].set_visible(False)、spines['bottom'].set_bounds(min, max)、font.family: serif
Plotly	rules/plotly.md	showgrid=False、showlegend=False、plot_bgcolor='#fffff8'、zeroline=False
D3/SVG/HTML	rules/svg-html.md	.domain { display: none }、背景に<rect>を使用しない、すべてのグリッド線にstroke-opacity: 0.1を指定

---

チャートの種類に関するガイダンス

種類	主な設定
折れ線	線幅は1.5～2px、7点未満の場合を除きdot={false}（その場合はr=2）、最も右の点に直接ラベルを付ける
棒	カテゴリには横棒を優先し、値の降順で並べ替え、値ラベルを直接表示、デフォルトの塗りつぶしは#7a7a7a
散布図	灰色の点は#999、r=3、アクセントカラーで主要なクラスター／外れ値を強調し、意味がある場合は回帰直線を表示（細い破線）
時系列	チャート上にイベント（「景気後退」「ローンチ」）を表示、x軸を範囲枠で囲み、YoYは不透明度で表現（当年は不透明、前年は30%）
スモールマルチプル	すべてのパネルで同じスケールを使用し、軸ラベルを共有（xは最下段、yは左端の列）、パネルの枠線は付けない
スパークライン	約80x20px、軸／ラベル／グリッド線なし、最小値／最大値の点はr=1.5、テキストまたは表のセル内に埋め込む
データテーブル	ゼブラストライプは使わず、余白と3～5行ごとの細い罫線を使用し、数値を右揃えにする。font-feature-settings: 'onum' 1
スロープグラフ	変更前／変更後のカテゴリを並べ、両端に値と名前のラベルを付け、デフォルトは灰色、主要な傾きを強調
面	折れ線を優先。面を使う場合は、fillOpacityを0.03～0.08にし、グラデーションは使わず、端点に直接ラベルを付ける
積み上げ棒	避け、代わりにスモールマルチプルを使用。どうしても必要な場合は、合計値で並べ替え、各セグメントに直接ラベルを付け、セグメントは最大4つにする
ヒートマップ	シーケンシャルまたはダイバージングのカラーパレットのみを使用し、セル内に値ラベルを表示。アクセシビリティのため、補足のデータテーブルを用意する

スモールマルチプル、スパークライン、スロープグラフの実装パターンについては、rules/small-multiples-sparklines.mdを参照してください。

---

色のクイックリファレンス

トークン	ライト	ダーク
背景	#fffff8	#151515
テキスト	#111	#ddd
セカンダリテキスト	#666	#999
軸／罫線	#ccc	#444
グリッド（使用する場合）	#eee（不透明度8～12%）	#333
デフォルトの系列	#666	#999
強調色	#e41a1c	#fc8d62

カテゴリカラー（最大4色）： #4e79a7 スチールブルー · #f28e2b タンジェリン · #e15759 コーラル · #76b7b2 セージ

フォントスタックについてはルール10を参照してください。すべてのカラーパレット（シーケンシャル、ダイバージング）、フォントの読み込み、オールドスタイル数字については、rules/typography-and-color.mdを参照してください。

---

アンチパターンの検出

既存のチャートコードをレビューする際は、次の点を確認してください。凡例（→直接ラベルにする）、円グラフ（→横棒グラフにする）、3D 効果（→フラットな 2D にする）、2 つの y 軸（→スモールマルチプルにする）、目立つグリッド線（→削除するか、不透明度を 0.1 にする）、虹色のパレット（→グレー＋アクセントカラーにする）、ゲージウィジェット（→数値＋スパークラインにする）、グラデーション塗りつぶし（→単色にする）、回転したラベル（→軸を反転するか、省略する）、純白／純黒の背景（→#fffff8／#151515にする）、ホバー時のみ表示される情報（→タップ／フォーカス時の代替手段を用意する）、テキストによる代替情報の不足（→aria-labelを追加する）、色だけによる表現（→形状／パターンを追加する）。

ライブラリごとの検出パターンと、簡潔な修正方法をまとめた表については、rules/anti-patterns.mdを参照してください。

---

検証チェックリスト

チャートを提示する前に、次の点を確認してください。

• 上辺と右辺の境界線／軸線がない
• Legend コンポーネントを使用せず、系列をチャート上に直接ラベル付けしている
• グリッド線を削除しているか、水平線のみで不透明度が 0.12 以下である
• アスペクト比がおよそ 1.5:1 である
• 背景色が純白／純黒ではなく、#fffff8（ライト）または#151515（ダーク）である
• データラベルとタイトルにセリフ体フォントを使用している
• 系列のデフォルト色がグレー（#666）で、色は強調にのみ使用されている
• 3D 効果がなく、円グラフも使用していない（明示的に要求された場合を除く）
• 軸線がデータ範囲内のみに引かれている（range-frame）
• 重要なデータの特徴をチャート上に直接注釈している
• 比較の文脈がある（基準線、帯、または第 2 系列）
• ツールチップが装飾的なスタイルのないプレーンテキストである
• インタラクティブな要素にタップ／クリック／フォーカス時の代替手段がある（ホバー時のみの表示は不可）
• コントラスト比が最低基準の 3:1（要素）／4.5:1（テキスト）を満たしている
• チャートにテキストによる代替情報がある（aria-label、説明、またはデータテーブル）
• アニメーションがprefers-reduced-motionに従っている
• 320px と 1440px 以上の幅でチャートが実用的に表示される
• タイトルが軸の説明ではなく、知見を示している
• 数値が読みやすくフォーマットされている（省略表記、区切り文字、一貫した精度）
• チャートを使う必要がある（データを文章や表で伝えられない）

---

追加リソース

ライブラリ別ルール（タスクごとに 1 つ読む）：rules/recharts.md、rules/echarts.md、rules/chartjs.md、rules/matplotlib.md、rules/plotly.md、rules/svg-html.md — 完全なコード例、ヘルパー、テーマ登録が含まれています。

分野横断のルール（必要な場合に参照）：

• rules/interactive-and-accessible.md — 段階的な情報開示、WCAG、レスポンシブ対応、アニメーション、ダークモード
• rules/typography-and-color.md — フォントの読み込み、パレット全表、オールドスタイル数字
• rules/anti-patterns.md — ライブラリごとの検出ヒューリスティックと修正方法
• rules/small-multiples-sparklines.md — スモールマルチプル、スパークライン、スロープグラフのレイアウトパターン

examples/に動作するサンプルがあります。ライブラリごとのサンプルに加え、インライン SVG スパークラインも含まれています。