高度な可視化（Nivo）
Recharts がカバーしない高度なチャートには Nivo を使います。学習の進捗管理、知識構造の可視化、プロセスの流れなどに適しています。
ヒートマップ — スキルマトリクス
チームメンバーのスキルレベルをマトリクスで俯瞰できます。
Loading chart...
ツリーマップ — 知識の構成比
学習領域をツリーマップで可視化すると、どの分野にどれだけ時間を割いたかが一目でわかります。
Loading chart...
ファネル — 学習プロセス
学習の各段階での離脱率やコンバージョンを漏斗型で表現します。
Loading chart...
ネットワークグラフ — 概念マップ
技術の関連性や依存関係をネットワーク構造で可視化します。ノード間の距離が近いほど関連が強いことを示します。
Loading chart...
チャートライブラリの使い分け
| チャート | ライブラリ | 学習での用途 |
|---|---|---|
| 棒 / 折れ線 / 円 | Recharts | 基本的な数値比較 |
| レーダー / 散布図 | Recharts | スキル比較、相関分析 |
| ヒートマップ | Nivo | スキルマトリクス、頻度分析 |
| ツリーマップ | Nivo | 構造や配分の俯瞰 |
| ファネル | Nivo | プロセスの段階分析 |
| ネットワーク | Nivo | 概念マップ、関連性の可視化 |
| フロー / ER / 状態遷移 | Mermaid | 設計図、テキストベースの図 |
Info
Nivo のチャートは全てダークテーマに統一されています。ホバーでツールチップが表示され、Recharts と同様にレスポンシブです。