2つの連続変数間の関係や相関を調査する際、散布図（または散布図）は主な分析ツールです。数値のXおよびY座標に基づいてデータポイントを二次元グリッド上にプロットすることで、散布図はクラスタ、外れ値、トレンド、相関複雑なデータセットにおいて、マーケティング支出とリード生成、または従業員の体験と給与の関係など、明らかにします。
散布図の仕組み
カテゴリ駆動の棒グラフや折れ線グラフとは異なり、散布図は両軸に数値軸を使用します。Apache EChartsでは、type: 'scatter'は、2要素の数値座標配列としてフォーマットされたデータを期待します[x, y]、または数値のxAxisおよびyAxis設定にマッピングされたデータオブジェクトを想定しています。
1. 必須の設定
基本的な散布図を構築するには、type: 'value'両軸に定義し、シリーズデータ配列内に数値座標ペアを提供します：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
formatter: 'X: {c0}rnY: {c1}'
},
xAxis: {
type: 'value',
name: '広告費（$k）'
},
yAxis: {
type: 'value',
name: 'コンバージョン数'
},
series: [
{
type: 'scatter',
symbolSize: 12,
data: [
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.03, 7.24],
[12.0, 4.26],
[7.08, 4.82],
[5.02, 5.68]
]
}
]
};
高度な構造技術
散布図は、第三の変数（バブルチャート）を表現するための動的サイズ変更を組み込むことができ、また複数のカテゴリのクラスターオーバーレイを表示できます。
1. 変動する点のサイズ（バブル効果）
カスタム関数またはデータ値のマッピングをsymbolSizeに渡すことで、第三の定量的指標を点のサイズにエンコードします：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
formatter: function (param) {
return '支出: $' + param.data[0] + 'krn' +
'収益: $' + param.data[1] + 'krn' +
'ROAS: ' + param.data[2] + '倍';
}
},
xAxis: {
type: 'value',
name: '支出'
},
yAxis: {
type: 'value',
name: '収益'
},
series: [
{
name: 'キャンペーン',
type: 'scatter',
symbolSize: function (data) {
return data[2] * 5; // 第3の変数でバブルのサイズをスケーリング
},
data: [
[15, 120, 8.0],
[25, 180, 7.2],
[10, 50, 5.0],
[40, 380, 9.5],
[30, 210, 7.0]
],
itemStyle: {
color: '#5470c6',
opacity: 0.7
}
}
]
};
レイアウトとスタイルの微調整
マーカーの不透明度を制御し、ターゲットのトレンドラインを追加することで、密集したクラスタが固体の視覚的ブロブになるのを防ぎます。
1. 半透明マーカーとクラスタースタイリング
境界線のストロークと半透明の項目フィルを適用することで、高密度のクラスタ内でも重複するデータポイントが可視化されます：
ECharts
Edit ECharts in VPasCode
option = {
grid: {
left: '10%',
right: '10%',
containLabel: true
},
xAxis: {
type: 'value',
scale: true // データに密着するように軸の最小値/最大値を自動スケーリング
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
type: 'scatter',
symbolSize: 16,
itemStyle: {
color: 'rgba(84, 112, 198, 0.6)',
borderColor: '#5470c6',
borderWidth: 2
},
data: [
[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0],
[155.8, 53.6], [170.0, 59.0], [159.1, 47.6], [166.0, 69.8],
[176.2, 66.8], [160.2, 75.2], [172.5, 55.2], [170.9, 54.2]
]
}
]
};
戦略的なベストプラクティス
- 有効にする
scale: true数値軸で： 設定するscale: true両方の数値軸に設定して、プロットが関連するデータ範囲に自動ズームするようにし、原点を強制的に(0,0). - 重なりにフィル透過度を使用する：数百の点をプロットする際は、フィルの不透明度を約0.4～0.6に低下させることで、密集した重なり領域が自然に暗くなるようにします。
- 文脈のある軸ラベルを提供する：常にX軸とY軸に測定単位（例：「千ドル単位」または「ミリ秒単位の遅延」）を明示的にラベル付けすることで、ツールチップを確認せずに値がすぐに理解できるようにします。