d3-animated-data-visualization

D3 によるアニメーションデータビジュアライゼーション

データによって、レンダリングされるメディアシーケンスのマーク、スケール、レイアウト、ラベル、アニメーションが決まる場合に、このスキルを使用します。標準的なチャートコンポーネントでは必要なエンコーディングや演出を十分に制御できない場合、D3 が役立ちます。

目的は数値を動かすことではありません。時間の経過に伴う注目の集め方を制御しながら、意味を保つことです。ソースの完全性、分母、単位、不確実性、スケール、変換は、フッターに飾りとして添えるものではなく、制作に必要な入力情報です。

エビデンスに対する姿勢

• 文書化された事実： 公式の D3、W3C、または引用された標準仕様の文書に記載されている動作や要件です。
• 制作上のヒューリスティック： データセット、対象者、配信方法によって異なる実用的な選択です。
• 実証的な観察： 実際のデータ、レイアウト、レンダリングされたフレーム、またはエンコードされた出力から測定された結果です。

D3 のパッケージと API は、それぞれ独立したバージョンで管理されています。情報は 2026-07-12 に確認しました。モジュールの正確なバージョンを記録し、インストール済みのセットが異なる場合は公式ドキュメントを再確認してください。

D3 を使用する場面

次の用途には D3 を使用します。

• スケール、図形、軸、SVG または Canvas のマークを使ってカスタムの視覚エンコーディングを構築する場合。
• タイムライン、分布、階層構造、地図投影、フロー、ネットワークを表現する場合。
• 状態間で安定した ID を維持する必要があるデータ結合を行う場合。
• データに紐づいた精密な注釈やソース注記を付ける場合。
• ブラウザーでレンダリングされる動画内で、決定的なフレーム評価を行う場合。
• スケールとレイアウトの再計算が必要な、レスポンシブなチャートのバリエーションを作成する場合。

真実に即したチャート、ラベル付け、アクセシビリティ、エクスポートの要件に対応できる標準的なチャートコンポーネントがあれば、そちらを優先してください。データがすでに承認済みの少数の値に集約されており、データ駆動型のレイアウトが残っていない場合は、モーションコンポジターを優先してください。イラスト用または捏造した数値に、見せかけの信頼性を与えるために D3 を使用してはいけません。

データと主張に関する取り決めを確立する

チャートを選ぶ前に、次の事項を記録してください。

• 問いと、意図する要点。
• ソースの組織、データセット／テーブル、URL または識別子、取得日、ライセンス、所有者。
• 対象集団、地域、期間、サンプル、分母、単位、通貨の基準、定義。
• 欠損値、除外、改訂、打ち切り、既知の収集方法の変更。
• 変換：集計、正規化、指数化、インフレ調整、平滑化、移動ウィンドウ、補間、予測、モデル出力。
• 不確実性、信頼区間、誤差範囲、シナリオ範囲、または推定値であることを示すステータス。
• 承認された主張と、ビジュアライゼーションから暗示してはならない主張。
• アスペクト比、尺、fps、キャプション／ソース注記用の領域、アクセシブルな代替手段。
• データのチェックサムと、ビジュアライゼーション設定のバージョン。

これらの項目を確定できない場合は、出力に「探索的」と明記するか、公開を見合わせてください。欠損データを黙って修正したり、分母を推測したり、都合のよい期間を選んだりしてはいけません。

質問に答えるエンコーディングを選ぶ

比較タスクに合ったグラフを選びます。

質問	一般的な出発点	主な整合性リスク
カテゴリを比較する	順序付き棒グラフまたはドットプロット	長さの基準線が途中で切られている、順序が不安定
時間の経過に伴う変化を示す	折れ線、ステップ、面グラフ、またはスモールマルチプル	平滑化によって観測値があるように見える、欠落した区間が隠れる
分布を示す	ヒストグラム、ストリッププロット／ドットプロット、箱ひげ図、密度プロット	ビン幅／帯域幅の操作、サンプルサイズが隠れる
関係を示す	注釈付き散布図	相関が因果関係として示唆される、点の重なり
部分と全体の関係	積み上げ棒グラフまたは慎重にラベル付けした面グラフ	合計が一致しない、小さなセグメントが読めない
地理情報	投影地図と正規化した尺度	生の件数が率と誤解される、投影による歪み
階層	ツリー、ツリーマップ、パーティション	面積／角度の比較が難しい、階層が曖昧
ネットワーク／フロー	ノードリンク、サンキー図、コード図	レイアウトが地理的位置や重要度と誤解される

実装時のヒューリスティクス：

• 面積、角度、色相を正確な比較に使うよりも、共通の尺度上の位置を優先し、次に長さを使います。
• 長さで大きさを表す棒グラフは、通常ゼロから始めます。折れ線グラフでは、範囲を限定しても、明確にラベル付けされ、文脈が保たれていれば問題ありません。
• 関係性と独立した尺度が不可欠で、目立つ形で示され、誤った相関の印象を与えにくい場合を除き、二重軸は避けます。
• 位置、長さ、面積、重なりを歪める場合は、定量的なマークに3Dの遠近法を使わないでください。
• 複数の系列を同時に表示すると読みにくくなる場合は、スモールマルチプルを使います。
• 順位が伝えたい内容であればカテゴリを並べ替えます。並べ替えると誤解を招く場合は、意味上または時系列上の順序を保ちます。

見た目を整えるという理由だけで、線を平滑化しないでください。曲線は実際の値を超えて振れたり、測定されていない中間の動きがあったかのように示唆したりすることがあります。観測値をより適切に表す場合は、線形補間またはステップ補間を使い、平滑化の方法を説明してください。

尺度、軸、マークを構築する

文書化された事実： D3の尺度はドメインをレンジにマッピングします。D3には、連続、シーケンシャル、発散、量子化、しきい値、順序、バンド、ポイント、時間など、さまざまな尺度の種類があります。軸は尺度から人が読みやすい目盛りを描画します。シェイプジェネレーターはデータをパスの形状に変換します。

実装上の契約：

• ドメインは、望ましい視覚的な演出ではなく、承認済みのデータとポリシーから導きます。
• 文書化された正当な例外がない限り、長さで大きさを表すマークにはゼロを含めます。
• 無効値、欠損値、ゼロ値、負の値を明示的に処理します。
• 対数尺度は正のドメインでのみ使用し、明確にラベル付けします。符号付きの値が重要な場合は、symlogまたは別の妥当な方法を使います。
• 単位と重要な意味を保つ目盛りの書式を選びます。
• 最終表示中も、軸、単位、出典、不確実性が見えるようにします。
• データのマークと注釈には安定したIDを使います。

尺度設定の例：

const x = d3.scaleBand()
  .domain(data.map((row) => row.category))
  .range([plotLeft, plotRight])
  .padding(0.22);

const y = d3.scaleLinear()
  .domain([0, d3.max(data, (row) => row.value)])
  .nice()
  .range([plotBottom, plotTop]);

これは正の棒の大きさを扱う例であり、あらゆる場合に使える尺度設定ではありません。

データ結合で識別情報を保つ

文書化された事実： selection.data(data, key)はデータを選択された要素にバインドします。selection.join()は、追加、更新、削除される要素を処理できます。キーを指定しない場合、インデックスで対応付けられます。

マークが状態間で同じエンティティを表すように、安定した意味的なキーを使います。

const marks = plot.selectAll("rect.bar")
  .data(rows, (row) => row.id)
  .join(
    (enter) => enter.append("rect").attr("class", "bar"),
    (update) => update,
    (exit) => exit.remove(),
  );

インデックスをキーにすると、並べ替えやフィルタリングの後、棒グラフが無関係なカテゴリに変化したように見えることがあります。追加、削除、同順位、カテゴリの並べ替えをテストしてください。

説明としてのアニメーション設計

各アニメーションのビートでは、次のいずれかに答えるようにします。

• 参照枠は何ですか？
• どのようなデータが届く、または変化しますか？
• どの比較が重要ですか？
• どのような不確実性や注意点がありますか？
• 視聴者に覚えてもらうべき最終状態は何ですか？

推奨する表示順序：

1. タイトル／問いと単位；
2. 軸または比較枠；
3. マーク；
4. 強調する関係；
5. 注釈と出典／注意点；
6. 安定した最終表示。

出典が裏付けていない測定精度を示唆する、数値が動いて増減するアニメーションは避けてください。定量的なマークにスプリング／弾性イージングを使って、値を超えて動かさないでください。バーが一時的に実際の値を超えると、誤った数量を視覚的に示してしまいます。イージングで表示の進行を制御してもかまいませんが、最終的に表示されるマークは正確な値を表し、誤解を招く途中状態は避ける必要があります。

決定論的なレンダリング

文書化された事実： D3 のトランジションは、D3 のタイマーシステムを使用し、経過時間に応じてスケジュールされます。インタラクティブなブラウザーアニメーションには適していますが、動画レンダラーは、リアルタイム再生ではない状態でフレームを順不同に要求することがあります。

固定メディアでは、要求されたフレームから視覚状態を直接計算します。

function renderFrame(frame, fps) {
  const raw = clamp01((frame - startFrame) / durationFrames);
  const progress = d3.easeCubicInOut(raw);

  bars
    .attr("y", (row) => d3.interpolateNumber(y(0), y(row.value))(progress))
    .attr("height", (row) => d3.interpolateNumber(0, y(0) - y(row.value))(progress));
}

さらによい方法は、データが固定された時点で補間器を事前に構築することです。マークの追加、更新、削除について、開始状態と終了状態を明示的に指定します。注釈、軸のトランジション、ラベル、出典注記も、同じフレーム状態から導出します。

要件：

• キャプチャ中にライブフェッチを行わない；
• 実時間の時計やイベント依存のトランジション状態を使わない；
• シード指定または事前計算済みのランダムレイアウトを使う；
• フォントファイルとテキストの計測を安定させる；
• フレームの逆順や順不同の要求にも正しく対応する；
• ストレスフレームを繰り返し比較する。

フォースレイアウトでは、初期位置とランダムソースを固定して一定回数のティックを実行し、結果の座標を保存してから、その固定された座標を使ってアニメーションさせます。レンダーワーカーごとに、制約のないライブのフォースシミュレーションを個別に実行しないでください。

マップ、ネットワーク、階層

地理マップ

• 指標が件数、率、割合、変化、指数のいずれなのかを明示する；
• 主張に必要な場合は、人口／曝露量で正規化する；
• 空間に関する問いに適した投影法を選び、明示する；
• データなしとゼロを区別する；
• 地理データの出典／バージョンと、形状データとデータの結合を保持する；
• 面積や投影法によって値を比較しにくい場合は、マップ以外の比較方法も含める。

ネットワークとフロー

• ノード、エッジ、方向、幅、距離がそれぞれ何を意味するかを定義する；
• フィルターされたエッジとレイアウト規則を明示する；
• 実際に測定された距離でない限り、フォースレイアウトでの近さを測定距離として示唆しない；
• 決定論的なキャプチャの前にレイアウトを固定する；
• 該当する場合は、フローの保存則を示すか、漏れ／集計について説明する。

階層

• 親子構造と合計値を検証する；
• 子孫と親の二重計上を避ける；
• 面積、角度、深さ、順序のどれで値を表すのかを明示する；
• 読み取れない小さなノードには、ラベルまたは表を用意する。

レスポンシブなバリエーション

同じデータ／主張の契約に基づいて各出力を設計しつつ、キャンバスに合わせてレイアウトを再計算します。

• 必要に応じて、余白、目盛りの密度、ラベルの配置、注釈の順序、チャートの形式を変更します。
• 縦型動画では、密度の高いデスクトップ用チャートを縮小するのではなく、小さな複数チャートや順位付けした一部の項目を使います。
• すべての短縮版で、単位、出典、不確実性、比較の文脈を維持します。
• 想定する実際の再生サイズでタイポグラフィをテストします。
• 固定動画のレイアウト判断の代わりに、ビューポート幅に応じたフォントスケーリングを使わないでください。

アクセシビリティ

WCAG 2.2 に記載されている事実： 情報を伝える視覚的な手段として、色だけを用いてはいけません。通常のテキストには一般に少なくとも 4.5:1、大きなテキストには少なくとも 3:1 のコントラスト比が必要です。また、意味のあるグラフィックオブジェクトや状態には、隣接する色に対して一般に少なくとも 3:1 の非テキストコントラストが必要です。

すべてのビジュアライゼーションで、次の点を守ってください。

• 色に加えて、直接ラベル、位置、形状、テクスチャ、線のスタイル、記号のいずれかを使用します。
• データの種類に適した順序とコントラストのパレットを使います。
• 簡潔なテキストで要点を示し、配信先で可能な場合は、基になるアクセシブルな表または構造化データを提供します。
• 不確実性と情報源は、色だけに頼らずテキストで示します。
• ナレーションと意味のある音声にはキャプションを付けます。
• アニメーションによってラベルが読みにくくならないようにします。
• マーク、背景、ハイライトが点滅する場合は、点滅の問題がないか確認します。

インタラクティブに公開する場合は、ホストに適したキーボード操作とスクリーンリーダー向けのセマンティクス、および視覚に頼らない代替手段を用意します。事前収録の動画では、ナレーション、キャプション、トランスクリプト、アクセシブルなデータ表が実用的な代替手段です。ソニフィケーションは補助にはなりますが、構造化されたデータの代替手段として自動的に機能するわけではありません。

パフォーマンスと出力品質

確認可能なベクターマークとテキストが重要で、DOM サイズも管理可能な場合は SVG を使用します。マークが非常に密集している場合は Canvas を検討しますが、アクセシブルな代替手段を計画し、テキストの鮮明さも別途確保します。データを削減する場合は、主張するパターンが維持されることを確認できる、文書化された方法のみを使用します。

次の項目を測定します。

• DOM／マークの数とレイアウト時間
• 配信解像度でのフレーム描画時間
• フォントとラベルの測定の安定性
• 長時間のレンダリング中のメモリ使用量
• パスの複雑さとオーバードロー
• 細い線、小さなラベル、グリッド、色のグラデーションのエンコード後の判読性

点の数に一律のしきい値を設けないでください。実際の上限は、チャートの種類、ブラウザー、レンダラー、ハードウェア、エフェクトによって異なります。

出典情報と QA

次の項目を含むビジュアライゼーションのマニフェストを保持します。

• 入力ファイル名とチェックサム
• 情報源、アクセス日、ライセンス、取得方法
• 変換とコード／設定のバージョン
• D3 のパッケージバージョン
• チャートの種類、ドメイン、範囲、ビン、投影法、レイアウトのシード／目盛り、配色、イージング
• 出力の寸法、fps、再生時間、レンダリング環境
• 承認済みの主張、注意事項、レビュー担当者

QA では次の項目を確認します。

1. データ： 合計、サンプル、変換、欠損値、不確実性を再現できること。
2. エンコーディング： スケール、基準線、単位、面積／長さ／位置、並べ替え、投影法、凡例を検証すること。
3. アニメーション： 入場／更新／退場時の同一性、誤解を招かない中間状態、ラベル、注釈、最後の静止表示を確認すること。
4. 決定性： フレームの反復、並べ替え、逆方向へのシークを比較すること。
5. アクセシビリティ： 色の代替手段、コントラスト、キャプション、テキストでの要点、データ表を確認すること。
6. 配信： トリミングのバリエーション、出典注記の判読性、フレーム数、圧縮、メタデータを確認すること。

重大な不備には、裏付けのない主張、出典または分母の欠落、誤解を招くスケール、誤った合計、重要な不確実性の隠蔽、色だけに依存する意味付け、決定性のないレイアウト、配信版で判読できない出典注記が含まれます。

例1：パイロットの成果比較

これは完全な例であり、必須の定型ではありません。

意図： 承認済みの記述「パイロットチームでは手作業によるエスカレーションが31％減少しました」を示す、7秒の9:16エビデンスカードを作成します。

データの契約： 社内パイロット、8チーム、測定期間は2026年4月～6月、比較対象は同じチームの2026年1月～3月のワークフロー、データのアクセス日は2026-07-05、値は相対的な減少率、ランダム化試験ではないこと、正確な件数と承認済みの注記を提示します。

デザイン： ゼロの基準線を持つ横棒を2本配置します。ラベルはそれぞれ Prior workflow と Pilot period とします。直接ラベルには件数を含め、相対的な比較を示す「31％減少」の注釈を別に配置します。出典とサンプルに関する注記は、最後の2秒間も表示します。色による違いはラベルと、異なるハッチング／塗りつぶしのパターンでも示します。

アニメーション：

00:00.00-00:00.60  Question, axis, unit, and baseline appear.
00:00.60-00:01.50  Prior bar grows linearly to its exact count.
00:01.20-00:02.10  Pilot bar grows to its exact count.
00:02.20-00:03.00  Difference bracket and "31% fewer" annotation appear.
00:03.00-00:05.00  Hold comparison.
00:05.00-00:07.00  Hold comparison plus source/sample disclosure.

すべてのマークはフレームから算出した進行度に基づいて評価し、弾むようなオーバーシュートは使わないでください。納品物とともに、元データの2行テーブルをエクスポートしてください。

期待される結果： 正確な値、公平な長さの比較、明確な分母と期間、読みやすい出典、クリーンなレンダリング間で同一のフレーム。

起こりやすい失敗： 比較対象の件数を示さずに31％をゼロからアニメーションさせること、社内パイロットであることを記載しないこと、棒グラフの基準線を途中で切ること、出典の表示時間が短すぎること、色だけで違いを示すこと。

バリエーション： 正確な件数を公表できない場合は、値を捏造する代わりに、明確なラベルを付けた指数比較（prior workflow = 100）を使い、変換方法を説明します。

例2：地域別の干ばつ異常マップ

これは完全な例であり、必須の定型ではありません。

意図： 流域全体の標準化降水量異常を示し、その後、影響が最も大きい5つの流域を比較する20秒のドキュメンタリー用インサートを作成します。

データの契約： 気象データセット名／バージョン、流域ジオメトリの出典／バージョン、明示した30年基準期間に対する月別異常値、欠測観測所と補間方法の記録、値は生の降水量ではなく異常スコアであることを示します。

ワークフロー：

1. ジオメトリとデータの結合キーを検証し、欠測流域を異常ゼロとは別に分類します。
2. 対象地域に適した等積図法を選び、制作メモに明記します。
3. ゼロを中心とする発散スケールを使い、凡例には直接ラベルを付け、深刻なカテゴリの境界にはテクスチャを付けます。
4. 固定した月別値の間を明示的にフレーム補間し、月ごとにマップを表示します。
5. 選択した月に5つの流域を注釈で示した後、正確に比較できる順序付きドットプロットに切り替えます。
6. 最後のホールド表示と文字起こしには、基準期間の定義、出典、補間に関する注意書きを残します。

期待される結果： 視聴者は空間的なパターンを把握した後、マップ上の面積を異常値の大きさと取り違えることなく、正確な順位比較を確認できます。

起こりやすい失敗： 観測所の生の数が色を決めてしまうこと、データのない地域が通常の値に見えること、図法が明記されていないこと、補間値を直接観測値として示すこと、ワーカー間でライブのフォース／衝突ラベルが異なること、アクセシブルなテーブルを付けずにマップだけを納品すること。

バリエーション： 短いソーシャルメディア用動画では、月ごとのアニメーションを省き、承認済みの1か月分と順序付きドットプロットを使います。基準期間と注意書きは残してください。

参考資料

2026-07-12 に確認した公式および権威ある参考資料：

• D3 ドキュメント：https://d3js.org/
• D3 のセレクション結合：https://d3js.org/d3-selection/joining
• D3 のスケール：https://d3js.org/d3-scale
• D3 の軸：https://d3js.org/d3-axis
• D3 のシェイプ：https://d3js.org/d3-shape
• D3 の補間とイージング：https://d3js.org/d3-interpolate and https://d3js.org/d3-ease
• D3 のタイマーとトランジション：https://d3js.org/d3-timer and https://d3js.org/d3-transition
• D3 の地理投影：https://d3js.org/d3-geo
• D3 ライセンス（ISC）：https://github.com/d3/d3/blob/main/LICENSE
• W3C WCAG 2.2「色の使用」：https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html
• W3C WCAG 2.2「コントラストの最小値」：https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• W3C WCAG 2.2「非テキストのコントラスト」：https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
• Royal Statistical Society「データビジュアライゼーションのベストプラクティス」：https://royal-statistical-society.github.io/datavisguide/