データの可視化・グラフ
データを視覚的に表現するためのUI要素やグラフライブラリの探求
棒グラフ（Bar Chart）
詳細を見る →カテゴリー別のデータ比較に最適な基本的なグラフ形式
Jan
Feb
Mar
Apr
RechartsNivoChart.js
積み上げ棒グラフ（Stacked Bar Chart）
詳細を見る →複数系列のデータを積み上げて合計と内訳を同時に把握できるグラフ形式
Q1
Q2
Q3
Q4
RechartsNivoChart.js
折れ線グラフ（Line Chart）
詳細を見る →時系列データの推移や傾向を示すのに効果的
RechartsNivoChart.js
エリアチャート（Area Chart）
詳細を見る →時系列データの量や推移を塗りつぶしで視覚的に強調する表現
RechartsNivoChart.js
円グラフ（Pie Chart）
詳細を見る →全体に対する各部分の割合を視覚的に表現
100%
RechartsNivoChart.js
散布図（Scatter Chart）
詳細を見る →2つの変数の相関関係やデータの分布パターンを視覚化
RechartsNivoChart.js
バブルチャート（Bubble Chart）
詳細を見る →3つの数値変数の関係をX軸・Y軸・バブルサイズで同時に可視化する散布図の拡張形式
RechartsNivoChart.js
ヒートマップ（Heatmap）
詳細を見る →2次元データの密度や強度を色の濃淡で視覚的に表現
カスタム ReactNivoChart.js
レーダーチャート（Radar Chart）
詳細を見る →複数の指標を放射状に配置し、多軸データのバランスや比較を視覚化
RechartsNivoChart.js
複合グラフ（Composed Chart）
詳細を見る →棒グラフと折れ線グラフを組み合わせ、異なるスケールのデータを一画面で比較
RechartsNivoChart.js
ゲージ／ラジアルバーチャート（Radial Bar Chart）
詳細を見る →進捗率やKPIを円形メーターで表示し、達成状況を直感的に可視化
82
91
67
99
RechartsNivoChart.js
ファンネルチャート（Funnel Chart）
詳細を見る →コンバージョンフローの各ステージの通過率を視覚化し、離脱ポイントを把握
訪問
閲覧
カート
手続き
購入
RechartsNivoChart.js
ツリーマップ（Treemap）
詳細を見る →階層データの構成比を面積で表示し、全体のシェアを直感的に把握
RechartsNivoChart.js
カレンダーヒートマップ（Calendar Heatmap）
詳細を見る →GitHubの草のように日別データをカレンダー形式の色の濃淡で表現
Nivoカスタム Reactreact-calendar-heatmap
ウォーターフォールチャート（Waterfall Chart）
詳細を見る →収益・コストの増減を段階的に表示し、最終的な損益の内訳を視覚的に把握
RechartsNivoChart.js
ボックスプロット（Box Plot）
詳細を見る →データの分布・中央値・四分位数・外れ値をグループ間で比較する統計グラフ
NivoD3.js カスタムChart.js カスタム
サンキーダイアグラム（Sankey Diagram）
詳細を見る →フローや流れ・変遷を矢印の太さで量を表現し、データの流れを可視化
RechartsNivoD3.js
ネットワークグラフ（Network Graph）
詳細を見る →ノード間の関係性や接続強度をフォースシミュレーションで可視化するグラフ形式
NivoD3.js カスタムreact-force-graph
パラレル座標（Parallel Coordinates）
詳細を見る →複数の変量を持つデータを平行軸上に描画し、多次元データのパターンや相関を視覚化
NivoD3.jsカスタムReact
人口分布マップチャート（Population Map）
詳細を見る →地理的な位置情報と人口データをバブルマップで可視化し分布を表現
カスタム ReactNivoChart.jsRecharts