data-visualizer

データビジュアライザー

モダンなライブラリを使用して、チャート、ダッシュボード、インタラクティブなデータビジュアライゼーションを構築します。Recharts（React）、Chart.js（フレームワーク非依存）、D3.js（カスタム／高度な用途）に対応しています。

ライブラリの選択

ライブラリ	最適な用途	React	カスタマイズ性	バンドルサイズ（gzip）
Recharts	手軽なReactチャート、標準的な種類	ネイティブ	限定的	約139KB
Chart.js	フレームワーク非依存、シンプルなAPI	ラッパー	中程度	約68KB（ツリーシェイク可能）
D3.js	カスタムビジュアライゼーション、完全な制御	手動	完全	モジュールごとに約13～30KB

チャートの種類の選択

チャート	最適な用途	避けるべき状況
折れ線	時系列の傾向、連続データ	カテゴリデータ
棒	カテゴリの比較、ランキング	連続データ
円／ドーナツ	全体に対する割合（最大5～7分割）	カテゴリが7を超える場合、正確な比較
面	時間経過に伴う量、積み上げカテゴリ	重なり合う系列が多すぎる場合
散布図	相関、外れ値、分布	時系列データ
ヒートマップ	2つの次元にわたる強度	単純な比較

ダッシュボードのパターン

パターン	ユースケース	主な機能
KPIダッシュボード	経営指標	トレンド指標、カードグリッド
リアルタイム	ライブ監視	SSE／WebSocket、アニメーション無効化
インタラクティブフィルター	探索的分析	期間／地域の選択、ドリルダウン
ドリルダウン	階層データ	クリックしてズーム（年 → 月 → 日）

レスポンシブデザイン

アプローチ	実装
コンテナベースのサイズ設定	<ResponsiveContainer width="100%" height={300}>
アスペクト比モード	<ResponsiveContainer width="100%" aspect={2}>
モバイル対応	小さな画面では strokeWidth と height を小さくする
ラベルの簡略化	モバイルでは軸ラベルを減らす

よくある間違い

間違い	修正
幅／高さを固定する	ResponsiveContainer を使用する
リアルタイムデータにアニメーションを使用する	isAnimationActive={false} を設定する
円グラフの分割数が多すぎる	最大5～7分割にし、残りを「その他」にまとめる
アクセシブルでない色を使用する	WCAG AAに準拠し、色覚多様性に配慮したパレットを使用する
チャートライブラリ全体を読み込む	動的インポートで遅延読み込みする
データをフォーマットしない	通貨／パーセントには Intl.NumberFormat を使用する

委任

• チャートの種類を選ぶ前に、データの形状と利用可能なフィールドを調べる：Explore エージェントを使用します
• 要件に基づいて、複数のチャートを含む完全なダッシュボードを構築する：Task エージェントを使用します
• 大規模な分析ページ向けにビジュアライゼーションのアーキテクチャを計画する：Plan エージェントを使用します

参考資料

• ライブラリの選定 — Recharts、Chart.js、D3.js のセットアップと例
• チャートの種類 — ユースケース別の折れ線、棒、円、面、散布図、ヒートマップ
• ダッシュボードのパターン — KPI、リアルタイム SSE、インタラクティブなフィルター、ドリルダウン
• デザインとアクセシビリティ — 配色、色覚多様性に配慮したパレット、レスポンシブ対応、アニメーション
• データの書式設定とエクスポート — 数値フォーマッター、CSV エクスポート、PNG エクスポート
• パフォーマンス — 大規模なデータセット向けの遅延読み込み、仮想化
• ストーリーテリングと注釈 — データナラティブ、注釈、色の戦略、エッジケース