# グラフと関係図を動かす

数値の変化を見せるならチャート、工程や接続関係を伝えるならノードと線の図解を選びます。2026年10月13日、[damkinの紹介投稿](https://x.com/damkina7/status/2109637722117714002)にある10リポジトリを確認し、掲載済みのD3に加えて9件を取り込みました。

各ライブラリに、架空データを使った独自の8秒作例、GIF、制作コードを用意しています。[作例一覧](../projects.html?category=data)と[3Dの一覧](../projects.html?category=three)から確認できます。取得コミット、README、ライセンスは[data/verification.json](../data/verification.json)、取り込み判断は[投稿の確認記録](../data/source-post-2109637722117714002.json)に記録しています。

## 見せたい内容から選ぶ

| 見せたい内容 | 道具 | 作例で使う機能 |
| --- | --- | --- |
| テキストで定義した工程と分岐 | [Mermaid](https://github.com/mermaid-js/mermaid) | 独自フローチャートをSVG化し、工程の強調を順番に切り替える |
| 数値の推移、実績と予測 | [Chart.js](https://github.com/chartjs/Chart.js) | Canvas 2Dの折れ線と値を更新し、表示する区間を変える |
| 時間帯や分類ごとの密度 | [Apache ECharts](https://github.com/apache/echarts) | ヒートマップの値と色を更新する |
| 入力、分岐、出力のつながり | [React Flow / Svelte Flow](https://github.com/xyflow/xyflow) | React版のノード、ハンドル、接続線で経路を示す |
| 科学データや複数シナリオの比較 | [Plotly.js](https://github.com/plotly/plotly.js) | 6つの架空シナリオを散布図へ描き、2変数の座標を更新する |
| React上で差し替える比較チャート | [Nivo](https://github.com/plouc/nivo) | SVGの積み上げ棒へフレーム由来のデータを渡す |
| サービスや組織の依存関係 | [AntV G6](https://github.com/antvis/G6) | ノードの配置とスタイルを更新する |
| ネットワークの最短経路 | [Cytoscape.js](https://github.com/cytoscape/cytoscape.js) | aStarで求めた経路を、ノードと線の強調でたどる |
| 立体のクラスタと接続関係 | [3d-force-graph](https://github.com/vasturiano/3d-force-graph) | 力学レイアウトを確定し、3Dカメラの視点を変える |
| 独自の配置やデータ変換 | [D3（掲載済み）](../projects.html#d3) | 同じ階層データをtreemapとpartitionへ変換する |

## グラフを動画へ仕上げる

Webでの自動アニメーションと、動画のフレーム取得では時間の扱いが異なります。動画へ書き出す場合は、フレーム番号から表示する値・座標・強調・カメラを計算し、描画完了を待って取得します。

1. 軸、単位、数値の出典と、合成データか実データかを決める。
2. 説明する順番に合わせて、値や関係を表示する時間を決める。
3. 自動アニメーションや物理計算を停止する。必要なレイアウトは先に計算する。
4. `seek(frame)`で同じ時刻を描けるようにし、更新APIの完了を待つ。
5. フレームを取得して動画へ書き出し、文字、軸、色の意味と場面のつながりを確認する。

今回の作例は、Chart.jsの`animation: false`と`update('none')`、EChartsの`animation: false`と`setOption`、Nivoの`animate: false`などを使います。関係図も、座標とスタイルをフレームから更新します。Mermaidでは図を生成した後のSVGへ独自の表示制御を加えます。[再現手順](../examples/README.md#データと関係図の9作例)に起動と書き出し方法を記載しています。

## 一次資料で確認した範囲

投稿は発見の入口です。掲載する機能・利用条件は、各プロジェクトのREADME、コード、公式ドキュメントとライセンスから確認しました。

- **Mermaid**はテキストから図を描くツールです。動画の時間表やシーン再生は作例側で実装しています。
- **Chart.js**の標準描画はCanvas 2Dです。GPU描画や固定60fpsの性能を、この追加で保証していません。
- **ECharts**本体はCanvas／SVGを使います。3DやWebGLには別の[ECharts GL拡張](https://github.com/ecomfe/echarts-gl)が必要です。今回の作例は本体の2Dヒートマップです。
- **React Flow / Svelte Flow**はノードUIの基盤です。今回実行したのはReact版で、タイムラインの管理は作例側へ置いています。
- **Plotly**や**Nivo**は、チャートの種類により描画方式とアニメーションの対応が異なります。今回実行したPlotlyの2D系列とNivoのSVG棒グラフを制作記録に明示しています。
- これらは独立したライブラリです。投稿で述べられたOpus／Sonnetの役割分担や、一体化した専用パイプラインの性能は検証していません。追加9作例はCodexが実装しました。

## 利用条件

追加9件のうちEChartsはApache-2.0、残る8件はMITです。コードや配布ビルドを作品へ含める場合は、各ライブラリと依存の著作権表示・ライセンスを保持してください。ガイド向けの追加作例には第三者の投稿動画、画面、画像、実測データを使用していません。独自のコード・合成データと既存のローカルフォントを使用しています。[出典とライセンス](出典とライセンス.md)も参照してください。